上節(jié)說到，首頁我們可以成功打開了。本節(jié)就說說，如何設(shè)計(jì)主頁吧～
美化設(shè)計(jì)：
關(guān)于設(shè)計(jì)這點(diǎn)，老實(shí)說，我是沒有什么話語權(quán)的，因?yàn)槲易龅臇|西不好看。但是大不了我們可以借鑒啊.....所以我們來介紹幾種設(shè)計(jì)：1.百度風(fēng)格
特點(diǎn)：簡潔明了，加載飛快，搜索功能強(qiáng)大，很容易被同事作為書簽頁收藏甚至做成主頁。
2.風(fēng)格
特點(diǎn)：滿屏的超鏈接，花里胡哨，但是很實(shí)用，全都是常用網(wǎng)址，設(shè)計(jì)公司內(nèi)測試平臺(tái)的話也可以用各種內(nèi)部常用鏈接作為首頁，這樣做更容易讓同事保存成書簽。
3.數(shù)據(jù)總結(jié)顯示：
特點(diǎn)：此類頁面更加直觀的給用戶展示必要數(shù)據(jù)，顯得高大上和正規(guī)。但是要求技術(shù)難度較高，且需要大量的網(wǎng)上去抄第三方控件，首次進(jìn)入加載會(huì)很慢。
4.廣告類頁面
特點(diǎn)：通篇的大屏圖片，動(dòng)畫，感覺高端大氣上檔次。低調(diào)奢華有內(nèi)涵，但是不太適合作為一個(gè)測試平臺(tái)使用
5.主要工具實(shí)用類
特點(diǎn)：就相當(dāng)于 沒有主頁了。用戶進(jìn)來的第一個(gè)頁面 就是一個(gè)最常用的工具頁面，給人感覺是比較務(wù)實(shí)，但是失去了儀式感。
6.文字排版文檔類簡簡單單歡迎語+使用說明+更新說明特點(diǎn)：制作簡單，無任何難度。只要設(shè)計(jì)得體，那么依然漂亮的一批,國外的很多開源網(wǎng)址，下載地址頁面都這樣，低調(diào)，樸素。
本節(jié)我們就介紹第6個(gè)，做一個(gè)簡單的頁面美化
首先，我們設(shè)計(jì)一個(gè)歡迎語打開項(xiàng)目，讓我們新建一個(gè)html頁面，叫做：home.html這里我們要更改一個(gè)概念：.html 我們準(zhǔn)備后續(xù)給它當(dāng)作公共菜單。home.html 作為主頁。所以我們把.html的title改成測試平臺(tái)：
這樣我們后續(xù)進(jìn)入的各種頁面都會(huì)顯示這個(gè)了
好的，讓我們打開新建的home.html開始開發(fā)：
然后在瀏覽器打開看看效果：
接著設(shè)計(jì), 給body增加text-align屬性，值為。這個(gè)意思是讓整個(gè)body內(nèi)的文字元素都居中顯示。
<body style="text-align: center">然后如上圖，我們添加了一個(gè)div塊，用來存放使用說明。并且給它加了一些自己的特定屬性。雖然在body這個(gè)父控件中指定了text-align:。但是如果內(nèi)部子控件單獨(dú)寫了同一個(gè)屬性，那么這個(gè)子控件將不再接受父控件的這個(gè)屬性，而按照自己單獨(dú)寫的。
看看效果：
接下來我們繼續(xù)寫其他的：
其中span 標(biāo)簽是靜態(tài)文案的標(biāo)簽，寫了之后可以肆意的去改變文案的大小字號(hào)，顏色，陰影等各種樣式了。
br標(biāo)簽是回車換行符
a標(biāo)簽是超鏈接
h1 - h5都是常用的標(biāo)題，自動(dòng)加粗加黑加大
看看效果：
接下來讓我們放一個(gè)圖片進(jìn)來裝點(diǎn)一下：圖片的標(biāo)簽是img，你輸入img之后，按下tab鍵，就會(huì)自動(dòng)給你補(bǔ)全：
按tab鍵：
神奇么？src屬性就是你的圖片的具體位置路徑。alt屬性是缺省，就是當(dāng)你的圖片壞了找不到了，就會(huì)顯示alt的屬性內(nèi)容，比如說：抱歉，圖片走丟了 5555
我們的圖片應(yīng)該放在哪呢？當(dāng)然是這個(gè)靜態(tài)資源文件夾了！
然后我們在src屬性中寫路徑，一定要以 /satic/開頭，注意左邊的/
順便在圖片之前加倆個(gè)br
好了現(xiàn)在，我們在瀏覽器打開可以看到：
為啥會(huì)發(fā)生這個(gè)現(xiàn)象呢？
因?yàn)槲覀兊膱D片路徑是以//開頭的寫法。這個(gè)寫法是因?yàn)榉?wù)會(huì)自動(dòng)去中提取所有靜態(tài)資源，但是我們目前是直接在瀏覽器中打開home.html，并沒有走的路線，所以找不到這個(gè)路徑。而如果要在服務(wù)中看到，我們必須要先去寫urls.py的映射，然后寫個(gè)后臺(tái)函數(shù)，后臺(tái)函數(shù)來返回我們的home.html，才可以。
所以現(xiàn)在開始寫url映射吧～
按如圖修改，新寫一個(gè)home/$ 作為url然后我們?nèi)iews.py寫這個(gè)home函數(shù)：
然后確保我們的服務(wù)沒有停止。
現(xiàn)在讓我們打開網(wǎng)址：127.0.0.1:8000/home/ 來看看剛剛開發(fā)的首頁！
可以看到圖片很好的加載了，但是顯得有點(diǎn)大，讓我們給它加一個(gè)width寬度css屬性：
回來瀏覽器可以修改網(wǎng)頁文字的神奇代碼，刷新看看。
現(xiàn)在小多了。但是圖片內(nèi)容可能引起小邪同學(xué)的極度
不適和反感可以修改網(wǎng)頁文字的神奇代碼，所以我們換個(gè)圖。比如我們?nèi)プ鲆粋€(gè)平臺(tái)自己的專屬logo！
百度，在線logo制作，你會(huì)看到很多同類型的網(wǎng)站：讓我們隨便打開一個(gè)免費(fèi)的：
然后按照步驟一步一步設(shè)計(jì)吧。注意，如果網(wǎng)站要求付費(fèi)或者登陸，小伙伴們還是按照要求來，這個(gè)花不了太多錢的，人家開平臺(tái)也是需要成本的哈。
當(dāng)然你也可以自己用ps設(shè)計(jì)
好了本節(jié)就介紹到這里。小伙伴盡量自己憑著自己的美感來設(shè)計(jì)屬于自己特有的主頁。下節(jié)預(yù)告：如何讓各個(gè)頁面都顯示我們的菜單。