让网页更美观（小练习处理）
Posted 韶光不负
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让网页更美观（小练习处理）相关的知识，希望对你有一定的参考价值。
练习是基础的加固与提升的必要条件，下面就与小编一起来看看下面图片使用css如何实现吧！
第一题：和平精英（因为原图片太小不好截图，所以就随便找图片，进行编写）
实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>主播</title>
<link rel="stylesheet" href="../css/host.css">
<link rel="stylesheet" href="../css/general.css">
</head>
<body>
<!-- 吧主播模块用一个div包起来，小编分成二部分上面图片一部分，下面字一部分 -->
<<div class="host">
<div class="picture">
<img src="../img/练习1.1.jpeg" alt="">
</div>
<div>
<a href="#" class="title" title="XYG比赛啦，突破突破突破">XYG比赛啦，突破突破突破</a>
<span class="avata">
<img class="portrait" src="../img/b6824c9d5593f03f5b5c4f71189023_180_135.jpg" alt="">
<i class="nick" title="张大仙">张大仙</i>
</span>
<span class="game">
<img src="../img/people_icon_54347.png" alt="">
<i>968.8万</i>
<a href="#" style="color: #FFE4C4;">王者荣耀</a>
</span>
</div>
</div>
</body>
</html>
css部分：（host部分）
.host{
margin: auto;
height: 250px;
width: 329px;
border: 1px solid honeydew;
}
.host>.picture>img{
height: 250px;
width: 100%;
}
.portrait{
float: left;
height: 24px;
width: 24px;
border-radius: 60%;
}
.title{
display: block;
height: 20px;
padding: 0 23px 0 8px;
line-height: 2-px;
}
.game{
float: right;
}(general部分)
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
.fl{
float:left;
}
.fr{
float:right;
}
html, body {
height: 100%;
width: 100%;
font-family: '微软雅黑';
overflow: hidden;
}
input,textarea{
border: none;
}效果显示
第二题：导航栏模块
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="../css/daohang.css"/>
<link rel="stylesheet" href="../css/general.css">
</head>
<body>
<div class="box">
<ul>
<li>
<img src="../img/2021-09-19_210815.jpg" alt="">
<div class="title">
<p style="size: a4;">参考书</p>
</div>
</li>
</ul>
<ul style="background-color: #D2B5E1;">
<li>
<img src="../img/2021-09-19_210837.jpg" alt="">
<div class="title">
<p style="size: a4;">实验室</p>
</div>
</li>
</ul>
<ul style="background-color: #E5A987;">
<li>
<img src="../img/2021-09-19_210849.jpg" alt="">
<div class="title">
<p style="size: a4;">小测试</p>
</div>
</li>
</ul>
<ul style="background-color: #96B2F3;">
<li>
<img src="../img/2021-09-19_210901.jpg" alt="">
<div class="title">
<p style="size: a4;">必修课</p>
</div>
</li>
</ul>
</div>
</body>
</html>
css
.box{
margin: auto;
height: 360px;
width: 160px;
border: 1px solid red;
}
.box>ul{
width: 160px;
height: 67px;
margin: auto;
margin-top: 20px;
background-color: #8DCE7C;
}
.box img{
margin-top: 20px;
margin-left: 50px;
float: left;
}
.box .title{
height: 67px;
width: 70px;
/* border: 1px solid red; */
float: right;
margin-top: 22px;
}
现象
以上是关于让网页更美观（小练习处理）的主要内容，如果未能解决你的问题，请参考以下文章