index.css
body{
background: url("../image/bg.jpg");
background-size: cover;
}
#header{
text-align: right;
}
#header a{
color: #333;
font-family: "arial";
font-size: 13px;
margin: 10px 7px;
font-weight: bolder;
}
#header a.no-weight{
font-weight: normal;
}
#header a.more-prodcuct{
background-color: #3385ff;
border: 1px solid #2d78f4;
color: white;
text-decoration: none;
display: inline-block;
width: 65px;
height: 20px;
line-height: 20px;
text-align: center;
}
#content{
text-align: center;
margin-top: 130px;
margin-bottom: 450px;
}
#content img{
width: 270px;
height: 129px;
}
#content input{
width: 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;
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
margin-left: -5px;
border: 1px solid #2d78f4;
}
#footer{
text-align: center;
font-size: 12px;
}
#footer .footer-header{
margin-bottom: 10px;
}
#footer .footer-header a{
color: #00c;
margin: 0px 5px;
}
#footer .footer-bottom{
color: #666;
}
#footer .footer-bottom a{
color: #666;
}
#footer .footer-bottom img{
width: 14px;
height: 17px;
}
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link href="css/index.css" rel="stylesheet">
</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-prodcuct">更多产品</a>
</div>
<!--主要内容-->
<div id="content">
<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">
©2015 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号
</div>
</div>
</body>
</html>
