这几天看完了《css权威指南》，写了个百度页面，不带js的纯静态，主要目的就是掌握页面布局，字体颜色之类的没有深究。
写完了觉得很简单，毕竟一开始觉得只要模仿的像就行，但是缩小了浏览器窗口以后问题就出来了。比如搜索框随浏览器的缩小移位什么的，然后就去看百度首页的源码，这才知道要做到固定位置，应该怎么布置盒模型的嵌套，怎么定位元素等等。仅仅把一个元素放到大概位置是不难的，但是页面元素多/不想让元素随浏览器缩放移位的话就要好好规划布局了。
以下代码中，“百度一下”的搜索框实现有错误，其余各个盒模型基本按照百度源码的布置方式放置，没有去掉盒模型的边框，以便迅速查看。
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="baiducss.css"> <title>百度一下，你就知道</title> </head> <body> <div id="top"> <!-- <p id="demo">alkfj</p>--> <div id="right" > <a class="bold" href="" target="_blank" >新闻</a> <a class="bold" href="">hao123</a> <a class="bold" href="">地图</a> <a class="bold" href="">视频</a> <a class="bold" href="">贴吧</a> <a class="notbold" href="" >登陆</a> <a class="notbold" href="" target="_blank" >设置</a> <a class="more" href="" >更多产品</a> </div> </div> <div id="middle"> <div id="m_wrapper"> <div id="lg"> <img src="bd_logo1.png" width="270" height="129" <!--onmouseover="mover(this)" onmouseout="mout(this)"-->> </div> <div id="wrapper"> <span id="search"> <span class="camera"></span> <input class="first" type="text" onfocus="myFunction(this)"> </span> <span id ="last"> <input class="second" type="submit" value="百度一下"> </span> </div> </div> </div> <div id="middle2"> <!-- middle和middle2的作用就是固定再中间的那层，使之不随浏览器窗口缩放而移动 --> <div id="foot"> <div id="link"> <a href="">关于百度</a> <a href="">about baidu</a> <a href="">版权信息</a> <p id="copyright">@2015copyright 京TCP3248702394</p> </div> </div> </div> </body> </html>
body{ margin: 0; padding: 0; position: relative; font: 12px arial; } #top { position: absolute; height:32px; border-bottom: 1px solid #EBEBEB; width:100%; min-width: 1000px; } #right { position: absolute; top:0; right:0; width: 590px; font-size: 13px; text-align: right; color:#999; height:32px; line-height: 32px; } #right .bold { font-weight: bold; /* cursor: pointer;*/ } #right a { position: relative; margin-left:19px; color:#555; outline: none; display: inline-block; text-shadow: none; } #right .more { width:66px; color: #333; height: 32px; line-height: 32px; background: #398BFB; text-align:center; border-bottom: 1px solid #f0f0f0; text-decoration:none; } #middle { position: relative; height: 50%; margin: 0 auto; width: 1000px; min-height: 293px; border: 1px solid #b8b8b8; } #m_wrapper { width: 641px; height: 100%; min-height: 293px; margin: 0 auto; border: 1px solid #b8b8b8; } #lg { height: 61.8%; min-height:181px; position: relative; text-align: center; border: 1px solid red; } #lg img { position: absolute; bottom: 10px; left: 50%; margin-left: -135px; border: 1px solid red; cursor: default; } #wrapper { position: relative; border: 1px solid #b8b8b8; } #search { border: 1px solid #b8b8b8; position: relative; display: inline-block; } #search .first { width: 480px !important; padding-right: 48px; height: 20px; padding: 9px 7px; border: 1px solid red; font: 16px arial; } .camera { position: relative; right: 11px; top: 50%; margin-top: -8px; height: 16px; width: 18px; background: gray; } #last { width: 102px; height: 38px; border:1px solid #38f; border-bottom: 1px solid #2e7ae5; background-color: #38f; display: inline-block; } #last.second { height: 38px; line-height: 38px; background-color:#38f; border: 0; color: white; font-size: 16px; box-shadow: none; padding: 0; /* cursor: pointer;*/ } #wrapper2 { width: 500px; margin: 0 auto; } /*#wrapper3 { position: absolute; top: 80px; left: 450px; }*/ #middle2 { position: relative; width: 1000px; height: 40%; margin: 0 auto; min-height: 293px; border: 1px solid #b8b8b8; } #foot { position: relative; width: 641px; margin: 0 auto; border: 1px solid #b8b8b8; height: 200px; min-height: 100px; } #link { height: 38.2%; border: 1px solid #b8b8b8; text-align: center; width: 100%; position: relative; } #link p { color: #b8b8b8; font: 12px arial; }
总结：
- text-align: center; 100%可让行内元素居中显示
- 行高（line-height） = 元素高(height) 时可以让元素居中显示，行高一般不要大于元素高，否则布局容易乱。
- height = line-height=xx px; overflow: hidden; 使单行文字垂直居中对齐。其他垂直居中对齐的方法见这篇文章：http://www.cnblogs.com/dearxinli/p/3865099.html