HTML5快速入門（三）_ZenDei技術網路在線

前言： 1.HTML5的發展非常迅速，可以說已經是前端開發人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理，儘量將開發中不常用到的剔除，將經常使用的拿出來，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤，歡迎聯繫我 2.更新時間沒有規律，一般會在3天左右更新一 ...

前言：

1.HTML5的發展非常迅速，可以說已經是前端開發人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理，儘量將開發中不常用到的剔除，將經常使用的拿出來，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤，歡迎聯繫我
2.更新時間沒有規律，一般會在3天左右更新一篇（全系列預計會有12篇）因為需要工作，所以只能在閑暇之餘整理，如果有喜歡的朋友可以關註我，將會第一時間獲得更新信息
3.如果有需要Reactive Native + H5跨平臺開發的朋友，可以聯繫我，在本系列結束之前會根據需求的程度決定是否繼續
4.全系列文章最後儘可能地附上綜合實例，幫助朋友更好地理解
5.此系列會涉及到HTML、CSS、JavaScript等

另：有很多朋友私聊我說圖片不能正常顯示的問題，測試後發現簡書上可以在windows和mac端完美顯示，如果看不到圖片麻煩移步簡書鏈接

準備工作

工欲善其事，必先利其器，首先我們需要安裝WebStorm這款超超超好用的工具，工具已經幫各位上傳到網盤了，畫重金搞到的mac最新版呦！windows端的小伙伴麻煩自行百度吧，畢竟資源多webStorm下載地址（已包含安裝方法和漢化等方法） —— 密碼：awh2
安裝完畢後先來簡單部署一下項目文件結構：這邊就先創建一個imgs文件夾和一個css文件夾就好了

部署工程結構.gif

接下來創建根網頁文件（index.html）

創建根網頁文件.gif

再創建一個css文件(index.css)

創建css文件.gif

為了演示展示本地圖片，我們就將用到的圖片以本地的形式保存下來放在imgs內
- 註：圖片怎麼放進來？只要點擊需要放進工程的圖片 —— 複製圖片 —— 然後選擇imgs文件夾 —— 粘貼 —— OK
到這裡，準備工作就完畢了

本地圖片導入.gif

分析頁面

先來看一下我們的目標網頁easyicon開發中圖標素材搜索神器

網頁結構分析.png

從圖中可以看出，網頁可以分成上、中、下3部分
- 上部：左邊一張圖片，右邊一個登錄按鈕
- 中部：上邊一張圖片，下麵一個搜索框，搜索框右邊一個搜索按鈕，再下麵有個語音選擇按鈕
- 尾部：左邊一組，右邊一組

大概的結構就是上面描述的那樣，我們可以把網頁的搭建看成是房屋的建設，那麼我們需要怎麼來做呢？首先我們要分析每個結構用什麼標簽來做：

上部：我們用div標簽包裹住圖片和按鈕，在分別用div包裝圖片和按鈕

<body>
    <!--頭部-->
    <div  class="header">
        <!--左邊圖片-->
        <div class="header-lefticon">
            <a href="http://www.easyicon.net/" target="_blank">
                <img src="imgs/Snip20160615_2.png" alt="easyicon圖片">
        </a>
        </div>
        <!--右邊登錄-->
        <div class="header-rightlogin">
            <a href="http://www.easyicon.net/vip/?ref=/" target="_blank">登錄</a>
        </div>
    </div>
</body>

中部：我們用div標簽包裹整個中部內容，再用div分別包裹住圖片，搜索框和搜索按鈕

<body>
    <!--內容-->
    <div class="content">
        <!--logo-->
        <div class="content-logo">
            <a href="http://www.easyicon.net/update/" target="_blank">
                <img src="imgs/logo.png" alt="logo圖片">
            </a>
        </div>
        <!--搜索框和搜索按鈕-->
        <div class="content-search">
            <!--搜索框-->
            <input>
            <!--搜索按鈕-->
            <a href="#" target="_blank">搜索圖標</a>
        </div>
        <!--語言按鈕-->
        <div class="content-language">
            <a href="#" target="_blank">中文簡體</a>
        </div>
    </div>
</body>

尾部：我們用div標簽包裹整個尾部內容，再用div分別包裹左邊內容和右邊內容

<body>
    <!--尾部-->
    <div class="footer">
        <!--左邊內容-->
        <div class="footer-left">
            <a href="http://www.easyicon.net/update/" target="_blank">圖標更新</a>
            <a href="http://www.easyicon.net/covert/" target="_blank">圖標轉換</a>
            <a href="http://www.easyicon.net/vip/upload.php" target="_blank">上傳圖標</a>
        </div>
        <!--右邊內容-->
        <div class="footer-right">
            滬ICP備05015552號
            <a href="http://www.easyicon.net/thank.php" target="_blank">特別鳴謝</a>
            <a href="http://www.easylogo.cn/" target="_blank">EASYLOGO</a>
            <a href="http://www.uimaker.com/" target="_blank">ui製造者</a>
        </div>
    </div>
</body>

好了，房子的結構搭建好了，效果是這樣的，當然和成品差好多~不過很正常嘛，我們還沒裝修房子是吧，那麼接下來就是使用css來裝修房子的時候了

網頁最初結構.png

上面我們已經根據不同的標簽和功能預先設置了類標簽名稱，接下來就根據目標網頁的樣子來定製我們的css
首先，網頁會有預設邊距，我們需要先將其歸置為0，方便我們後面的計算和調試，設置的方式很多，一般偷懶的我喜歡使用通配符 ‘*’ 來直接設置，而像百度等大公司則是將可能使用到的標簽全部取出設置（如下圖），這麼做的原因可能是考慮到性能問題吧，因為通配符是設置所有的標簽，從理論上來說性能應該是最差的，這邊就先不糾結了
```
*{
    margin:0;
    padding: 0;
}

/*設置整體的a標簽樣式*/
a{
    /*設置文字顏色*/
    color: black;
    /*去除下劃線*/
    text-decoration: none;
    /*字體顏色*/
    color: grey;
}
```
- 這邊我們使用的是外部樣式的css，所以先來引入外部css文件
```

<link rel="stylesheet" href="css/index.css">
```
效果：

初始結構效果圖.png

先來設置頭部的樣式

.header{
    /*設置頂部背景顏色,方便調試*/
    /*background-color: yellow;*/
    /*設置高度*/
    height: 60px;
    /*設置間距*/
    margin: 20px 120px 0 120px;
}

.header-lefticon{
    /*垂直居中*/
    line-height: 60px;
    /*靠左懸浮*/
    float: left;
}

.header-rightlogin{
    /*垂直居中*/
    line-height: 60px;
    /*靠右懸浮*/
    float: right;
}

.header-rightlogin a{
    /*設置邊框*/
    border: 1px solid black;
    /*設置內邊距*/
    padding: 5px 10px;
    /*設置右間距*/
    margin-right: 20px;
    /*字體顏色*/
    color: black;
}

效果：

頭部效果圖.png

接下來是內容的樣式

.content{
    /*設置頂部背景顏色,方便調試*/
    /*background-color: green;*/
    /*設置內容水平居中*/
    text-align: center;
    /*高*/
    /*height: 600px;*/
    position: absolute;
    left: 0px;
    bottom: 60px;

    display: inline-block;
    width: 100%;
}

.content-logo{
    /*設置頂部背景顏色,方便調試*/
    /*background-color: red;*/
    /*水平居中*/
    margin: 0 auto;
    /*設置內容水平居中*/
    text-align: center;
    width: 200px;
margin-top: 100px;
}

.content-search{
    /*設置頂部背景顏色,方便調試*/
    /*background-color: rebeccapurple;*/
    /*高度*/
    height: 40px;
    /*設置寬度*/
    width: 600px;
    /*使文字居中*/
    text-align: center;
    margin: 0 auto;

}

.content-search input{
    /*寬度*/
    width: 500px;
    /*高度*/
    height: 40px;
    /*邊框*/
    border: 3px solid greenyellow;
    box-sizing: border-box;
}

.content-search a{
    background-color: greenyellow;
    /*設置文字顏色*/
    color: white;
    /*改變標簽類型*/
    display: inline-block;
    /*設置高度和寬度*/
    height:100%;
    width: 100px;
    /*浮動在右邊*/
    float: right;
    /*垂直居中*/
    line-height: 40px;
}

.content-language{
    margin-top: 200px;
}

.content-language a{
    border: 1px solid black;
    /*字體顏色*/
    color: black;
}

效果：

內容效果圖.png

再來就是尾部的樣式了

.footer{
    /*background-color: rebeccapurple;*/
    position: absolute;
    left: 20px;
    bottom: 0px;
    right: 20px;
    height: 60px;
}

.footer-left{
    /*懸浮左邊*/
    float: left;

    line-height: 60px;
    margin: 0 auto;
    /*字體大小*/
    font-size: 15px;
}

.footer-right{
    /*懸浮右邊*/
    float: right;

    line-height: 60px;
    margin: 0 auto;

    /*字體大小*/
    font-size: 15px;
    /*字體顏色*/
    color: grey;
}

效果：

尾部效果圖.png