HTML實現百度頁面

阿新 • • 發佈：2021-11-08

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>百度</title>
    <style type="text/css">
        input{
            margin: 0;
            padding: 0;
        }
        #nav 
{
            /*background: lightblue;*/
            width: 600px;
            height: 30px;
            list-style: none; /* 去除黑點*/
            margin: 0;
            padding: 0;
            display: flex;    /*彈性佈局  均勻分佈開了*/
            justify-content: space-around; /*between  兩邊沒有間距了*/


      
        }
        #nav1 
{
            width: 1700px;
            height: 30px;
            list-style: none; /* 去除黑點*/
            margin: 0 auto;
            padding: 0;
            display: flex;    /*彈性佈局  均勻分佈開了*/
            justify-content: space-around; /*between  兩邊沒有間距了*/
            position: absolute;
            left: 80px 
;
            top: 1100px;
            /*postion: fixed

            width: 1200px;
            bottom: 0;
            right: 0;

            */



        }
        #nav a:hover{
            color: rgb(60, 93, 242);
        }
        #nav1 a{ /*後代選擇器*/
            color: lightgrey;
            font-size: 10px;
            text-decoration: none  /*去除下劃線*/;
            line-height: 30px;/*垂直居中*/

        }
        #nav1 a:hover{
            color: black;
        }

        #nav a{ /*後代選擇器*/
            color: #000;
            font-size: 13px;
            text-decoration: none  /*去除下劃線*/;
            line-height: 30px;/*垂直居中*/
        }
        /*#nav>a{ /*子代選擇器   親兒子*/
    
        /*li{
             float: left;
             margin-left: 20px;
             margin-right: 20px;
        }*/
        /*彈性佈局*/

        #topRight{
            /*background: lightpink;*/
            /*float: right;*/
            position: absolute;
            right: 10px;
            top: 10px;
        /*    margin-left: 20px;
            margin-right: 20px;*/
            width: 140px;
            display: flex; 
            justify-content: space-between;
        }
        #topRight>input{
            background: #fff;
            border: 0;
            cursor: pointer;
            /*放到連結上變成小手*/
        }
        #topRight>#login{
            background: #38f; /*!important*/;
            color: #fff;
            width: 48px;
            border-radius: 6px;
        }
        /*權重 權值 
        行內1000 
        id 100 
        class 10 
        tag（標籤）1*/
        #center{
            width: 600px;
            height: 250px;
            margin: 150px auto 0;
        /*    background: lightpink;*/

        }
        #imgBox{
            width: 220px;
            margin: 0 auto;
            /*background: lightblue;*/


        }
        #imgBox>img{
            width: 100%;   /*遵循父元素的高度 220px*/

        }
        #iptBox{
            width: 100%;
            height: 44px;
            /*background: lightblue;*/
            /*display: flex;    彈性佈局  均勻分佈開了
            justify-content: space-around; between  兩邊沒有間距了*/
            border: 1px solid lightgray;
            border-radius: 10px 10px 10px 10px;
        }
        #iptBox>input[type='text']{/*屬性選擇器*/
        width: 500px;
        height: 100%;
        float: left;
        border: 0;
        border-radius:  10px 0 0 10px ;


        }
        #iptBox>input[type='button']{/*屬性選擇器*/
        width: 100px;
        height: 100%;
        float: left;
        border: 0;
        color: #fff;
        background: #38f;
        border-radius: 0 10px 10px 0;
    /*    border-radius: 10px;*/

        }
    </style>

</head>
<body>
<ul id="nav">
    <li><a href="">新聞</a></li>
    <li><a href="">hao123</a></li>
    <li><a href="">地圖</a></li>
    <li><a href="">直播</a></li>
    <li><a href="">視訊</a></li>
    <li><a href="">貼吧</a></li>
    <li><a href="">學術</a></li>
    <li><a href="">更多</a></li>
</ul>
<div id="topRight">
    <input type="button" name="" value="設定">
    <input type="button" id="login" name="" value="登入">

</div>

<div id="center">
    <div id="imgBox">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <div id="iptBox">
        <input type="text" name="">
        <input type="button" name="" value="百度一下">
    </div>
</div>
<ul id="nav1">
    <li><a href="">關於百度</a></li>
    <li><a href="">About Baidu</a></li>
    <li><a href="">使用百度前必讀</a></li>
    <li><a href="">幫助中心</a></li>
    <li><a href="">京公網安備11000002000001號</a></li>
    <li><a href="">京ICP證030173號</a></li>
    <li><a>@2021 Baidu</a></li>
    <li><a>網際網路藥品資訊服務資格證書 (京)-經營性-2017-0020</a></li>
    <li><a href="">資訊網路傳播視聽節目許可證0110516</a></li>

</ul>
</body>
</html>

首先我們先觀察百度的頁面是如何實現的

如圖所示

如圖所示這是基本的頁面佈局

然後我們一點一點的弄

先弄左上角這個ul列表，因為預設在左上角就不用弄div盒子了

程式碼如下

<ul id="nav">
    <li><a href="">新聞</a></li>
    <li><a href="">hao123</a></li>
    <li><a href="">地圖</a></li>
    <li><a href="">直播</a></li>
    <li><a href="">視訊</a></li>
    <li><a href="">貼吧</a></li>
    <li><a href="">學術</a></li>
    <li><a href="">更多</a></li>
</ul>
我們把它叫做nav

css程式碼如下

#nav{
            /*background: lightblue;*/
            width: 600px;
            height: 30px;
            list-style: none; /* 去除黑點*/
            margin: 0;
            padding: 0;
            display: flex;    /*彈性佈局  均勻分佈開了*/
            justify-content: space-around; /*between  兩邊沒有間距了*/
      
        }
把每個li的變成彈性佈局，這樣的話就能在一行中顯示，不加

display: flex;    /*彈性佈局  均勻分佈開了*/
            justify-content: space-around; /*between  兩邊沒有間距了*/
的話


效果就變成了

然後我們加上這行程式碼以實現滑鼠放上變成小手和變色的效果

    #nav a:hover{
            color: rgb(60, 93, 242);
        }

cursor: pointer;
/*滑鼠放上變成小手*/

如圖所示

然後我們要設定右上角的效果

<div id="topRight">
    <input type="button" name="" value="設定">
    <input type="button" id="login" name="" value="登入">

</div>

我們把右上角的盒子叫做topRight（注意駝峰命名法）

在topRight中我們設定兩個button

css程式碼如下

#topRight{
            position: absolute;
            right: 10px;
            top: 10px;
            width: 140px;
            display: flex; 
            justify-content: space-between;
        }

        #topRight>input{
            background: #fff;
            border: 0;
            cursor: pointer;
            /*放到連結上變成小手*/
        }
這使得兩個input按鈕都出現

放到連結上變成小手的效果



然後我們對登入進行顏色設定

        #topRight>#login{
            background: #38f; /*!important*/;
            color: #fff;
            width: 48px;
            border-radius: 6px;
        }
        /*權重 權值 
        行內1000 
        id 100 
        class 10 
        tag（標籤）1*/


然後我們進行中間圖片和輸入框的編寫

程式碼如下

<div id="center">
    <div id="imgBox">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <div id="iptBox">
        <input type="text" name="">
        <input type="button" name="" value="百度一下">
    </div>
</div>
我們把這個盒子定義為center

這個大盒子裡面有兩個小盒子

一個我們叫做imgBox

這個盒子我們用於盛放圖片

一個我們叫做iptBox

用來盛放兩個input

css程式碼如下

 #center{
            width: 600px;
            height: 250px;
            margin: 150px auto 0; 居中顯示
        /*    background: lightpink;*/

        }
        #imgBox{
            width: 220px;
            margin: 0 auto;   居中顯示
            /*background: lightblue;*/


        }
        #imgBox>img{
            width: 100%;   /*遵循父元素的高度 220px*/

        }
        #iptBox{
            width: 100%;
            height: 44px;
            /*background: lightblue;*/
            border: 1px solid lightgray;
            新增灰色邊框
            border-radius: 10px 10px 10px 10px;
            新增圓角邊框


　　　　　  border——radius：10px 10px 10px 10px；
　　　　　　上 右 下 左

　　　　　　border——radius： 10px 10px 10px；
　　　　　　上 左右 下

　　　　　　border——radius：10px 10px；
　　　　　　上下 左右

　　　　　　border——radius：10px；
　　　　　　上下左右

        }
        #iptBox>input[type='text']{/*屬性選擇器*/

        width: 500px;
        height: 100%;
        float: left;
        border: 0;
        border-radius:  10px 0 0 10px ;


        }

屬性選擇器：

input[type='text']

input 下 type名叫做 text的input按鈕


子代選擇器：

#iptBox>input

iptBox下的input的按鈕

>下 只能為

上一個是下一個親爸爸

下一個是上一個的親兒子







        #iptBox>input[type='button']{/*屬性選擇器*/
        width: 100px;
        height: 100%;
        float: left;
        border: 0;
        color: #fff;
        background: #38f;
    /*    border-radius: 10px;*/



但是如果不設定

  input{
            margin: 0;
            padding: 0;
        }

的話

我們會得到這樣的結果

如圖所示

這樣的話

因為兩個input框會有padding和margin值 這樣會造成 

兩個框加起來會超出範圍

然後

導致他們不在一行

所以

我們要設定

padding 和 margin

為零啊啊啊啊








這樣的話完成了大半部分

最後我們弄最後底部的ul

程式碼如下

<ul id="nav1">
    <li><a href="">關於百度</a></li>
    <li><a href="">About Baidu</a></li>
    <li><a href="">使用百度前必讀</a></li>
    <li><a href="">幫助中心</a></li>
    <li><a href="">京公網安備11000002000001號</a></li>
    <li><a href="">京ICP證030173號</a></li>
    <li><a>@2021 Baidu</a></li>
    <li><a>網際網路藥品資訊服務資格證書 (京)-經營性-2017-0020</a></li>
    <li><a href="">資訊網路傳播視聽節目許可證0110516</a></li>

</ul>

css如下

#nav1{
            width: 1700px;
            height: 30px;
            list-style: none; /* 去除黑點*/
            margin: 0 auto;
            padding: 0;
            display: flex;    /*彈性佈局  均勻分佈開了*/
            justify-content: space-around; /*between  兩邊沒有間距了*/
            position: absolute;
            left: 80px;
            top: 1100px;
            /*postion: fixed

            width: 1200px;
            bottom: 0;
            right: 0;

            */

  #nav1 a{ 
　　　　　　　　/*後代選擇器*/
            color: lightgrey;
            font-size: 10px;
            text-decoration: none  /*去除下劃線*/;
            line-height: 30px;/*垂直居中*/

        }
        #nav1 a:hover{
            color: black;
        }



這樣我們會製作成了一個簡易的百度頁面

呀呀呀呀