<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
<a href="https://www.nuomi.com/?utm_source=yiqifa&utm_medium=cps&utm_campaign=union&cid=002201&wi=ODM2OTI0fDAwNzdlMjU2OTI5YTg4Mzk3MjQy" target="blank">糯米</a>
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#" class="no-weight">登录</a>
<a href="#" class="no-weight">设置</a>
<a href="#" class="more-product">更多产品</a>
</div>
<!--中间内容-->
<div id="content">
<div class="content-top">
<img src="imgs/logo_white_ee663702.png" alt="百度的logo" />
</div>
<div class="content-bottom">
<input type="text">
<a href="#">百度一下</a>
</div>
<div class="content-img">
<a href="#"><img src="imgs/d_1.png"></a>
<a href="#"><img src="imgs/d_2.png"></a>
<a href="#"><img src="imgs/d_3.png"></a>
<a href="#"><img src="imgs/d_4.png"></a>
</div>
<div class="content-img">
<a href="#"><img src="imgs/d_5.png"></a>
<a href="#"><img src="imgs/d_6.png"></a>
<a href="#"><img src="imgs/d_7.png"></a>
<a href="#"><img src="imgs/d_8.png"></a>
</div>
</div>
<!--尾部-->
<div id="footer">
<div class="footer-top">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
</div>
<div class="footer-bottom">
©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号
<img src="imgs/copy_rignt_24.png">
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
a{
color: black;
}
body{
background: url("../imgs/bg.jpg");
background-size: cover;
}
/*头部*/
#header{
background-color: rgba(255, 255, 255, 0.3);
/*右对齐*/
text-align: right;
height: 38px;
line-height: 38px;
/*外边距*/
margin: 0 0 30px;
}
#header a{
margin-right: 8px;
/*加粗*/
font-weight: bold;
font-family: Arial;
font-size: 15px;
color: white;
}
#header a.no-weight{
font-weight: normal;
}
#header a.more-product{
background-color: #3385ff;
color: white;
/*去处下划线*/
text-decoration: none;
/*设置内边距*/
padding: 5px;
}
/*中间内容*/
#content{
/*background-color: green;*/
}
.content-top{
text-align: center;
}
.content-top img{
width: 270px;
}
.content-bottom{
background-color: red;
width: 600px;
height: 38px;
/*水平居中*/
margin:10px auto 30px;
}
.content-bottom input{
width: 500px;
height: 38px;
border:1px solid #dddddd;
/*向内扩展*/
box-sizing: border-box;
padding-left: 8px;
font-size: 15px;
}
.content-bottom input:focus{
outline: none;
border:1px solid #3385ff;
}
.content-bottom a{
background-color: #3385ff;
/*改变标签的类型*/
display: inline-block;
width: 100px;
height: 38px;
/*浮动*/
float: right;
/*水平垂直居中*/
text-align: center;
line-height: 38px;
color: white;
/*去处下划线*/
text-decoration: none;
}
.content-img{
text-align: center;
margin-bottom: 10px;
}
.content-img img{
width: 120px;
margin: 0 5px;
/*圆角*/
border-radius: 5px;
box-shadow: 0px 0px 50px gray;
}
.content-img img:hover{
/*不透明度*/
opacity: 0.5;
}
/*尾部*/
#footer{
/*background-color: purple;*/
/*定位*/
position: fixed;
bottom: 0;
width: 100%;
padding: 50px 0;
text-align: center;
font-size: 13px;
}
.footer-top{
margin-bottom: 8px;
}
.footer-top a{
margin: 0 5px;
color: darkgray;
}
.footer-bottom{
color: darkgray;
}
.footer-bottom a{
color: darkgray;
}
