前面，學(xué)習(xí)了如何從零開(kāi)始編寫(xiě)一個(gè)網(wǎng)站的程序空凸，并部署在本地Web服務(wù)器，然后部署到云服務(wù)器上寸痢，通過(guò)域名進(jìn)行訪問(wèn)劫恒。
基本上整個(gè)網(wǎng)站開(kāi)發(fā)的基本入門(mén)知識(shí)介紹的差不多了。
這節(jié)課來(lái)講講如何去模仿開(kāi)發(fā)實(shí)現(xiàn)一個(gè)網(wǎng)站轿腺，這樣今后大家就可以做出各種各樣的網(wǎng)站了。
網(wǎng)頁(yè)分析
首先來(lái)看一下學(xué)哥打算模仿開(kāi)發(fā)的網(wǎng)站www.reibang.com丛楚。
打開(kāi)瀏覽器訪問(wèn)這個(gè)網(wǎng)站族壳，樣子是這樣的：
為了簡(jiǎn)化起見(jiàn)，學(xué)哥只打算模仿開(kāi)發(fā)首頁(yè)趣些，至于點(diǎn)擊某篇文章或者其他鏈接進(jìn)入的詳細(xì)頁(yè)面仿荆，模仿開(kāi)發(fā)的原理都是一樣的。
模仿一個(gè)網(wǎng)頁(yè)的主要流程是這樣的：
先分析一下網(wǎng)頁(yè)的主要結(jié)構(gòu)和元素坏平，然后整理出一個(gè)大概的排版編程設(shè)計(jì)拢操，然后通過(guò)Chrome瀏覽器的調(diào)試工具下載相關(guān)的圖片資源和CSS資源，然后通過(guò)分析獲取所需的元素舶替，然后開(kāi)始編寫(xiě)網(wǎng)頁(yè)文件令境，按照效果模仿實(shí)現(xiàn)。
這個(gè)網(wǎng)頁(yè)分析一下顾瞪，最上面是一個(gè)菜單欄舔庶，里面是各種圖標(biāo)按鈕抛蚁，然后是一個(gè)大的圖片，下面是分為左右2欄惕橙，左邊的上面是一個(gè)圖標(biāo)按鈕瞧甩，左邊的下面是一個(gè)一個(gè)文章標(biāo)題和內(nèi)容，右邊的上面是五個(gè)圖標(biāo)按鈕弥鹦，右邊的下面是推薦作者列表肚逸。
計(jì)劃用一個(gè)table來(lái)進(jìn)行排版，總共3行2列彬坏，第1行合并2列朦促，第2行合并2列，第3行2個(gè)td苍鲜。
第1行的td里面放一個(gè)table思灰，只有1行，很多列混滔，每個(gè)按鈕占一個(gè)td洒疚。
第2行的td里面放一個(gè)圖片，實(shí)際網(wǎng)站是多個(gè)圖片切換的坯屿，由于還未學(xué)習(xí)javascript修改網(wǎng)頁(yè)動(dòng)態(tài)顯示的技術(shù)油湖，因此這里簡(jiǎn)化起見(jiàn)，就放一個(gè)大圖片就好领跛。
第3行的第1個(gè)td和第2個(gè)td乏德，從上到下都用div來(lái)實(shí)現(xiàn)。
使用Chrome瀏覽器的調(diào)試工具
網(wǎng)頁(yè)當(dāng)中的圖片吠昭，需要實(shí)現(xiàn)下載下來(lái)備用喊括。同時(shí)網(wǎng)頁(yè)中用到的一些CSS樣式，也需要復(fù)制下來(lái)使用矢棚。這樣能盡量保持顯示效果相似郑什。
下載的方法有幾種，最簡(jiǎn)單的就是在瀏覽器中鼠標(biāo)光標(biāo)移動(dòng)到圖片上蒲肋，右鍵單擊蘑拯，然后選擇菜單【圖片存儲(chǔ)為...】，然后保存到本地計(jì)算機(jī)的某個(gè)目錄下兜粘。
這種方式在某些情況下不太好使申窘，比如某些圖片資源是通過(guò)CSS樣式來(lái)定義的時(shí)候，就無(wú)法下載了孔轴。比如剃法，鼠標(biāo)光標(biāo)移動(dòng)最上面一排按鈕的右側(cè)的【注冊(cè)】按鈕上，右鍵單擊路鹰，發(fā)現(xiàn)并沒(méi)有出現(xiàn)菜單【圖片存儲(chǔ)為...】玄窝。
這時(shí)候牵寺，就可以使用另外一種方法，就是使用Chrome瀏覽器的調(diào)試工具恩脂。
打開(kāi)調(diào)試工具的方法是帽氓，鼠標(biāo)光標(biāo)移動(dòng)到希望查看分析的網(wǎng)頁(yè)元素上，右鍵單擊俩块，然后選擇菜單【檢查】黎休，瀏覽器就出現(xiàn)了調(diào)試工具如下。例如玉凯，鼠標(biāo)光標(biāo)移動(dòng)最上面一排按鈕的右側(cè)的【注冊(cè)】按鈕上势腮，右鍵單擊，然后選擇菜單【檢查】漫仆，看到網(wǎng)頁(yè)效果如下：
點(diǎn)擊調(diào)試工具最上面一排按鈕的最右側(cè)倒數(shù)第2個(gè)按鈕捎拯，就是豎著的3個(gè)點(diǎn)的按鈕，會(huì)浮出一個(gè)菜單盲厌，里面的第一排是Dock side署照，這個(gè)是用來(lái)設(shè)置調(diào)試工具位于瀏覽器的哪個(gè)位置的，可以看到默認(rèn)是位于瀏覽器右側(cè)的吗浩，這樣會(huì)讓真正的網(wǎng)頁(yè)的寬度很窄建芙，看起來(lái)不方便。
Dock side的3個(gè)按鈕分別可以設(shè)置成：彈出一個(gè)新窗口懂扼，窗口內(nèi)靠下禁荸，窗口內(nèi)靠右。
來(lái)點(diǎn)擊當(dāng)中的按鈕阀湿，將調(diào)試工具設(shè)置為窗口內(nèi)靠下赶熟。設(shè)置后的效果如下：
可以看到調(diào)試工具分為上下2行，下面一行是Console陷嘴，就是瀏覽器的控制臺(tái)钧大，主要用來(lái)顯示網(wǎng)頁(yè)的調(diào)試信息，目前暫時(shí)不用關(guān)心罩旋，等到后面第3章講到JavaScript的時(shí)候會(huì)用到。上面一行又分為左右2欄眶诈，左邊顯示的是html代碼的內(nèi)容涨醋，右側(cè)顯示的是CSS樣式的內(nèi)容。
此時(shí)逝撬，如果在瀏覽器的顯示內(nèi)容里面浴骂，重新選擇一個(gè)目標(biāo)元素，鼠標(biāo)右鍵點(diǎn)擊【檢查】菜單宪潮，會(huì)發(fā)現(xiàn)溯警，調(diào)試工具里面的焦點(diǎn)也會(huì)跟隨切換到對(duì)應(yīng)的網(wǎng)頁(yè)元素的html代碼和CSS樣式趣苏。例如，找到網(wǎng)頁(yè)元素【新上榜】上鼠標(biāo)右鍵點(diǎn)擊【檢查】菜單梯轻，調(diào)試工具里面焦點(diǎn)切換如下：
這樣就能很方便的分析每一個(gè)網(wǎng)頁(yè)元素食磕，看到實(shí)際實(shí)現(xiàn)的html代碼以及對(duì)應(yīng)的CSS樣式，有利于更方便的模仿實(shí)現(xiàn)喳挑。
網(wǎng)頁(yè)元素分析
挨個(gè)分析網(wǎng)頁(yè)上的元素彬伦，能下載的圖片文件都下載下來(lái)，放到images目錄下伊诵，如果有特殊的文字按鈕或顯示文字樣式单绑，復(fù)制對(duì)應(yīng)的CSS樣式到一個(gè)臨時(shí)文件中。
例如曹宴，第一個(gè)圖標(biāo)【簡(jiǎn)書(shū)】按鈕搂橙，調(diào)試工具里面顯示是這樣的：
找到img標(biāo)簽的src屬性，這就是圖片文件的網(wǎng)絡(luò)地址笛坦，將這個(gè)地址復(fù)制出來(lái)区转，鼠標(biāo)右鍵單擊這個(gè)鏈接地址，彈出調(diào)試工具的菜單：
選擇菜單項(xiàng)【Edit Attribute】弯屈，這時(shí)候蜗帜，焦點(diǎn)會(huì)進(jìn)入src的屬性值里面，也就是鏈接地址文本會(huì)被選中：
鼠標(biāo)光標(biāo)移動(dòng)到這段文本上面资厉，右鍵單擊厅缺，出現(xiàn)對(duì)這段文本的可以操作菜單，選擇菜單項(xiàng)【復(fù)制】宴偿，這段鏈接文本就會(huì)被復(fù)制到系統(tǒng)剪貼板中了湘捎。
然后打開(kāi)一個(gè)新的瀏覽器Tab窗口，將地址復(fù)制到網(wǎng)址輸入框窄刘，然后回車(chē)窥妇，訪問(wèn)這個(gè)圖片：
鼠標(biāo)光標(biāo)移動(dòng)到圖片上，右鍵單擊娩践，出現(xiàn)菜單：
選擇菜單項(xiàng)【圖片存儲(chǔ)為...】活翩，彈出文件保存界面：
選擇要保存到的目錄，然后修改文件名翻伺，然后點(diǎn)擊【保存】按鈕材泄，完成保存這個(gè)圖片的操作。
接下來(lái)吨岭，開(kāi)始分析第2個(gè)圖標(biāo)元素拉宗，指南針圖標(biāo)元素。鼠標(biāo)移動(dòng)到圖標(biāo)上，右鍵菜單【檢查】旦事，調(diào)試工具顯示如下：
可以看到這個(gè)圖標(biāo)是一個(gè)i標(biāo)簽魁巩，i標(biāo)簽是什么標(biāo)簽?zāi)兀ゲ橐幌耯tml手冊(cè)吧姐浮，它是一個(gè)表示斜體文本的標(biāo)簽谷遂，也就是說(shuō)這個(gè)一個(gè)文本了，那么為何顯示是一個(gè)圖標(biāo)呢单料。繼續(xù)查看埋凯，關(guān)鍵在于這3個(gè)css屬性：iconfont ic-navigation-download menu-icon
可以在右側(cè)的樣式窗口的搜索框Filter里面輸入css的樣式名字來(lái)檢索看它具體的值，輸入iconfont：
看到了它的一些屬性值了扫尖，例如font-family白对，font-size，font-style换怖，font-weight甩恼，-webkit-font-smoothing等等。
其中font-size是顯示的刪除線沉颂，這表示這個(gè)屬性值對(duì)于當(dāng)前這個(gè)標(biāo)簽元素是無(wú)效的条摸，可能是受父元素或者子元素的影響。
如果有碰到之前沒(méi)有學(xué)習(xí)過(guò)的屬性和屬性值铸屉，可以通過(guò)查看CSS手冊(cè)或者去網(wǎng)上搜索獲得相關(guān)知識(shí)钉蒲。
這些屬性值，是可以通過(guò)臨時(shí)編輯來(lái)體現(xiàn)對(duì)網(wǎng)頁(yè)的不同的影響彻坛。
鼠標(biāo)光標(biāo)移動(dòng)到屬性font-style上面顷啼，可以看到，每個(gè)屬性前面都出現(xiàn)了一個(gè)藍(lán)色的勾選按鈕：
這里可以把藍(lán)色的勾選去掉昌屉，這樣屬性值就顯示成刪除線了钙蒙，就是屬性不起作用，同時(shí)可以看到體現(xiàn)在網(wǎng)頁(yè)元素的顯示效果上间驮。
例如躬厌，將font-style的勾選去掉，就能看到對(duì)應(yīng)的指南針圖標(biāo)編程斜體了：
還可以竞帽，直接修改屬性的值扛施，例如鼠標(biāo)點(diǎn)擊font-style的值normal，可以看到此處變成了一個(gè)輸入框：
可以直接進(jìn)行編輯了屹篓，編輯完成之后回車(chē)鍵疙渣，就能看到新的值對(duì)網(wǎng)頁(yè)的影響了。如果要改回去抱虐，一種辦法是再次編輯值，還可以點(diǎn)擊瀏覽器的刷新按鈕饥脑，重新加載頁(yè)面恳邀，并重新查看這個(gè)元素來(lái)調(diào)試懦冰。
這里可以判斷出，這些屬性都不像是能顯示指南針圖標(biāo)的屬性谣沸，因此繼續(xù)分析另外一個(gè)屬性 menu-icon：
也可以判斷出刷钢，menu-icon也不是顯示指南針圖標(biāo)的屬性，因此繼續(xù)分析最后一個(gè)屬性 ic-navigation-download：
可以看到乳附，搜索的時(shí)候關(guān)鍵字可以模糊搜索内地，不需要全部輸入完整。
可以判斷出赋除，這里的content: "\E69A"; 屬性值就是顯示指南針圖標(biāo)的關(guān)鍵屬性值阱缓。
content屬性是CSS3規(guī)范新增的一個(gè)樣式，用來(lái)顯示一些特殊字符举农。這里的"\E69A"就是顯示一個(gè)指南針的字符荆针。
繼續(xù)分析下一個(gè)元素，發(fā)現(xiàn)下載圖標(biāo)也是用content:"\E69D"; 來(lái)顯示的特殊字符颁糟。
碰到這樣的用CSS屬性來(lái)顯示元素的航背，就將這些值記錄到一個(gè)臨時(shí)文件中保存起來(lái)，后面編程的時(shí)候會(huì)用到棱貌。
繼續(xù)分析下一個(gè)元素玖媚，搜索框，查看對(duì)應(yīng)的CSS樣式：
發(fā)現(xiàn)關(guān)鍵是用border-radius:40px;來(lái)實(shí)現(xiàn)圓角的背景色婚脱。
發(fā)現(xiàn)搜索圖標(biāo)也是用content:"\E618";屬性來(lái)實(shí)現(xiàn)的今魔。
同樣的，Aa圖標(biāo)也是content:"\E6B5";屬性實(shí)現(xiàn)的起惕。
登錄按鈕主要使用log-in樣式涡贱，而注冊(cè)按鈕主要使用sign-up樣式。
寫(xiě)文章按鈕主要使用write-btn樣式惹想，里面的羽毛筆使用content:"\E60E";屬性來(lái)實(shí)現(xiàn)的问词。
接下來(lái)，將當(dāng)中的圖片用截屏工具截取出來(lái)嘀粱，保存為head.jpg文件激挪。
接下來(lái)，分析大圖片下面的左邊的一堆圖文標(biāo)簽按鈕锋叨。
主要是樣式collection和name垄分，然后把文字前面的小圖標(biāo)下載下來(lái)。
接下來(lái)分析【新上榜】這個(gè)圖文按鈕娃磺。
可以分析出來(lái)薄湿，這就是一個(gè)圖片外面套了一個(gè)a標(biāo)簽。
然后來(lái)分析第一篇文章標(biāo)題鏈接部分。
可以看到并沒(méi)有太多特殊的技術(shù)實(shí)現(xiàn)豺瘤，都是之前學(xué)習(xí)過(guò)的吆倦。
后面的分析就省略了，把這些樣式的名字和值保存在臨時(shí)文件里面坐求。
文件定義和主體框架和排版
接下來(lái)蚕泽，開(kāi)始編寫(xiě)代碼模仿實(shí)現(xiàn)了。
創(chuàng)建一個(gè)jianshu.html文件和一個(gè)jianshu.css文件桥嗤。
然后開(kāi)始編寫(xiě)主體框架须妻。
jianshu.html代碼如下：
jianshu.css代碼如下：
刷新頁(yè)面看看：
接下來(lái)用table實(shí)現(xiàn)排版并將主要的元素加上去。
jianshu.html代碼如下：
jianshu.css代碼如下：
刷新頁(yè)面看看：
可以看到基本的框架已經(jīng)出現(xiàn)了泛领，接下來(lái)就是逐個(gè)元素修改樣式添加上去荒吏。
下節(jié)課將實(shí)現(xiàn)詳細(xì)的每個(gè)顯示項(xiàng)目和樣式。
