<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<link href="CSS/baidu.css" rel="stylesheet">
<style>
/*.more-product{*/
/*background-color: blue;*/
/*color: white;*/
/*}*/
</style>
</head>
<body>
<!--头部-->
<div id="header">
<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">
<img src="images/bd_logo.png">
<div>
<input>
<a href="#">百度一下</a>
</div>
</div>
<!--尾部-->
<div id="footer">
<div class="footer-header">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About baidu</a>
</div>
<div class="footer-bottom">
c2016 Baidu
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
京ICP证030173号
<img src="images/copy_rignt_24.png">
</div>
</div>
</body>
</html>
/* baidu.css文件的代码*/
body{
/*background: url("../images/me.jpg");*/
/*background-size: cover;*/
}
#header{
text-align: right;
}
#header a{
color: #233;
font-family: "arial";
font-size: 13px;
margin: 10px 7px;
font-weight: bolder;
}
#header a.no-weight {
font-weight: normal;
}
#header a.more-product{
background-color: #3385ff ;
border: 1px solid #2d78f4;
color: white;
text-decoration: none;
display: inline-block;
65px;
height: 20px;
line-height: 20px;
text-align: center;
}
#content{
text-align: center;
margin-top: 30px;
margin-bottom: 250px;
}
#comment img{
270px;
height: 129px;
}
#content input{
500px;
height: 25px;
padding: 5px;
padding-bottom: 2.5px;
border: 1px solid #ddd;
outline: none;
}
#content input:focus{
border-color: #2d78f4;
}
#content a{
background-color: #3385ff ;
border: 1px solid #2d78f4;
color: white;
text-decoration: none;
display: inline-block;
100px;
height: 32px;
line-height: 32px;
text-align: center;
margin-left: -5px;
border: 1px solid #2d78f4;
}
#footer{
text-align: center;
}
#footer .footer-header{
margin-bottom: 10px;
}
#footer .footer-header a{
color: #00c;
font-size: 12px;
margin: 0px 5px;
}
#footer .footer-bottom{
color: #666;
}
#footer .footer-bottom a{
color: #666;
}
#footer .footer-bottom img{
14px;
height: 17px;
}