Front-end novice to do the first page, modeled after Baidu page layout, there are many special effects did not get out.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
*{
padding:0;
margin:0;
}
. box1{
margin-top:19px;
margin-bottom:5px;
Display:inline-block;
Clear:both;
Float:right;
}
a{
margin-left:18px;
line-height:24px;
font-size:13px;
Color:black;
Text-decoration:underline;
Font-weight:bold;
}
#zzr {
Display:inline;
List-style:none;
}
. Box1 Li ul {
List-style:none;
Display:none;
position:relative;
}
. Box1 Li:hover UL {
border:1px solid #ccc;
Color: #06f;
Display:block;
Position:absolute;
right:60px;top:38px;
}
. shezhi{
Text-decoration:none;
Font-weight:normal;
padding-right:15px;
}
. more{
Background-color: #38f;
Color: #fff;
Display:inline-block;
Text-align:center;
Text-decoration:none;
width:60px;
}
#logo {
Display:block;
Text-align:center;
padding-top:48px;
}
form{
Text-align:center;
}
input{
padding:0 0 0 7px;
width:538px;
height:33px;
border:1px solid #b6b6b6;
}
button{
width:100px;
height:36px;
border:0;
Background-color: #3385ff;
Color: #fff;
font-size:15px;
}
Form button:hover{
Cursor:pointer;
}
</style>
<title> Baidu </title>
<body>
<div class= "Box1" >
<a href= "https://www.nuomi.com/?cid=002540" > Glutinous rice </a>
<a href= "http://news.baidu.com/" > News </a>
<a href= "Https://www.hao123.com/?tn=97774645_hao_pg" >hao123</a>
<a href= "http://map.baidu.com/" > Map </a>
<a href= "http://v.baidu.com/" > Video </a>
<a href= "http://tieba.baidu.com/" > Paste </a>
<a style= "Font-weight:normal" > Login </a>
<li id= "ZZR" ><a style= "Font-weight:normal" > Settings </a>
<ul>
<li><a href= "#" class= "Shezhi" > Search Settings </a></li>
<li><a href= "#" class= "Shezhi" > Advanced search </a></li>
<li><a href= "#" class= "Shezhi" > Close forecast </a></li>
<li><a href= "#" class= "Shezhi" > Search History </a></li>
</ul></li>
<a class= "More" > More Products </a>
</div>
<div id= "logo" >
</div>
<form>
<input type= "text" ><button type= "button" > Baidu </button>
</form>
</body>
As shown below:
Use HTML and CSS to imitate Baidu page.