Problem summary:
1. The use of margin flexibly controls the distance of each element. The setting of the bottom margin will affect the display size of the page, which may lead to a drop-down bar on the right. Therefore, only margin top can be set.
2. A newline in a document may result in a space or gap. Where you really need to add spaces, use & nbsp.
3. To maintain the same height of the text and submit attributes of input, you need to set the same font size, and a padding bottom of submit must be set to 1.
4. A large number of duplicate class es, such as li tags, can be omitted. They are written directly through the child elements of ul, represented by ">".
5. The class naming is not standardized. It depends on the case.
html code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Baidu once, you will know</title> <link rel="stylesheet" type="text/css" href="css/wangye5.css"> </head> <body> <ul class="ul1"> <li class="li1"><a id="more" href="">More products</a></li> <li class="li1"><a class="set" href="">Set up</a></li> <li class="li1"><a class="login" href="">Sign in</a></li> <li class="li1"><a href="">learning</a></li> <li class="li1"><a href="">Post Bar</a></li> <li class="li1"><a href="">video</a></li> <li class="li1"><a href="">Map</a></li> <li class="li1"><a href="">hao123</a></li> <li class="li1"><a href="">Journalism</a></li> </ul> <div class="clear"></div> <div class="center"> <div class="content"> <img class="img1" src="img/bd_logo1.png" title="Click to learn more"/> <div class="input"> <input class="input1" type="text" /><input class="input2" type="submit" value="Use Baidu Search" /> <img class="img2" src="img/baidu2vm.png"> <br/><span class="span1">Baidu</span> <div class="clear"></div> <ul class="ul2"> <li class="li2"><a href="">Make Baidu My Homepage</a></li> <li class="li2"><a href="">About Baidu</a></li> <li class="li2"><a href="">About Baidu</a></li> <li class="li2"><a href="">Baidu promotion</a></li> </ul> <div class="clear"></div> <p class="foot">©2018 Baidu <a href="">Read Before Using Baidu</a> <a href="">Feedback </a>Beijing ICP No. 030173<img src="img/baidulogo2.png"/> <span class="span2"><a href="">Jinggong Anbei 11000002000001</a><img src="img/baidulogo3.png"/> </span></p> </div> </div> </div> </div> </body> </html>
css code:
ul,li,p,input,body{
margin:0;
padding:0;
}
body{
background-color:white;
color:black;
font:normal bold 14px/30px Tahoma, Geneva, sans-serif;
}
.ul1 {
margin:0;
padding:0;
list-style-type:none;
display:inline-block;
position:absolute;
right:5px;
top:3px;
}
.li1{
float:right;
margin:10px;
}
.li1 a{
color:black;
}
.li1 a:hover{
color:#0000cc;
}
#more{
background-color:#3388ff;
color:white;
text-decoration:none;
padding:3px;
}
.more:hover{
color:black;
background:gray;
}
.login,.set{
font-weight:lighter;
}
.clear{
clear:both;
}
.center{
text-align:center;
margin-top:32px;
}
.content{
display:inline-block;
width:650px;
height:auto;
text-align:center;
}
.img1{
display:inline-block;
width:270px;
height:129px;
}
.input{
text-align:center;
margin:17px 0px;
}
.input1{
border:solid 1px #AAAAAA;
width:540px;
height:34px;
font-size:15px;
text-indent:8px;
}
.input2{
background-color:#3388ff;
width:101px;
height:36px;
border:none;
color:white;
font-size:15px;
padding-bottom:1px;
}
.img2{
display:inline-block;
width:64px;
height:64px;
margin:158px 0px 0px 0px;
}
.span1{
display:block;
color:#666666;
font-size:12px;
margin-left:-4px;
margin-top:-10px;
}
.ul2{
display:inline-block;
list-style-type:none;
margin-left:-15px;
margin-top:8px;
}
.li2{
float:left;
margin:0px 14px;
}
.li2 a{
color:#999999;
font-size:12px;
font-weight:lighter;
}
.foot{
color:#999999;
font-size:12px;
font-weight:lighter;
}
.foot a{
color:#999999;
}
.span2{
margin-left:23px;
}Operation result:
