會建網站的同學應該都知道，寫網站模板的時候必須要懂得DIV+CSS，如果你不懂怎么寫，那么這個網頁你是極有可能寫不出來的。沒有建站技能是不是也想寫出漂亮的網頁呢？小編也表示無能為力，畢竟這個東西還要系統的學，如果你想簡單的搞定幾個頁面的話，小編給你漏幾手瞧瞧。

讓我們假設(she)你已經(jing)完成了你想發(fa)布的內容，同(tong)時(shi)已經(jing)創建了一(yi)個空(kong)的style.css文件，什(shen)么是你可以(yi)寫的第一(yi)條規則?

居中

長文(wen)本很難解(jie)析，也因此(ci)不易閱讀。每(mei)行設(she)置字符限制，可以(yi)大(da)大(da)提高大(da)量文(wen)本的可讀性和(he)吸引(yin)力。

	body {
	 margin: 0 auto;
	 max-width: 50em;
	}

在為文本(ben)容器(qi)添(tian)加了樣(yang)式后，為文本(ben)本(ben)身添(tian)加樣(yang)式可好?

字體

瀏覽(lan)器的默認(ren)字體為Times，可看(kan)起來缺乏吸引力(主(zhu)要是因為它(ta)是“無樣(yang)式(shi)”字體)。切換到一個(ge)無襯線字體，如Helvetica或Arial可以大大提高你網(wang)頁的可讀性。

	body {
	 font-family: "Helvetica", "Arial", sans-serif;
	}

如果你堅持要用襯線體，可(ke)以試(shi)試(shi)Georgia。

當我們(men)讓文本(ben)更(geng)(geng)具(ju)吸引力時，也(ye)需要讓它更(geng)(geng)具(ju)可讀性。

間隔

當用戶(hu)覺得一個頁面崩(beng)壞的(de)時候(hou)，通常(chang)來說都是間距問題。通過在文(wen)本周圍和(he)文(wen)本內設置適當的(de)間距就可以增加頁面的(de)吸引力(li)。

	body {
	 line-height: 1.5;
	 padding: 4em 1em;
	}

	h2 {
	 margin-top: 1em;
	 padding-top: 1em;
	}

雖然到目前為(wei)止(zhi)布局已(yi)經大大改善(shan)，但(dan)讓(rang)我(wo)們(men)添(tian)加更多(duo)細節處理。

顏色和對比度

白色(se)背景上的黑色(se)文(wen)字看起(qi)來會比較(jiao)扎眼(yan)。為文(wen)本選(xuan)擇一(yi)款較(jiao)軟一(yi)點的黑色(se)，讓頁面閱讀起(qi)來更舒(shu)服(fu)。

	body {
	 color: #555;
	}

為了保持一個(ge)良好的對比(bi)度(du)，讓(rang)我們為重(zhong)要文本選擇一個(ge)更黑(hei)暗(an)的陰影。

	h1,
	h2,
	strong {
	 color: #333;
	}

雖然大部分(fen)頁面(mian)在(zai)視覺上已經有所提(ti)升，但(dan)是一些(xie)元素依(yi)然顯(xian)得格(ge)格(ge)不入，如代碼段。

平衡

只(zhi)需要(yao)一些(xie)額(e)外的調整就可以平衡頁面(mian)：

	code,	pre {
	 background: #eee;
	}
	code {
	 padding: 2px 4px;
	 vertical-align: text-bottom;
	}

	pre {
	 padding: 1em;
	}

在(zai)這一點上，你(ni)可能想讓你(ni)的(de)頁(ye)面脫穎而(er)出，讓它更有(you)個性。

主色調

大(da)多數(shu)品牌都有一個主色調(diao)，作為視覺基調(diao)。在一個網頁上，這個主色調(diao)可以用(yong)來(lai)強調(diao)交互元素，如鏈接。

	a {
	 color: #e81c4f;
	}

但是為(wei)了(le)保持(chi)平衡/協調，我們還需要一些額外(wai)的顏色。

輔助色

主(zhu)色調可以用(yong)更(geng)微妙的(de)色調來補(bu)充，用(yong)于邊框，背景(jing)，甚至正文中。

	body {
	 color: #566b78;
	}

	code,
	pre {
	 background: #f5f7f9;
	 border-bottom: 1px solid #d8dee9;
	 color: #a7adba;
	}

	pre {
	 border-left: 2px solid #69c;
	}

已(yi)經(jing)改變(bian)了色調，為什么(me)不一并改變(bian)外形/字體(ti)...

自定義字體

由(you)于文(wen)本(ben)是網頁(ye)的主要內容，使用自定義(yi)字體能使頁(ye)面(mian)更(geng)加引人(ren)注目。

當你可以嵌入自(zi)己的網頁字體(ti)或使(shi)(shi)用(yong)類(lei)似Typekit的在(zai)線服務(wu)時，讓我們使(shi)(shi)用(yong)免費(fei)谷歌(ge)字體(ti)Roboto：

@import '//fonts.googleapis.com/css?family=Roboto:300,400,500';
@import '//fonts.googleapis.com/css?family=Roboto:300,400,500';

	body {
	 font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	}

在通(tong)過自定義字體凸顯(xian)你(ni)的(de)個性后(hou)，增加一千(qian)個單詞又怎么辦呢(ni)?

 header {
	 background-color: #263d36;
	 background-image: url("header.jpg");
	 background-position: center top;
	 background-repeat: no-repeat;
	 background-size: cover;
	 line-height: 1.2;
         padding: 10vw 2em;
	 text-align: center;
	}

添加logo

圖形和(he)圖標既可用來作為支持你(ni)的(de)內容的(de)裝飾品，還(huan)可以(yi)在(zai)你(ni)想要(yao)傳達的(de)信息中擔當積極部(bu)分(fen)。讓我們從Unsplash挑選一張漂亮的背景圖片來美化header。

	header img {
	 display: inline-block;
	 height: 120px;
	 vertical-align: top;
	 width: 120px;
	}

讓我(wo)們借這(zhe)個機(ji)會，來提高文本風(feng)格。

	header h1 {
	 color: white;
	 font-size: 2.5em;
	 font-weight: 300;
	}

	header a {
	 border: 1px solid #e81c4f;
	 border-radius: 290486px;
	 color: white;
	 font-size: 0.6em;
	 letter-spacing: 0.2em;
	 padding: 1em 2em;
	 text-transform: uppercase;
	 text-decoration: none;
	 transition: none 200ms ease-out;
	 transition-property: color, background;
	}

	header a:hover {
	 background:  #e81c4f;
	 color: white;
	}

按照上面的語法去寫，寫幾個簡單的頁面肯定是沒啥問題的，不過想要做一個高大上，甚至是支持html5自適應效果的網站的話，建議你還是使用建站寶盒這款會打字就建站的自助建站系統吧，里面為您準備了上千套html5風格的網站模板，一鍵安裝就可以搞定啦，喜歡的話，不妨試試。建站寶盒免費下載地址://szjicheng.cn/design/