做好網頁中文字的排版，特別對於大篇幅的文字，可以增加網頁的美觀性使讀者更有耐心閱讀，提高使用者體驗度。在網頁設計裡，文字排版主要由三個因素控制：
字型大小(font-size)
行距(line-height)
間距(margin,padding)
認真調整這三個因素的值，可以實現理想的效果。
基礎行距
在垂直韻律中,基本的單位是行距. 在整個頁面上設定乙個合適的行距是垂直韻律之所以能夠成為韻律的必要條件. 這個行距,我們將應用於整個頁面的所有文字上,包括正文、標題、側邊欄等. 例如,我們現在設定我們的字型大小(css font-size)為12px,行距(css line-height)為18px. (對於中文宋體來說,12px是能夠清晰顯示的最小字型大小. 為了保證可讀性,12px的1.5倍行距就是18px. 同時12px/18px也是中文網際網路上最常用的字型大小和行距. )我們在空白頁面的垂直方向上以18px為單位做垂直網格,就像我們線格本子上的線條,每條網格線也就是基線的對齊線. 接著，我們放上三個段落(12px/18px)作為例子講解.
段落間距
段落間加上段間距不但美觀,而且容易在視覺上區別各段落. 但是要注意的是,垂直韻律最容易被打破的地方就是兩個元素在垂直方向上的空白了. 所以,為了讓下一段的文字內容落在網格內,我們要將段落間距設定為基礎的倍數. 例如：我們可以設定段前距為9px,段後距為9px,9px+9px=18px；或者設定段前距(css margin-top)為0,段後距(css margin-bottom)為18px；或者段前距和段後距都是18px. 這裡,我們選取第二種方案,即,設定段前距為0,段後距為18px. 圖中可以看到,每段段落的文字都落在了格仔內. 關閉網格可以發現,段落清晰明了,比之前容易閱讀多了.
新增標題
使用瀏覽器預設的樣式,你會發現,大多數情況下,垂直韻律都被打破了. 所以,新增標題,我們需要選擇正確的行距和間距才可以.
有了新增段間距的經驗,相信新增標題也不是一件難事了. 標題的文字要比正文的文字要大的多. 例如,我們現在選擇h1的字型大小為24px.
那麼,根據附錄結論有：
行距和全部垂直間距之和為基礎行距的倍數。
那麼，我們假設行距為36px,則可以設定段前距為9px，段後距為9px (驗證有：36 + 9 + 9 = 54 = 3 * 18).
同樣，我們也可以設定h2:字型大小18px，行高24px，段前距3px，段後距9px(驗證有：24 + 3 + 9 = 36 = 2 * 18)。
做好網頁排版，不要犯這10種錯誤
短腿殭屍木 網路上95 以上的資訊是書面形式的。優化排版則是優化可讀性，可訪問性，可用性，整體圖形平衡。換句話說 優化排版也是優化使用者介面。本文將提供一組規則，幫助您提高文字內容的可讀性和易讀性。1.最少使用字型數量使用超過 3 種不同的字型使 看起來非結構化和不專業，太多的型別尺寸和樣式一次也可...
怎樣把已經做好的網頁傳到網上去
以下教程主要針對想要將個人網頁比如個人站點 個人部落格 簡歷的靜態網頁傳到網上的朋友 網域名稱 主機空間 網頁 1 網域名稱 購買網域名稱 2 空間 付費空間 個人站點不推薦 免費空間 國外的 國內的 國內空間註冊需備案，提交申請後要至少20天才有結果。國外空間無需備案 3 繫結解析 回到網域名稱註...
css網頁布局中文字排版的屬性和用法
前段時間，學習了幾個大的 的 混排的方法。今天總結下，css網頁布局中文字排版的相關屬性以及用法 包括 設定字型 顏色 大小 段落空白，首字下沉 首行縮排 中文字的截斷 固定寬度詞內折行 word wrap和word break 等。一 設定文字字型 顏色 大小等使用font等。font style...