这几天看完了《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:;
padding:;
position: relative;
font: 12px arial;
}
#top {
position: absolute;
height:32px;
border-bottom: 1px solid #EBEBEB;
width:100%;
min-width: 1000px;
}
#right {
position: absolute;
top:;
right:;
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:;
color: white;
font-size: 16px;
box-shadow: none;
padding:;
/* 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; width: 100%可让行内元素居中显示
行高（line-height） = 元素高(height) 时可以让元素居中显示，行高一般不要大于元素高，否则布局容易乱。
height = line-height=xx px; overflow: hidden; 使单行文字垂直居中对齐。其他垂直居中对齐的方法见这篇文章：http://www.cnblogs.com/dearxinli/p/3865099.html
