整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
的網(wǎng)站不在于網(wǎng)頁的眩目多彩，而在于信息的流量和瀏覽者的視覺感受。小小的文字在不同的設(shè)計師手中會演繹成不同的藝術(shù)樂章。作為網(wǎng)頁設(shè)計師，必須下工夫做好網(wǎng)頁文本的排版設(shè)計，希望下面介紹的網(wǎng)頁文本編排秘招能給大家一點啟示。
示例圖片
本文主要介紹在網(wǎng)站設(shè)計過程中文本排版應(yīng)注意的基本問題和常規(guī)解決方法。
不合理的網(wǎng)頁文本排版會對瀏覽者的視力產(chǎn)生消極的影響，不亞于庸俗的網(wǎng)頁內(nèi)容對于瀏覽者心靈的毒害。設(shè)計師要避免這樣的問題出現(xiàn)，其實也很簡單，記住5要素：字體大小、字間距離、行內(nèi)字?jǐn)?shù)、行間距離和段落距離。
標(biāo)準(zhǔn)正文字體大小一般為9pt（點數(shù)）或12px（像素）。由于顯示器屏幕越來越大，同一字體大小設(shè)置會比以前顯示得小，現(xiàn)在有些網(wǎng)頁正文字體大小設(shè)計趨向增大，可以在這個基礎(chǔ)上增加2個單位，但不能超過16像素，否則就會覺得太大，顯得版面內(nèi)容太空。
在網(wǎng)頁正文中適合視覺閱讀的字體大小為12pt，但由于在一個頁面中需要安排的內(nèi)容較多，通常采用9pt，所以建議根據(jù)個人網(wǎng)頁內(nèi)容而設(shè)定。
較大的字體可用于標(biāo)題或其他需要強調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字體容易產(chǎn)生整體感和精致感，但可讀性較差。
正文字距一般保持正常即可，即為0em（字體高度），不要超過1em，否則就顯得不連貫。
行內(nèi)字?jǐn)?shù)一般根據(jù)版面大小而定，建議正字?jǐn)?shù)保持在40個字左右為宜。
正文行距一般設(shè)為1.6em（字體高度）左右，正常范圍為1.2-2em（字體高度）。不宜太小，否則會擠在一起，無法識別；太大就容易產(chǎn)生斷行現(xiàn)象。
行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。這主要是因為適當(dāng)?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導(dǎo)瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。
除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設(shè)計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨具匠心。
正文段距一般可設(shè)為1em（字體高度），即相當(dāng)于空一行，由于在CSS樣式表中沒有直接的段距設(shè)置，可通過設(shè)置margin（邊距）、padding（填充）屬性來實現(xiàn)。
1.閱后如果喜歡，不妨點贊、評論和關(guān)注一下。
2.如果喜歡玩軟件，請關(guān)注本頭條號閱讀相關(guān)文章。
3.在學(xué)習(xí)中有什么問題，歡迎與我溝通交流，號搜索：微課傳媒，我在這里等你喲！
互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領(lǐng)域還有內(nèi)容，通過點擊網(wǎng)站上的標(biāo)簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標(biāo)記語言的基礎(chǔ)上做到的。
HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標(biāo)記語言，是一種專門用來建立網(wǎng)站的標(biāo)識語言。其中包括了許多標(biāo)簽將分散的網(wǎng)絡(luò)數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁。
看到這里是不是有許多朋友想要知道這個HTML語言該怎么去學(xué)習(xí)呢？是需要找老師統(tǒng)一學(xué)，還是去圖書館找專業(yè)書籍自己學(xué)好呢？不用擔(dān)心，因為今天要給大家推薦的就是一個專門為大家提供各種編程語言教程的學(xué)習(xí)網(wǎng)站。
這個網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。
圖片來自RUNOOB網(wǎng)頁截圖
在首頁可以看到該欄目的第二個就是關(guān)于HTML的學(xué)習(xí)教程，點擊左邊的方框可以調(diào)整你的課程進度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關(guān)于網(wǎng)站建立的小知識。
下方的提示框會給你提供一些對HTML零基礎(chǔ)新手的科普，關(guān)于這種標(biāo)記語言應(yīng)該如何進行保存，如何查看文件后輟名，如何打開代碼文件等等，還會提供一些專用工具供你學(xué)習(xí)使用。同時網(wǎng)站會給你簡單介紹一些網(wǎng)頁編程語言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細。
圖片來自RUNOOB網(wǎng)頁截圖
在第三章節(jié)的編輯器一欄里，會提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實用工具，在后面會教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運行。
通過插件還有語言編程的格式我們就能夠?qū)W會如何制作第一步的標(biāo)題了，剛開始的一步比較簡單，相信大家很快就能學(xué)會如何在網(wǎng)頁上顯示自己打入的文字了。之后進一步的學(xué)習(xí)就是關(guān)于如何調(diào)整文字段落，還有各種標(biāo)識的使用。
圖片來自RUNOOB網(wǎng)頁截圖
在如何進行文字排版編輯的方面，教程中也講述得很詳細，包括一些用戶們常犯的錯誤，還有一些網(wǎng)頁的實例，甚至是這個教學(xué)網(wǎng)站上的排版示范都會進行一一講解。
更深入的章節(jié)會對如何進行圖像排列，傳輸?shù)确矫孢M行細講，教程中把大部分網(wǎng)站會使用到的技巧還有排版方式都分成了許多個小片段，方便大家能夠?qū)γ總€方面針對性地學(xué)習(xí)。這些內(nèi)容并不多，幾乎每一個片段都是用很直白的語言進行講解，方便所有人都能夠看懂，并且在下方都會有更詳細的術(shù)語解析，還有一些比較難懂的點會舉例解釋。
圖片來自RUNOOB網(wǎng)頁截圖
經(jīng)過十幾章節(jié)的教學(xué)之后，基本上能夠掌握HTML語言的基本用法，還有一些簡單的操作了，這個時候如果想要進階學(xué)習(xí)的話還可以在網(wǎng)站上查找其他的進階語言用法，例如CSS, JavaScript等等復(fù)雜一些的語言，相應(yīng)的你也會學(xué)到更多如何運營網(wǎng)頁的方法。
當(dāng)然如果想要自己建立一個網(wǎng)站的話，還需要更多資源還有設(shè)備，例如高速的網(wǎng)絡(luò)連接保持網(wǎng)頁的穩(wěn)定性，以及穩(wěn)定的服務(wù)器，用來保證自己的網(wǎng)頁24小時都能保持流暢可用。不過這些都是在學(xué)會了如何建立網(wǎng)頁之后才考慮的事了。
現(xiàn)在網(wǎng)上也有許多編程教學(xué)，在網(wǎng)上自學(xué)一門知識一門語言變得非常方便，但是僅僅是擁有資源還是不夠的。學(xué)習(xí)如何建立自己的網(wǎng)站還需要大量的努力以及知識的積累，通過不斷的練習(xí)還有實踐才能自如地使用，只有基礎(chǔ)扎實，建立出來的網(wǎng)站才能夠長久。但還需要大家能夠行動起來，只有去學(xué)習(xí)去實踐才能夠真正學(xué)會東西，希望這個教學(xué)網(wǎng)站推薦能夠幫到更多人！
由于漢字的特殊性，在css網(wǎng)頁布局中，中文排版有別于英文排版。排版是一個麻煩的問題，小編認(rèn)為，作為一個優(yōu)秀的網(wǎng)頁設(shè)計師和網(wǎng)頁制作人員，掌握一些簡單的中文排版技巧是不可或缺的，所以今天特意總結(jié)了幾個簡單實用的技巧，希望對大家有所幫助。
Web前端教程
一、如何設(shè)定文字字體、顏色、大小等
font-style設(shè)定斜體，比如font-style:italic
font-weight設(shè)定文字粗細，比如font-weight:bold
font-size設(shè)定文字大小，比如font-size:12px
line-height設(shè)定行距，比如line-height:150%
color設(shè)定文字顏色，注意不是font-color喔，比如color:red
font-family設(shè)定字體，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif
二、使用margin，text-align 控制段落
中文段落使用p標(biāo)簽，左右、段前段后的空白，都可以通過margin來控制。
比如
p{
margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點開始的順時針方向*/
}
而text-align則用于文字的對齊方式。
比如
p{
text-align:center;/*居中對齊*/
}
除了居中對齊之外,對齊方式還有左對齊、右對齊和兩端對齊，對應(yīng)的屬性值分別為left、right、justify。
提示：由于默認(rèn)的margin值會導(dǎo)致頁面排版出現(xiàn)問題，特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。
三、豎排文字—使用writing-mode
writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。
寫法如
p{
writing-mode:tb-rl;
}
四、使用list-style美化列表
如果我們的排版涉及到列表，不妨考慮為它添加些項目符號進行美化。
在CSS里，項目符號包括disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。
嘿嘿！我們可用的項目符號數(shù)量不少喔，但美中不足的是我們不能為它們設(shè)定大小，也不能設(shè)定垂直方向上的對齊。
如果我們想設(shè)定一個列表的項目符號為方塊，可以這樣寫：
li{
list-style:square;
}
小編在這里提醒大家一下：當(dāng)一個項目列表的左外邊距設(shè)為零的時候，list-style-position:outside的項目符號不會顯示。
五、使用text-overflow 實現(xiàn)固定寬度漢字截斷
用后臺語言可以對從數(shù)據(jù)庫里的字段內(nèi)容做截斷處理，如果想對列表應(yīng)用該樣式，我們可以這樣寫：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
六、首字下沉
如果你想制作首字下沉效果，不妨考慮偽對象:first-letter并配合font-size、float屬性。
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
七、首行縮進—使用text-indent
text-indent可以使得容器內(nèi)首行縮進一定單位。比如中文段落一般每段前空兩個漢字。
可以這么寫
p{
text-indent:2em;/*em是相對單位，2em即現(xiàn)在一個字大小的兩倍*/
}
注意：如果font-size是12px的話，那么text-indent:2em則代表縮進24px。
八、固定寬度漢字（詞）折行—使用word-break
在排版的時候，你是否為一個詞組，其中一個字出現(xiàn)在上面而另一個字折斷到下一行去而發(fā)愁呢？不用愁，這時使用word-break就可以輕松解決問題了。
九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性
最后小編向大家介紹一下ruby標(biāo)簽和ruby-align屬性 。這是一個比較冷門的技巧，可能平時使用不多，但小編覺得不妨提供給大家預(yù)防不時之需。
如果我們想為漢字注音就可以這樣寫
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通過ruby-align設(shè)置其對齊方式。
以上就是今日整理的“Web前端教程：簡單實用的CSS網(wǎng)頁布局中文排版技巧”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎？以后酷仔每日均會提供MySQL、Python及Web相關(guān)的教程及習(xí)題，趕快學(xué)習(xí)起來吧。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
