通过亲自对百度首页布局，对网页布局方法及步骤有了更深刻的认识：在正式进入敲写代码前，一定要先对网页各功能部位进行大体布局，千万不可未思考明白就先敲代码，然后逻辑越来越不清楚，最后不是推倒重做，就是漏洞百出却又难以找出。
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度一下，你就知道</title>
<link href="images/百度icon.ico" rel="shortcut icon" type="image/x-icon">
<style>
.header{
width:100%;
height:50px;
font-size:14px;
font-weight:900;
text-align:center;
line-height:50px;
}
.header_right{
float:left;
margin-left:10px;
margin-right:10px;
}
.img{
width:100%;
height:175px;
text-align:center;
}
.search{
width:100%;
height:55px;
text-align:center;
line-height:40px;
}
.footer{
width:100%;
height:460px;
text-align:center;
}
a.header1 {color:black;}
a.header2 {color:white;}
a.footer {color:gray;}
</style>
</head>
<body>
<div class="header " >
<div class="header_right " style="margin-left:68%; ">
<a href="" target="_blank" class="header1">新闻</a>
</div>
<div class="header_right" >
<a href="" target="_blank" class="header1">hao123</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">地图</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">视频</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">贴吧</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">学术</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">登录</a>
</div>
<div class="header_right " >
<a href="" target="_blank" class="header1">设置</a>
</div>
<div class="header_right " >
<div style="background-color:#3385FF;height:20px;margin-top:15px;line-height:20px;color:white;">
<a href="" target="_blank" class="header2">
<div>更多产品</div>
</a>
</div>
</div>
</div>
<div class="img">
<div >
<img src="images/百度首页.gif" alt="百度首页" width=234 height=76 style="margin-top:55px;" />
</div>
</div>
<div class="search">
<div >
<div style="float:left; margin-left:27%;">
<form action="https://www.baidu.com" method="get">
<input name="search" id="search" type="text" style="width:550px;height:38px;margin-top:5px;border:1px solid blue;border-right:none;" />
</form>
</div>
<div style="float:left;margin-top:5px; ">
<a href="" ><img src="images/camera.png" alt="camera" width=40 height=40 style="border:1px solid blue;border-left:none;border-right:none;" /></a>
</div>
<div style="float:left;">
<form action="https://www.baidu.com" method="get">
<input type="button" value="百度一下" style="width:100px;height:42px;margin-top:5px;color:white;font-size:18px;line-height:40px;background-color:#3385FF;border:none" />
</form>
</div>
</div>
</div>
<div class="footer">
<div style="clear:both;"></div>
<div style="margin-top:240px;width:100%;">
<img src="images/二维码.png" alt="二维码" width="60" height="60" />
<p style="margin-top:2px; font-weight:900;font-size:12px;">百度</p>
</div>
<div style="text-align:center;width:100%;font-size:12px;color:gray;">
<div style="float:left;margin:10px;margin-bottom:5px;margin-left:40%">
<a href="" class="footer">把百度设为主页</a>
</div>
<div style="float:left;margin:10px;margin-bottom:5px;">
<a href="" class="footer">关于百度</a>
</div>
<div style="float:left;margin:10px;margin-bottom:5px;">
<a href="" class="footer">About Baidu</a>
</div>
<div style="float:left;margin:10px;margin-bottom:5px;">
<a href="" class="footer">百度推广</a>
</div>
</div>
<div style="text-align:center;width:100%;font-size:12px;color:gray;">
<div style="float:left;margin:10px;margin-left:33%;margin-top:0px">
©2018 Baidu <a href="" class="footer">使用百度前必读</a> <a href="" class="footer">意见反馈</a> 京ICP证030173号
<img src="images/京证号.jpg" alt="京证号" />
</div>
<div style="float:left;margin:10px;margin-top:0px">
<a href="" class="footer">京公网安备11000002000001号</a>
<img src="images/京公网.jpg" alt="京公网" />
</div>
</div>
</div>
</body>
</html>效果图如下：
