百度主页（练习）

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

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

 

首先是top部分代码：

 1 <div class="top">
 2     <div class="title">
 3         <span>
 4             <a class="bold" href="#">新闻</a>&nbsp;
 5             <a class="bold" href="#">hao123</a>&nbsp;
 6             <a class="bold" href="#">地图</a>&nbsp;
 7             <a class="bold" href="#">视频</a>&nbsp;
 8             <a class="bold" href="#">贴吧</a>&nbsp;
 9             <a href="#">登录</a>&nbsp;
10             <a href="#">设置</a>&nbsp;
11             <input class="list" type="submit" value="更多产品" name="submit" />&nbsp;
12         </span>
13     </div>
14 </div>

这部分的样式表：

.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部分，先贴代码：

<div class="body">
    <div class="pic">
        <img class="logo" src="logo.png" />
    </div>
    <div class="search">
        <form>
            <label for="search"></label>
            <input class="input" type="text" name="search" id="search" value="" /><input class="btn" type="submit" value="百度一下" name="submit" />
        </form>
    </div>
</div>

 

样式表：

.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才会是扁平化的按钮。

 

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

                

 

原网页的表单和按钮是严格对齐的，而本身作的有一点偏移。

（解决方法待更新）

 

最后是底部的版权部分：

<div class="foot">
    <div class="link">
        <a href="#">把百度设为主页</a>&nbsp;
        <a href="#">关于百度</a>&nbsp;
        <a href="#">About Baidu</a>
    </div>
    <div class="copyright">
        <p>
            ©2015 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号 
        </p>
    </div>
</div>

 

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的没放是由于实在有点惨）