中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

合理的網(wǎng)頁布局可提升網(wǎng)站的精美度和可讀性

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

通常很多初級網(wǎng)頁設(shè)計師經(jīng)常會忽略排版細(xì)節(jié)。其實這是很不好的,一個網(wǎng)站其排版是否合理直接影響著網(wǎng)站整體的設(shè)計和可讀性。以下是創(chuàng)新互聯(lián)為您簡列的10點細(xì)節(jié):

1、正確網(wǎng)頁行高和段落間距

最常見的網(wǎng)頁布局錯誤之一是定義了不正確的行高。行高是定義一行文本的高度,所以我們必須按照文本字體大小來設(shè)定行高。

一般來說,在設(shè)置文本行高的時候,我經(jīng)常在字體大小的基礎(chǔ)上加上7個像素(對12-17像素的字體而言)

body{


font-size:14px;
line-height:21px; /* 14px + 7px */
}

2、合理標(biāo)題margin值

另外一個常見的錯誤是標(biāo)題周圍不正確的margin值。標(biāo)題其實是與它下面的段落是相關(guān)聯(lián)的,而不僅僅是兩個段落的分 割符。這就是為什么標(biāo)題的margin-top比margin-bottom要寬。

3、合理使用網(wǎng)頁字體

為了確??勺x性和專業(yè)性,你的網(wǎng)頁上不應(yīng)該使用超過3種字體。使用過多的字體會干擾你的用戶而且讓你的網(wǎng)站看起 來很亂。相反,較少的字體讓你的網(wǎng)站顯得干凈易讀。你可以標(biāo)題使用一種字體,正文使用一種字體,最后 logo或副標(biāo)題使用另外的字體。

4、代碼部分使用等寬字體

如果你是一位開發(fā)者(就像大部分讀這篇博客的人)你可能想貼一些代碼在你的博客里。如果是這樣,請使用等寬字體。 那么,什么是等寬字體?它就是字母和字符占相同水平寬度的字體。

那么在網(wǎng)站的代碼段你應(yīng)該使用哪種字體呢? 到目前為止 Courier字體是最流行的,那么嘗試一下最新的一些字體像 Consolas或 Monaco怎么樣呢?那你一定要看看這里咯。這里

5、關(guān)注對比

即使你的網(wǎng)站有很好的排版了,另一個需要注意的是對比。如果你的頁面背景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否則你的內(nèi)容很難看清,尤其是對一些年紀(jì)比較大的或視力差的人。

總之,除非你的網(wǎng)站是關(guān)于黑客、黑帽seo或哥特?fù)u滾的,不然你應(yīng)該使用淺色背景和深色字體來保證清晰的對比度增加你網(wǎng)站的可讀性。

6、給部分文本鏈接加下劃線

在我上網(wǎng)的12年中,瀏覽器用在鏈接的默認(rèn)樣式一直是藍(lán)色文本加下劃線。雖然這個藍(lán)色經(jīng)常被改成另外的顏色,但下劃線一直被當(dāng)做是鏈接的常規(guī)樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線的原因。否則,這可能對你的用戶造成很大的困惑。

7、創(chuàng)建CSS樣式庫

讓你的網(wǎng)站產(chǎn)生視覺震撼的一個簡單高效的方法是給特殊的頁面創(chuàng)建特殊的樣式。例如,創(chuàng)建一個.warning的CSS類來向 你的用戶顯示“警告”。

8、按級別來排列標(biāo)題和文本

為了增加可讀性,給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級是很重要的,這樣你的用戶可以看清你的文章結(jié)構(gòu)并能很 快的找到他們感興趣的部分。

9、大膽留白

我認(rèn)為重要的排版技巧之一是“大膽留白”。留白是指空白區(qū)或沒有使用的空間,它會使你的設(shè)計整齊而專業(yè)。許多人 喜歡蘋果網(wǎng)站的原因是:它盡管簡單但很精致,而且有很多留白。

10、正確使用標(biāo)點符號

如果你想提升你的排版水平不容忽視的一點是正確使用標(biāo)點符號。例如,引號經(jīng)常用雙撇符號代替(譯者注:我想作者要表達(dá)的意思應(yīng)該是全角符號和半角符號的區(qū)別,就像中文的引號和英文的引號不同一樣)。

注意區(qū)分雙撇符號:

He said "Hello".
同樣的文本,使用引號:
He said “Hello”.
這樣更好,不是嗎?如果你是WordPress用戶,你可能很樂意知道你最喜歡的博客平臺自動將雙撇號轉(zhuǎn)換為智能的引號 。否則,你得使用HTML字符編碼。如下所示:

He said &s;ldquo;Hello”.

本文名稱:合理的網(wǎng)頁布局可提升網(wǎng)站的精美度和可讀性
文章鏈接:http://www.rwnh.cn/news4/195854.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、做網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計

廣告

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

微信小程序開發(fā)
报价| 铜梁县| 老河口市| 龙川县| 高青县| 安陆市| 林西县| 满城县| 新平| 广丰县| 永春县| 根河市| 马龙县| 阿拉善左旗| 桑植县| 宝山区| 正镶白旗| 福清市| 遵义市| 南阳市| 永胜县| 望奎县| 曲麻莱县| 酉阳| 十堰市| 泾川县| 扶绥县| 土默特左旗| 社会| 金堂县| 教育| 山东| 吉水县| 大竹县| 喀什市| 济宁市| 柞水县| 恩施市| 健康| 博野县| 蒙自县|