html+css簡單的實現360搜索引擎首頁面

今天主要學習了是如何實現的，以及我在寫這個頁面的時候我所遇到的一些困難。

　　主要實現是用代碼的，不說廢話了，其實我是想說我走的坑有哪些。

　　　　1.代碼的基礎不好，元素的一些屬性不熟悉，對於HTML和css還沒有一個更深層次的一個理解。

　　　　2.注意一些類選擇器和ID選擇器的名是否對一致。

　　　　3.在導航欄那一部分的布局和內外邊距的距離，以及在右面的導航欄里的一些標簽處理。

　　　　4.加載圖片img標簽的運用還不是很流暢，圖片的大小問題，圖片的位置問題以及按鈕的一些寫法，還有下面的input標簽的用法和css的屬性，都是很欠缺的。

　　　　5.對最下面的導航欄的理解很實用方法海不是太了解。

第一部分：主要是HTML

代碼

<div id="header" >
            <div class="nav_1">        //導航欄部分
                <a>360導航</a>
                <a>資訊</a>
                <a>視頻</a>
                <a>圖片</a>
                <a>良醫</a>
                <a>地圖</a>
                <a>百科</a>
                <a>文庫</a>
                <a>英文</a>
                <a>更多</a>
            </div >
            <div class="nav_2">
                <a>邯鄲 :</a>
                <a>多雲 29°C</a>
                <a>良 83</a>
                <a>|</a>
                <a>設置</a>
                <a>換膚</a>
                <a>提醒</a> 
                <a>登錄</a>
            </div>
        </div>
        <div class="container">         //img圖片部分
            <div class="img_out"><img src="D:/360.jpg" 150px alt="360搜索瀏覽器" ></div>
            <div class="input_out">     //input 輸入框
                <input  type="text">    
                <button>搜索</button>   //button按鈕部分
            </div>
        </div>
        
        <div class="able_1">          //底部導航欄
            <span>360瀏覽器客戶端官網</span>
            <span>意見反饋</span>
            <span>違法舉報</span>
            <span>使用幫助</span>
            <span>使用協議</span>
            <span>隱私條款</span>
            <span>免責聲明</span>
            <span>站長平台</span>
            <span>推廣合作</span>
            <span>360搜索聯盟</span>
        </div>
        <div class="abel_2">
            <span>©2019 360.CN</span>
            <span> 奇虎360旗下搜索服務 </span>
            <span> 京ICP備08010314號-19</span>
            <span> 京公網安備11000002000022號</span>
        </div>

 

其實寫到這里還好，其實HTML代碼還好說沒那么難，就是到css這個地方就不知道怎么開始畫了，一用到css那就難了，其實我這篇文章專門給剛學習的小白看的大佬請繞過，一會

我會詳細的說下css那些地方我做錯的地方，HTML應該都能讀懂吧，如果有不會的自行百度。

重點：css

 <style type="text/css";>
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        #header
        {
            width: 100%;
            height: 50px;
        }

我最開始寫代碼的時候沒有寫*這個東西導致我的頁面不是跟屏幕不對齊，加了上面的樣式就好多了，#header這個選擇器，我最開始只知道px這個參數而且也沒寫別的海給了一些沒用的參數，這是修改后的了，還有一點box-sizing：border-box這個元素很重要，因為它可以去掉你瀏覽器的邊框和內邊距的值，所以這個很好用。

        .nav_1
        {
            color: black;  //顏色，黑色
            float: left;   //浮動向右
            width: 500px;  //寬度

        }
        .nav_2
        {
            color: black;
            float: right;
            width: 500px;
            text-align: right;   //重點，就是因為我自己不知道還有這個屬性，所以我的頁面怎么看怎么不是從右往左看的，它是文本的水平對齊的方式的一種
        }

這段代碼主要是對應我的HTML代碼中的導航欄部分，這部分我可是吃了不少虧，我自己怎么設置都是不是不對齊就是歪的或者變成兩行文字，后來師傅幫我改的其實也很簡單上面我會給注釋。

         .container
        {
            width: 100%;
        }
        .input_out{　　　　　　//圖片的尺寸和邊距
            width: 645px;
            height: 50px;
            margin: 0 auto;
            font-size: 0;
        }
        .input_out input{    //input輸入框
            width: 540px;
            height: 50px;
            margin-right: 0;
            margin-left: 0;
            margin-top: 0;
            vertical-align: top; //垂直對齊一個圖片或者一個標簽
        }
        .input_out button{　　//按鈕的設置
            width: 105px;
            height: 50px;
            font-size: 18px;
            background-color: #19b955;
            outline: none;  //輪廓的屬性
            border:none;
            color:white;
        }            

說下整體的思路吧，我在這就沒寫明白，先設置寬度是100%，然后設置圖片的長和寬在設置它的內外邊距的大小和字體的尺寸，設置輸入框的寬高左右外邊距和上邊距，

設置button按鈕的寬高字體的大小，背景的顏色還有它的輪廓是為空的和邊框顏色。

其實這個地方是重點因為對於我個人來說我對於圖片來說是很蒙的。

   .img_out
        {
            width: 250px;
            height: 160px;
            margin:0 auto;
        }

　　　.able_1

 　　　　{

　　　　　　　　margin-top:350px;

　　　　　　　　width: 100%;

　　　　　　　　text-align: center;

　　　　}

　　　.abel_2

　　　　{

　　　　　　　　width: 100%;

　　　　　　　　text-align: center;

　　　　}

 

再補充一兩句，最上面的代碼是圖片的第一行代碼，主要的功能是設置圖片的尺寸和內外邊距。

下面的兩個選擇器的就是對齊上面的元素居中，如果有看不懂得自行百度。