百度主頁（練習）

時間 2019-12-09

標籤百度主頁練習简体版

原文原文鏈接

學了幾天Html和CSS，作了個百度主頁當練習（由於最簡單）。因爲還沒看到Javascript，因此只是儘可能把佈局作得類似一些。佈局

百度的主頁比較簡單，大概分爲三個部分：右上角的標籤、Logo和表單、下面的版權信息。字體

首先是top部分代碼：spa

 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使得橫向能夠填滿整個頁面。3d

top裏面的title這一層使用float:right;讓內容向右對齊。code

title裏的span這一層是多加的，用line-height作一個垂直居中。orm

title和span的寬度都自適應。視頻

幾個標籤的字體樣式都比較好定義，只是最後一個「更多產品」，這裏使用表單裏面的button，定義一下寬和高，背景顏色和字體顏色。若是要作一個純色的按鈕還要記得把border改爲0。blog

作出來的效果大概是這樣的（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;}