html+css 百度首页练习

这几天看完了《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