HTML+CSS例子＞百度首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<style>
body {
font-size: 14px;
color: #666;
}
div {
text-align: center;
}
/*.header{*/
/*height: 200px;*/
/*}*/
.content {
height: 250px;
}
/*.footer{*/
/*height: 200px;*/
/*}*/
.header,
.footer {
height: 200px;
}
.logo {
height: 150px;
}
input[type=text] {
width: 400px;
height: 30px;
}
input[type=submit] {
width: 100px;
height: 30px;
}
.search {
height: 60px;
}
.bk {
height: 120px;
}
.aq {
height: 40px;
}
.tk {
height: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="img/bdlogo.gif" alt="百度图片">
</div>
<div class="nav">
<a href="#">新 闻</a>
<strong>网 页</strong>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
</div>
<div class="content">
<div class="search">
<form action="http://www.baidu.com">
<input type="text" name="" id="">
<!--注意: 没有默认标题的原因是value=""-->
<input type="submit" value="百度一下">
</form>
</div>
<div class="bk">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a>
|
<a href="#">更多>></a>
</div>
<div>
<img src="img/ic.jpg" alt="定位图片">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
</div>
<div class="footer">
<div class="aq">
<a href="#">把百度设为主页</a>
<a href="#">安装百度卫士</a>
</div>
<div class="tk">
<a href="#">加入百度推广</a>
|
<a href="#">搜索风云榜</a>
|
<a href="#">关于百度</a>
|
<a href="#">About Baidu</a>
</div>
<div>
©2016 Baidu 使用百度前必读 京ICP证666号
</div>
</div>
</body>
</html>
需要的图片：
