免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

4分鐘學(xué)會(huì)網(wǎng)頁(yè)樣式

2016-09-08    分類: 網(wǎng)站建設(shè)

比方說(shuō),你想要在自己網(wǎng)站上分享一個(gè)產(chǎn)品,或者是一個(gè)作品集,又或者僅僅只是一個(gè)靈感。在你發(fā)布到網(wǎng)上之前,你想讓它看起來(lái)有吸引力,專業(yè),或者至少得看起來(lái)像那么回事。

那么你接下來(lái)該做什么呢?

文本

設(shè)計(jì)的目的是為了增強(qiáng)它所應(yīng)用到的內(nèi)容的表現(xiàn)形式。這看上去是顯而易見的事,但內(nèi)容是一個(gè)網(wǎng)站的主要元素,它不應(yīng)該在發(fā)布后才想到要調(diào)整。 編寫的內(nèi)容,就像你目前正在閱讀的文章,組成了超過(guò)90%的網(wǎng)頁(yè)。為這個(gè)文本內(nèi)容添加樣式將有一個(gè)很長(zhǎng)的路要走。 讓我們假設(shè)你已經(jīng)完成了你想發(fā)布的內(nèi)容,同時(shí)已經(jīng)創(chuàng)建了一個(gè)空的style.css文件,什么是你可以寫的第一條規(guī)則?

居中

長(zhǎng)文本很難解析,也因此不易閱讀。每行設(shè)置字符限制,可以大大提高大量文本的可讀性和吸引力。

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

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

字體

瀏覽器的默認(rèn)字體為Times,可看起來(lái)缺乏吸引力(主要是因?yàn)樗?ldquo;無(wú)樣式”字體)。切換到一個(gè)無(wú)襯線字體,如Helvetica或Arial可以大大提高你網(wǎng)頁(yè)的可讀性。

如果你堅(jiān)持要用襯線體,可以試試Georgia。 當(dāng)我們讓文本更具吸引力時(shí),也需要讓它更具可讀性。

間隔

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

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

顏色和對(duì)比度

白色背景上的黑色文字看起來(lái)會(huì)比較扎眼。為文本選擇一款較軟一點(diǎn)的黑色,讓頁(yè)面閱讀起來(lái)更舒服。

body {color: #555;}

為了保持一個(gè)良好的對(duì)比度,讓我們?yōu)橹匾谋具x擇一個(gè)更黑暗的陰影。

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

平衡

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

在這一點(diǎn)上,你可能想讓你的頁(yè)面脫穎而出,讓它更有個(gè)性。

主色調(diào)

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

a 

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

輔助色

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

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

自定義字體

由于文本是網(wǎng)頁(yè)的主要內(nèi)容,使用自定義字體能使頁(yè)面更加引人注目。 當(dāng)你可以嵌入自己的網(wǎng)頁(yè)字體或使用類似Typekit的在線服務(wù)時(shí),讓我們使用免費(fèi)谷歌字體Roboto:

在通過(guò)自定義字體凸顯你的個(gè)性后,想讓頁(yè)面更加豐富多彩又怎么辦呢?

圖片和圖標(biāo)既可用來(lái)作為支持你的內(nèi)容的裝飾品,還可以在你想要傳達(dá)的信息中擔(dān)當(dāng)積極部分。

讓我們從Unsplash挑選一張漂亮的背景圖片來(lái)美化header。

讓我們借這個(gè)機(jī)會(huì),來(lái)提高文本格調(diào)。

瞧!

按照網(wǎng)頁(yè)設(shè)計(jì)的基本原則,我們?cè)诙潭處追昼妰?nèi)設(shè)計(jì)了一個(gè)像樣的頁(yè)面。只剩下最后一件事啦...

文章標(biāo)題:4分鐘學(xué)會(huì)網(wǎng)頁(yè)樣式
文章轉(zhuǎn)載:http://m.newbst.com/news/46226.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化營(yíng)銷型網(wǎng)站建設(shè)商城網(wǎng)站網(wǎng)站收錄全網(wǎng)營(yíng)銷推廣品牌網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

小程序開發(fā)