百度界面模拟

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

/*自己要到处跑,绝对定位.儿子到处跑,相对定位
特殊：如果自己在上下左右微调，可以使用相对定位*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}

.header_right{
width: 520px;
position: absolute;
right: 0;
top: 25px;
}

.header_right>ul>li{
padding: 0 12px;
float: left;
}

.header_right>ul>li>a{
font-size: 11px;
color: black;
text-align: center;
}

.header_right>ul>li>a:hover{
color: blue;
}

.header_right>ul>li>ul{
font-size: 11px;
border: 1px solid gainsboro;
position: relative;
top: 5px;
left: -20px;
display: none;
}

.header_right>ul>li>ul>li{
padding: 5px 10px;
}

.header_right>ul>li>ul>li:hover{
color: blue;
}

.header_right>ul>li:nth-child(8):hover>ul{
background-color: white;
color: #000000;
display: block;
}

.header_right>span{
color: white;
background-color: #00BFFF;
padding: 2px;
font-size: 11px;
margin-right: 10px;
float: right;
}

.content{
width: 645px;
text-align: center;
position: absolute;
top: 28%;
left: 50%;
transform: translate(-50%,-50%);
/*border: 1px solid yellow;*/
}
.content img{
width: 330px;
height: 150px;
}
.content .input_container{
width: 645px;
height: 35px;
/*border: 1px solid yellow;*/
position: relative;
}
.content .input_container input[type=text]{
width: 543px;
height: 33px;
outline: none;
border: 1px solid #aaa;
position: absolute;
top: 0;
left: 0;
padding-left: 10px ;
}
.content .input_container input[type=button]{
width: 100px;
height: 35px;
background-color: blue;
color: black;
/* border: 1px solid #aaa;*/
position: absolute;
top: 0;
right: 0;
outline: none;
}
/*不设置宽高,背景图不显示,所以要设置成display:block*/
.content .input_container a{
/* display: none;*/
width: 18px;
height: 16px;
position: absolute;
right: 112px;
top:25%;
background-image:url(img/camera.png);
}
.content .input_container a:hover{
/* display: none;*/
background-position-y: -20px;
}

footer{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}

</style>
</head>

<body>
<div class="header_right">

<ul >
<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="https://tieba.baidu.com/index.html">贴吧</a></li>
<li><a href="http://xueshu.baidu.com/">学术</a></li>
<li><a href="#">登录</a></li>
<li>
<a href="#">设置</a>
<ul >
<li>搜索设置</li>
<li>高级搜索</li>
<li>关闭预测</li>
<li>搜索历史</li>
</ul>
</li>
</ul>
<span>更多产品</span>

</div>
<div class="content">
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<div class="input_container">
<input type="text" />
<input type="button" value="百度一下" />
<a href="#"></a>
</div>

</div>
</body>
<footer>©2017Baidu
<a href="https://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://help.baidu.com/">意见反馈</a> 京ICP证030173号
<br />
      
<img src="img/jinghui.png" />
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
</footer>

</html>

猜你喜欢