一直觉得百度首页很复杂的，有那么多的东西，跟这个博主学习了之后，仿写了一下，样式好像很简单
只设置的一些组件的高度而已，不得不说，CSS真是个好东西呀
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度首页</title>
<style>
body {
font-size: 14px;
color:#666
}
div {
text-align: center;
}
.content {
height: 250px;
}
.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="C:\Users\libo\Desktop\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="1" id="1">
<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="" 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>
这就是全部的代码了，除了使用了一张百度的logo图标图片之外，其他就没有什么了
运行之后的页面如下所示：
完毕
