為您提供網(wǎng)站建設(shè)資訊、網(wǎng)站優(yōu)化知識(shí)、主機(jī)域名郵箱、
關(guān)鍵詞排名、網(wǎng)站開(kāi)發(fā)常見(jiàn)問(wèn)題等。
發(fā)表日期:2018/06/28 來(lái)源:肆合互動(dòng) 咨詢(xún)電話(huà):028-85756675
排版在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常被忽略。其實(shí)這是很傻逼的,因?yàn)樽⒅鼐W(wǎng)頁(yè)排版確實(shí)可以提高你的網(wǎng)頁(yè)設(shè)計(jì)水平和可讀性。下面,成都網(wǎng)站制作小編列出了10個(gè)非常有用的排版技巧讓你的網(wǎng)站看起來(lái)更好。
1、糾正行高
最常見(jiàn)的網(wǎng)頁(yè)布局錯(cuò)誤之一是定義了不正確的行高。行高是定義一行文本的高度,所以我們必須按照文本字體大小來(lái)設(shè)定行高。
一般來(lái)說(shuō),在設(shè)置文本行高的時(shí)候,我經(jīng)常在字體大小的基礎(chǔ)上加上7個(gè)像素(對(duì)12-17像素的字體而言)
body{
font-size:14px;
line-height:21px; /* 14px + 7px */
}
2、糾正標(biāo)題margin值
另外一個(gè)常見(jiàn)的錯(cuò)誤是標(biāo)題周?chē)徽_的margin值。標(biāo)題其實(shí)是與它下面的段落是相關(guān)聯(lián)的,而不僅僅是兩個(gè)段落的分 割符。這就是為什么標(biāo)題的margin-top比margin-bottom要寬。
3、不要使用過(guò)多的字體
為了確??勺x性和專(zhuān)業(yè)性,你的網(wǎng)頁(yè)上不應(yīng)該使用超過(guò)3種字體。使用過(guò)多的字體會(huì)干擾你的用戶(hù)而且讓你的網(wǎng)站看起 來(lái)很亂。相反,較少的字體讓你的網(wǎng)站顯得干凈易讀。你可以標(biāo)題使用一種字體,正文使用一種字體,最后 logo或副標(biāo)題使用另外的字體。
4、代碼部分使用等寬字體
如果你是一位開(kāi)發(fā)者(就像大部分讀這篇文章的人)你可能想貼一些代碼在你的博客里。如果是這樣,請(qǐng)使用等寬字體。 那么,什么是等寬字體?它就是字母和字符占相同水平寬度的字體。
那么在網(wǎng)站的代碼段你應(yīng)該使用哪種字體呢? 到目前為止 Courier字體是最流行的,那么嘗試一下最新的一些字體像 Consolas或 Monaco怎么樣呢?那你一定要看看這里咯。這里
5、關(guān)注對(duì)比
即使你的網(wǎng)站有很好的排版了,另一個(gè)需要注意的是對(duì)比。如果你的頁(yè)面背景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否則你的內(nèi)容很難看清,尤其是對(duì)一些年紀(jì)比較大的或視力差的人。
總之,除非你的網(wǎng)站是關(guān)于黑客、黑帽seo或哥特?fù)u滾的,不然你應(yīng)該使用淺色背景和深色字體來(lái)保證清晰的對(duì)比度增加你網(wǎng)站的可讀性。
6、只給鏈接的文本加下劃線(xiàn)
在我上網(wǎng)的12年中,瀏覽器用在鏈接的默認(rèn)樣式一直是藍(lán)色文本加下劃線(xiàn)。雖然這個(gè)藍(lán)色經(jīng)常被改成另外的顏色,但下劃線(xiàn)一直被當(dāng)做是鏈接的常規(guī)樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線(xiàn)的原因。否則,這可能對(duì)你的用戶(hù)造成很大的困惑。
7、創(chuàng)建樣式庫(kù)
讓你的網(wǎng)站產(chǎn)生視覺(jué)震撼的一個(gè)簡(jiǎn)單高效的方法是給特殊的頁(yè)面創(chuàng)建特殊的樣式。例如,創(chuàng)建一個(gè).warning的CSS類(lèi)來(lái)向 你的用戶(hù)顯示“警告”。
8、按級(jí)別來(lái)排列標(biāo)題和文本
為了增加可讀性,給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級(jí)是很重要的,這樣你的用戶(hù)可以看清你的文章結(jié)構(gòu)并能很 快的找到他們感興趣的部分。
9、大膽留白
我認(rèn)為最重要的排版技巧之一是“大膽留白”。留白是指空白區(qū)或沒(méi)有使用的空間,它會(huì)使你的設(shè)計(jì)整齊而專(zhuān)業(yè)。許多人 喜歡蘋(píng)果網(wǎng)站的原因是:它盡管簡(jiǎn)單但很精致,而且有很多留白。
10、正確使用標(biāo)點(diǎn)符號(hào)
如果你想提升你的排版水平不容忽視的一點(diǎn)是正確使用標(biāo)點(diǎn)符號(hào)。例如,引號(hào)經(jīng)常用雙撇符號(hào)代替(譯者注:我想作者要表達(dá)的意思應(yīng)該是全角符號(hào)和半角符號(hào)的區(qū)別,就像中文的引號(hào)和英文的引號(hào)不同一樣)。
注意區(qū)分雙撇符號(hào):
He said "Hello".
同樣的文本,使用引號(hào):
He said “Hello”.
這樣更好,不是嗎?如果你是WordPress用戶(hù),你可能很樂(lè)意知道你最喜歡的博客平臺(tái)自動(dòng)將雙撇號(hào)轉(zhuǎn)換為智能的引號(hào) 。否則,你得使用HTML字符編碼。如下所示:
He said &s;ldquo;Hello”.
網(wǎng)站建設(shè)及推廣咨詢(xún)電話(huà)
028-85756675成都市天府新區(qū)華府大道1號(hào)藍(lán)潤(rùn)置地廣場(chǎng)T3公寓806室
填寫(xiě)網(wǎng)站建設(shè)及SEO優(yōu)化排名需求