3分鐘學會建網(wǎng)站必備的網(wǎng)頁樣式

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

讓我們假設你已經(jīng)完成了你想發(fā)布的內(nèi)容，同時已經(jīng)創(chuàng)建了一個空的style.css文件，什么是你可以寫的第一條規(guī)則?

居中

長文本很難解析，也因此不易閱讀。每行設置字符限制，可以大大提高大量文本的可讀性和吸引力。

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

在為文本容器添加了樣式后，為文本本身添加樣式可好?

字體

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

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

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

當我們讓文本更具吸引力時，也需要讓它更具可讀性。

間隔

當用戶覺得一個頁面崩壞的時候，通常來說都是間距問題。通過在文本周圍和文本內(nèi)設置適當?shù)拈g距就可以增加頁面的吸引力。

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

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

雖然到目前為止布局已經(jīng)大大改善，但讓我們添加更多細節(jié)處理。

顏色和對比度

白色背景上的黑色文字看起來會比較扎眼。為文本選擇一款較軟一點的黑色，讓頁面閱讀起來更舒服。

	body {
	 color: #555;
	}

為了保持一個良好的對比度，讓我們?yōu)橹匾�文本選擇一個更黑暗的陰影。

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

雖然大部分頁面在視覺上已經(jīng)有所提升，但是一些元素依然顯得格格不入，如代碼段。

平衡

只需要一些額外的調(diào)整就可以平衡頁面：

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

	pre {
	 padding: 1em;
	}

在這一點上，你可能想讓你的頁面脫穎而出，讓它更有個性。

主色調(diào)

大多數(shù)品牌都有一個主色調(diào)，作為視覺基調(diào)。在一個網(wǎng)頁上，這個主色調(diào)可以用來強調(diào)交互元素，如鏈接。

	a {
	 color: #e81c4f;
	}

但是為了保持平衡/協(xié)調(diào)，我們還需要一些額外的顏色。

輔助色

主色調(diào)可以用更微妙的色調(diào)來補充，用于邊框，背景，甚至正文中。

	body {
	 color: #566b78;
	}

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

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

已經(jīng)改變了色調(diào)，為什么不一并改變外形/字體...

自定義字體

由于文本是網(wǎng)頁的主要內(nèi)容，使用自定義字體能使頁面更加引人注目。

當你可以嵌入自己的網(wǎng)頁字體或使用類似Typekit的在線服務時，讓我們使用免費谷歌字體Roboto：

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

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

在通過自定義字體凸顯你的個性后，增加一千個單詞又怎么辦呢?

 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

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

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

讓我們借這個機會，來提高文本風格。

	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自適應效果的網(wǎng)站的話，建議你還是使用建站寶盒這款會打字就建站的自助建站系統(tǒng)吧，里面為您準備了上千套html5風格的網(wǎng)站模板，一鍵安裝就可以搞定啦，喜歡的話，不妨試試。建站寶盒免費下載地址:http://www.xpj18992.com/design/