百度主页（练习）_html/css_WEB-ITnose

学了几天Html和CSS，做了个百度主页当练习（因为最简单）。由于还没看到Javascript，所以只是尽量把布局做得相似一些。

百度的主页比较简单，大概分为三个部分：右上角的标签、Logo和表单、下面的版权信息。

首先是top部分代码：

 1 
 2     
 3          4             新闻  5             hao123  6             地图  7             视频  8             贴吧  9             登陆 10             设置 11              12         13     
14 

这部分的样式表：

.top{    width:100%;    height:64px;}.top>.title{    height:64px;    float:right;}.top>.title>span{    line-height:64px;    float:right;}.top>.title>span>a{    font-size:13px;    font-family:"宋体";    text-decoration:underline;    color:#333}.top>.title>span>.bold{    font-weight:bold;}.list{    border:0;    height:25px;    width:60px;    background:#36F;    color:#fff;}

这里用了很多层嵌套。首先top设置width使得横向可以填满整个页面。

top里面的title这一层使用float:right;让内容向右对齐。

title里的span这一层是多加的，用line-height做一个垂直居中。

title和span的宽度都自适应。

几个标签的字体样式都比较好定义，只是最后一个“更多产品”，这里使用表单里面的button，定义一下宽和高，背景颜色和字体颜色。如果要做一个纯色的按钮还要记得把border改成0。

做出来的效果大概是这样的（Chrome）：

对比一下百度的页面：

效果基本一样（好像有个错别字）

不过，“更多产品”这部分的文字和左边对齐了，可是按钮的上下边框并没有和什么对齐，不知道算不算设计上的误差哈（个人觉得仔细看的时候稍微有点不适）。

下面是body部分，先贴代码：

样式表：

.pic{    text-align:center;    margin-bottom:30px;}.logo{    height:130px;    width:270px;}.search{    text-align:center;}.input{    width:540px;    height:36px;}.btn{    border:0;    width:100px;    height:40px;    background:#36F;    font-size:15px;    color:#fff;}

Body又分两个块：图片和搜索框。

其中图片用一个div包裹，是为了让图片水平居中，并且和top层拉开一些距离。图片本身也需要调整尺寸。

搜索框部分用form，并且给search这一层调整水平居中。

这里表单和按钮的样式表里要写的比较多：

表单只要调整好宽和高就可以，按钮像之前一样，除了宽高还有字体和背景，另外要将border设定成0才会是扁平化的按钮。

做出来的页面只有一个细节和原网页不同：

原网页的表单和按钮是严格对齐的，而自己做的有一点偏移。

（解决方法待更新）

最后是底部的版权部分：

    
        把百度设为主页         关于百度         About Baidu    
    
        
            ©2015 Baidu 使用百度前必读 意见反馈 京ICP证030173号         
    

CSS：

.foot{width:100%;    position:absolute;    bottom:100px;}.foot>.link{    text-align:center;    margin-bottom:10px;}.foot>.link>a{    font-size:12px;    font-family:"宋体";    text-decoration:underline;}.copyright{    text-align:center;}p,p>a{    font-size:12px;    font-family:"宋体";    color:#666;}

这里要说明一下，我觉得foot的部分应该要参照页面的底部来定位才更符合语义，所以这里使用了absolute并且和底部拉开一些距离（和百度差不多的距离）。

两行信息分了两个块分别定义，都设置水平居中。效果如下：

原网页：

效果还是很接近的，再看一下整体效果图（Chrome）：

除了不能点以外感觉都还不错，

下次试着写复杂一点的网页。

（PS：IE的没放是因为实在有点惨）