HTML實現百度頁面

本文轉載自查看原文 2021-11-08 21:41 3049

<!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;
        }



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

呀呀呀呀

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Axure實現百度登錄頁面（一） html+css制作一個簡易百度頁面百度搜索頁面html源碼 HTML實現百度分享插件分享網頁 html如何實現圓角的百度搜索框？【HTML】百度地圖webAPI使用 html和css制作百度界面關於html5新增的功能（百度）百度前端代碼規范：HTML 前端頁面引用百度地圖