用了一個多星期來學習淘寶佈局，2/3的時間花在了自己摸索寫出的淘寶1.0，勉強寫完後用剩下1/3的時間學習並寫了2.0，覺得還是記錄一下學習進度比較好。

一、首先開啟真正的淘寶頁面，它長這樣：

二、我自己寫的1.0，如下，多多少少有點兒醜了

三、這是看了教學視訊之後寫出的淘寶2.0

四、總結

　　寫1.0的時候剛學完基礎HTML和CSS，完全是毫無章法，想到怎麼寫就怎麼寫，最終寫出來的，雖說雛形是有的，但一看就十分不美觀，很多細節的東西都沒有實現，比如說小圖示，右側固定導航欄之類的。在寫完2.0之後我又重新看了原來的程式碼和後來的程式碼，做了反思：

　　1、1.0使用了太多的div，幾乎每個結構都在使用div，巢狀的div太多，顯得整篇程式碼下來十分繁冗。

　　2、1.0中沒有做重置css檔案，其實很多標籤可以一開始就做好初始化，比如說<li></li>標籤，一開始就該統一配置list-style:none;這樣就不用一直反反覆覆寫這個屬性了。

　　3、1.0中一直用position:absolute;來規劃各個模組，導致各個模組非常混亂，各種left:878px;之類的。

　　4、1.0中使用了float:left;後總是忘了清除浮動流，而且只用float:left;，完全忽略了float:right;

　　我也通過2.0學習到許多優秀的方法和習慣：

　　1、css檔案不是必須一個的，可以寫很多個，但是必須要有初始化重置檔案呀，省了好多事

　　2、說到重置檔案，可以寫這個頁面頻繁使用的顏色、居中對齊的屬性、清除浮動等，非常方便！

　　　比如說居中對齊可以寫 .layer{ width:1800px; margin:0 auto;}

　　　清除浮動可以寫 .clearfix::after{ content: ' '; display:block; clear:both; }

　　　然後在需要使用的模組上添上一個class就可以了

　　3、說到清除浮動流，就要注意，一旦子級使用了浮動，一定要在給它的父級清除浮動，上個clearfix的buff

　　4、前面提到我的1.0沒有做小圖示，當時不知道怎麼做，乾脆擱置一邊了，通過學習知道了小圖示是可以用iconfont字型圖示來完成的，使用這種方式，就是把小圖示做成文字的形式，可以調整大小、顏色等等，具有文字屬性噢

　　5、在動手寫某個模組之前要做一個規劃，把結構分好寫好，再慢慢補充細節。

　　6、要寫註釋！！註釋是良好的程式碼習慣！！每個模組之前都要標註到這是什麼，不然修改的時候會找到哭qwq

　　7、每一個主體模組都可以給一個id，在css檔案寫的時候加上對應模組的id，就像是做了標記一樣，好找，而且可以更好地定位到某個結構

　　通過做淘寶靜態頁面我也學習到了很多新知識：

　　1、樣式重置和模組化、上面提了。

　　2、line-height不同值的區別

　　　　我們常見line-height的值的形式有：px、數字(如1.5)、%、em、normal。

　　　　一般來數，設定行高的值為純數字是最推薦的方式，因為其會隨著對應的 font-size 而縮放。

　　3、CSS@規則

　　　　@charset 設定樣式表的編碼

　　　　@import 匯入其他樣式檔案，比如說@import 'reset.css';

　　　　@media　媒體查詢

　　　　@font-face　自定義字型

　　4、favicon

　　　　favicon就是title前面的小圖示，url圖示/網頁圖示，一般都是.ico字尾的檔案。使用格式為：<link rel="icon" href="/url地址" >

　　　　記得ico檔案要放在根目錄噢。

　　5、base標籤

　　　　<base>標籤用於定義一個文件當中所有相對url的根目錄(其實就是基礎根地址)，還可以設定網頁在新標籤開啟target=_"_blank"。記住一個頁面只能有一個base標籤。

　　6、自定義圖示

　　　　就是前面提過的@font-face，

　　7、H標籤的應用場景

　　　　很多時候爬蟲軟體就是通過爬取H標籤來提取關鍵資訊，所以在我們具有識別資訊的地方最好都套上一個H標籤，如淘寶網上的淘寶Logo，套上一個h1標籤，而二級標題，比如說主題市場，可以用h2標籤，某個小模組的標題可以用h3標籤，小模組的內容可以用h4標籤。h5和h6標籤極少使用。

　　8、以圖換字

　　　第一種，設定首行縮排大於等於容器寬度，這樣可以把淘寶網三個字擠出容器，然後用white-space:nowrap;強制不能換行，這樣淘寶網三個字就都在一行上而且都在容器外面了，接著再用overflow:hidden;將容器外面的幾個字隱藏。

　　　{background: url(xxxxxxxxxxxxxxx) no-repeat;

　　　 text-indent:-9999px;

　　　 white-space:nowrap;

　　　 overflow:hidden;　　　

　　　 }

　　　第二種，利用padding能放置背景圖片且不能放置內容的特點，用padding支撐起容器的高度，這個時候其實淘寶網三個字已經在容器外面了，然後圖片覆蓋padding，接著用overfloat:hidden;隱藏淘寶網這幾個字，實現同樣的內容。

　　　{height:0px;

　　　background:url(xxxxxxx) no-repeat;

　　　padding-top:60px;

　　　overflow:hidden;

　　　}

　　9、怪異盒模型(IE盒模型)

　　10、CSS3（圓角、漸變、過渡）

　　　　圓角：border-radius：20px;可以設定各個角的弧度

　　　　漸變：淘寶2.0用了線性漸變，即background-image:linear-gradient(to right,#ff9000,#ff5000); 從左到右

　　　　　　　　　　　　　　　　　　 background-image:linear-gradient(135dge,#ff9000,#ff5000); 從左上到右下，135°到315°，也可以寫作to bottom right。

　　11、IE濾鏡

　　　　CSS3很多功能非常強大，但是IE卻不相容，這時候可以使用相應的IE濾鏡來實現相容。

　　12、CSS HACK（另外總結）

　　13、圖片垂直居中對齊（另外總結）

　　14、CSS Sprites

　　　　又稱雪碧圖、精靈圖，我理解為將多個向量小圖示放在一張圖裡，通過調整xy值來定位某個小圖示。雪碧圖的好處就是減少圖片請求的次數，避免造成資源浪費、訪問速度降低的問題。

　　15、圖片格式webp

　　　　這是谷歌瀏覽器在14年推出的一種圖片格式，優點是同樣的圖片，webp的大小比別的格式小十倍甚至數十倍，還不影響清晰度。

　　16、詞換行

　　　　參考淘寶右側固定導航欄裡的每個單元格，比如說“品質推薦”需要將這個詞分成上下兩行，可以<ahref="#"class="c4active">品質好貨</a>中間用一個空格間隔開，再在css檔案中使用word-break:keep all;換行即可。