CSS三角形之美
div{
width: 0;
height: 0;
line-height:0;
font-size: 0;
border-top: 10px solid red;
border-right:10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
一張圖，你就知道css三角是怎麼來的來的了，
做法如下：
1. 我們用css邊框可以模擬三角形效果
2. 寬度高度爲0
3. 我們4個邊框都要寫，只保留需要的邊框顏色，其餘的不能省略，都改爲transparent透明就好了
4. 爲了照顧兼容性，加上font-size：0； line-height：0；
命令示例圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid green;
border-bottom: 200px solid blue;
border-left: 200px solid yellow;
}
p{
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
網頁顯示圖：
品優購項目
一、品優購項目介紹
項目名稱： 品優購 。
項目描述：品優購是一個電商網站，我們要完成首頁、列表頁、詳情頁、註冊頁面的製作。
二、項目背景
現階段電商類網站很流行，很多同學畢業之後進入電商類企業工作，同時電商類網站需要的技術也是較爲複雜的
1. 複習、總結、提高前面所學佈局技術。
三、設計目標
保證瀏覽器ie7及以上，火狐、360、Safari、Chrome等。誰讓我再測ie6，就跟誰急。
熟悉css+div佈局，頁面的搭建工作
瞭解常用電商類網站的佈局模式
爲後期品優購移動端做鋪墊。
四、幾點思考
1. 開發工具 sublime、photoshop（fw）、主流瀏覽器（以Chrome瀏覽器爲主）
2. 技術棧
HTML 結構 + css 佈局 （因爲我們就會這些。。。嘻嘻）
五、代碼規範
請參照品優購代碼規範
六、前期準備工作
要實現結構和樣式相分離的設計思想。
目錄文件夾：
| 名稱 | 說明 |
| 項目文件夾 | pinyougou |
| 樣式類圖片文件夾 | img |
| 樣式文件夾 | css |
| 產品類圖片文件夾 | upload |
| 字體類文件夾 | fonts |
| 腳本文件夾 | js |
樣式文件的分類
1. 初始化css（css reset） 讓瀏覽器風格統一，把常用的初始化語句放入base.css裏面。
2. 我們把一些公開的樣式放入common.css裏面。
七、 網站ico圖標
1. 使用ico圖標
1.首先吧favicon.ico這個圖標放到根目錄下。
- 在HTML裏面，head之間引入代碼。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
2. 製作ico圖標
我們可以自己做的圖片，轉換爲ico圖標，以便放到我們站點裏面，
方法步驟：
1. 首先把我們想要的切成圖片。
2. 要把圖片轉換爲ico圖標，我們藉助與第三方轉換網站： http://www.bitbug.net/。比特蟲
總結：
代碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-ico"/>
注意：
1. 它是顯示在瀏覽器中的網頁圖標。
2. 它是圖標形式，不是一個圖片。
3. 位置是放到head標籤中間。
4. 後面的type="image/x-icon"屬性可以省略。（我相信你也願意省略）
5. 爲了兼容性，請將favicon.ico這個圖標放到根目錄下。（我們就不要任性了，聽話放位置，省很多麻煩。
你好，我也好。）
八、 網站優化三大標籤
SEO是由英文Seach Engine optimalzation縮寫而來，中文意譯爲“搜索引擎優化”！
常見的搜索引擎，比如百度，谷歌，雅虎，搜狗等等....
SEO是指通過對網站進行站內優化、網站結構調整、網站內容建設、網站代碼優化等和站外優化，從而提高網站的關鍵詞
排名以及公司產品的曝光度。簡單地說就是，把產品做好，搜索引擎就會介紹客戶來。
我們現在階段主要進行站內優化，網站優化，我們應該要懂。。
1. 網頁title標題
title具有不可替代性，是我們的內頁第一個最重要標籤，是搜索引擎瞭解網頁的入口，
和對網頁主題歸屬的最佳判斷點。
建議：
首頁標題： 網站名（產品名） -網站的介紹
例如：
品優購-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！
2. description 網站說明
對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量採用網頁的MATA標籤中描述部分作爲
搜索結果的“內容摘要”。就是簡要說明我們網站主要做什麼的。
我們提倡，description作爲網站的總體業務和主題概括，多采用“我們是...”“我們提供...”“xxx網作爲...”
“電話：010...”之類語句。
品優購網：
<meta name="description" content="品優購JD.COM- 專業的綜合網上購物商城，銷售家，數碼通訊
，電腦，家居百貨，服裝服飾，母嬰，圖書，食品等數萬個品牌優質商品，便捷、誠信的服務，爲您提供愉悅的網上購物體驗！"/>
注意點：
1. 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣，吸引用戶
點擊。
2. 同樣遵循簡短原則，字符數含空格在內不要超過120個漢字。
3. 補充在title-keywords 中未能充分表述的說明。
4. 用英文逗號 關鍵詞1，關鍵詞2
3. keywords 關鍵字
keywords是頁面關鍵詞，是搜索引擎關注點之一。keywords應該限制在6~8個關鍵詞左右，電商類網站
可以多少許。
品優購網：
<meta name="keywords" content-"網上購物，網上商店。手機，筆記本，電腦，
MP3,CD,VCD,DV,/相機，數碼，配件，手錶，存儲卡。品優購 ">
小米網：
<meta name="keywords" content="小米，小米6，紅米note4，紅米MIX，小米商城" />
4. 總結：
1. 我們的網頁要做的優秀，符合搜索引擎的要求，纔可以讓搜索引擎優先顯示我們的網頁。
所以我們的網站要做很多的優化，其中就有這三大標籤。
2. 一邊情況下，三大標籤裏面的優化詞，都是專門的優化人員寫的，我們大概瞭解一下規範就可以了。
3. 我們的主要任務是，能夠這三大標籤，然後把優化人員給我們的內容，添加到裏面。