模拟实现百度首页页面效果
百度页面：
实现效果：
代码：
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="d1">
<div >
<ul id="k">
<li><a href="http://news.baidu.com/ " >新闻</a></li>
<li><a href="https://www.hao123.com/" >hao123</a></li>
<li><a href="http://map.baidu.com/">地图</a></li>
<li><a href="http://v.baidu.com/" >视频</a></li>
<li><a href="http://tieba.baidu.com/" >贴吧</a></li>
<li><a href="http://xueshu.baidu.com/">学术</a></li>
<li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li>
<li><a href="#">更多</a></li>
<p style="color: red;float:right;font-family:微软雅黑;font-size: 18px ">高考加油</p>
</ul>
</div>
</div>
<div id="d2" >
<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" id="a1">
<img src="image/logo.jpg">
</a><br />
<form action="http://www.baidu.com/s">
<div id="l">
<input type="text" name="wd">
<input type="submit" class="input_out" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" value="百度一下">
</div>
</form>
</div>
<div id="d3">
<div align="center" class="p">
<ul>
<li><a href="https://www.baidu.com/cache/sethelp/index.html" >设为首页</a></li>
<li><a href="https://home.baidu.com/" >关于百度</a></li>
<li><a href="http://ir.baidu.com/" >About Baidu</a></li>
<li><a href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888" >百度营销</a></li>
<li><a href="https://www.baidu.com/duty/">使用百度前必读</a></li>
<li><a href="https://help.baidu.com/newadd?prod_id=1&category=4" >意见反馈</a></li>
<li><a href="https://help.baidu.com/">帮助中心</a></li>
<p class="gg" style="font-size: 4px;color: gray">©2020 Baidu (京)-经营性-2017-0020
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="font-size: 4px;color: gray">京公网安备11000002000001号</a> 京ICP证030173号
</p>
</ul>
</div>
</div>
</body>
</html>
index.css2文件：
#d1{
position: absolute;
width: 2000px;
height: 20px;
}
#d1 ul{
list-style: none;
}
#d1 a{
font-family: "微软雅黑";
color: black;
font-size: 18px;
}
#d1 li{
float: left;
margin-right: 35px;
text-align: center;
}
#k li:hover>a{
color:blue;
}
#d2{
position:relative;
text-align: center;
top: 100px
}
#d2 input[type="text"]{
width:600px;
height:48px;
margin-top: 41px;
font-size: 20px;
border-width: 2px;
border-color: blue;
border-top-left-radius: 10px; /*圆角*/
border-bottom-left-radius: 10px; /*圆角*/
}
.input_out{
height: 54px;
width:100px;
margin-top: 41px;
background-color: blue;
border-width: 0px;
font-size: 20px;
color: white;
margin-left: -5px;
border-top-right-radius: 10px; /*圆角*/
border-bottom-right-radius: 10px; /*圆角*/
}
.input_move{
height: 54px;
width:100px;
margin-top: 41px;
background-color: mediumblue;
border-width: 0px;
font-size: 20px;
color: white;
margin-left: -5px;
border-top-right-radius: 10px; /*圆角*/
border-bottom-right-radius: 10px; /*圆角*/
}
#d2 input[type="submit"]:hover{
cursor: pointer;
}
#d3{
position: absolute;
width: 2000px;
height: 20px;
margin-top: 730px;
}
#d3 ul{
list-style: none;
}
#d3 a{
font-family: "微软雅黑";
color: gray;
font-size: 15px;
}
#d3 li{
float: left;
margin-right: 35px;
text-align: center;
}
#a1{
margin-bottom:100px;
}
a{
text-decoration:none;
}
.gg{
float: right;
}
#t:active{
border-color: mediumblue;
}