开卷有益,感谢原作:
http://www.myexception.cn/HTML-CSS/2025067.html
(1)效果
(2)html代码
<html>
<head>
<meta charset="utf-8"/>
<title>百度一下,你就知道</title>
<style type="text/css">
.top{
width: 100%;
height:64px
}
.top>.title{
height: 64px;
float: right;
}
.top>.title>span{
line-height: 64px;
float: right;
}
.top>.title>span>a{
font-size: 16px;
font-family: "宋体"
color: #333
}
.top>.title>span>.bold{
font-weight: bold;
}
.list{
border: 0;
height: 25px;
width: 60px;
background: #36f;
color: #fff
}
.pic{
text-align: center;
margin-bottom: 30px;
}
.logo{
height: 130px;
width: 270px;
}
.search{
text-align: center;
}
.input{
width: 540px;
height: 36px;
}
.btn{
border: 0;
width: 100px;
height: 40px;
background: #36f;
font-size: 15px;
color: #fff;
}
.footer{
width: 100%;
position: absolute;
bottom: 100px;
}
.footer>.title{
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="top">
<div class="title"/>
<span>
<a class="bold" href="#">新闻</a> 
<a class="bold" href="#">hao123</a> 
<a class="bold" href="#">地图</a> 
<a class="bold" href="#">视频</a> 
<a class="bold" href="#">贴吧</a> 
<a href="#">登录</a> 
<a href="#">设置</a> 
<input class="list" type="submit" value="更多产品" name="submit"/>
</span>
</div>
</div>
<div class="body">
<div class="pic">
<img class="logo" src="baidu.png">
</div>
<div class="search">
<form>
<input class="input" type="text" name="search" value=""/>
<input class="btn" type="submit" value="百度一下"/>
</form>
</div>
</div>
<div class="footer">
<div class="title">
<a href="">把百度设为首页</a> 
<a href="">关于百度</a> 
<a href="">About Baidu</a> 
</div>
</div>
</body>
</html>