Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之一文本排版淺議_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
我們?cè)谧鼍W(wǎng)頁(yè)的時(shí)候自己畫的圖也不錯(cuò),自己做的布局也很精致,做的圖標(biāo)也很漂亮,第一眼看起來也覺得很漂亮,但是看看就覺得不舒適。也不清楚為什么,這里我告訴你,也許就是你的排版出現(xiàn)問題了。由于排版的不合理,所產(chǎn)生的視覺效果會(huì)對(duì)讀者的眼睛產(chǎn)生一定的疲憊影響,基本的毛病在于“字間距太擠或太寬”、“行距太小或太大”、“段距太少或太多”、“每行字?jǐn)?shù)太多或太少”等這幾個(gè)常見因素。下面的內(nèi)容可以從圖示中看出效果來,同時(shí)我會(huì)給大家一個(gè)相對(duì)比較好的參數(shù)供大家參考。當(dāng)然設(shè)計(jì)本來就不要太過拘泥,我所提供的都是一般性的提議,不同網(wǎng)站不同對(duì)待,不要過于拘泥我所給大家的一些參數(shù)。

大家看到上圖,前三個(gè)是行距的問題:
第一個(gè)太擠了,都粘在一起了,這樣眼睛在看這個(gè)文本的時(shí)候會(huì)需要花點(diǎn)時(shí)間去分辨,這樣的排版會(huì)讓讀者看得很累。很不舒適。大家看一下自己手頭上所做文本的是不是太擠了,假如是那就改一下吧!第二個(gè)是比較適中的,由于每行分得很清楚,這樣看起來有很強(qiáng)的識(shí)別性。第三個(gè)是比較寬的,松了一點(diǎn),這樣看起來也很清楚,但是當(dāng)你的文章不是一兩行而是十幾行與幾十行的時(shí)候你就會(huì)覺得文章的連貫性產(chǎn)生了很嚴(yán)重的脫節(jié),一般排版不會(huì)越過兩個(gè)字體高度(2em)
下面兩個(gè)就是字?jǐn)?shù)的問題了,第四個(gè)每行文字太長(zhǎng),這樣看起來頭要搖來?yè)u去,這樣讀者更輕易顯得很累。因?yàn)橐粩嗟霓D(zhuǎn)動(dòng)頭,或是讓眼球不斷的左右擺動(dòng)。最舒適的方式就是讀者一眼看上去就能把一行看完,不然從行末到下一行行首也會(huì)形成斷裂感。而下面的又太扁了,這樣看起來也不是很舒適。由于在不斷的換行閱讀,眼球也會(huì)覺得不舒適。而推薦的最好的字?jǐn)?shù)是: 不大于45個(gè)字母,不大于30個(gè)漢字。

面的圖是關(guān)于段距的,第一個(gè)是比較合適的,這樣的把段落分開了,讓讀者覺得文章并不是很多很難讀,而假如不把段落當(dāng)一回事,任其自然那么就會(huì)如下面一樣,兩段成為一段,這里是兩段還好,假如是幾十段,那么這個(gè)文章就很少有人能讀下去了!

大家看到上圖,前三個(gè)是行距的問題:
第一個(gè)太擠了,都粘在一起了,這樣眼睛在看這個(gè)文本的時(shí)候會(huì)需要花點(diǎn)時(shí)間去分辨,這樣的排版會(huì)讓讀者看得很累。很不舒適。大家看一下自己手頭上所做文本的是不是太擠了,假如是那就改一下吧!第二個(gè)是比較適中的,由于每行分得很清楚,這樣看起來有很強(qiáng)的識(shí)別性。第三個(gè)是比較寬的,松了一點(diǎn),這樣看起來也很清楚,但是當(dāng)你的文章不是一兩行而是十幾行與幾十行的時(shí)候你就會(huì)覺得文章的連貫性產(chǎn)生了很嚴(yán)重的脫節(jié),一般排版不會(huì)越過兩個(gè)字體高度(2em)
下面兩個(gè)就是字?jǐn)?shù)的問題了,第四個(gè)每行文字太長(zhǎng),這樣看起來頭要搖來?yè)u去,這樣讀者更輕易顯得很累。因?yàn)橐粩嗟霓D(zhuǎn)動(dòng)頭,或是讓眼球不斷的左右擺動(dòng)。最舒適的方式就是讀者一眼看上去就能把一行看完,不然從行末到下一行行首也會(huì)形成斷裂感。而下面的又太扁了,這樣看起來也不是很舒適。由于在不斷的換行閱讀,眼球也會(huì)覺得不舒適。而推薦的最好的字?jǐn)?shù)是: 不大于45個(gè)字母,不大于30個(gè)漢字。

面的圖是關(guān)于段距的,第一個(gè)是比較合適的,這樣的把段落分開了,讓讀者覺得文章并不是很多很難讀,而假如不把段落當(dāng)一回事,任其自然那么就會(huì)如下面一樣,兩段成為一段,這里是兩段還好,假如是幾十段,那么這個(gè)文章就很少有人能讀下去了!
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DivCSS布局實(shí)例用dldtdd來制作列表
- DIVCSS菜單:縱向CSS菜單實(shí)例之橙色記憶
- CSS實(shí)例:用fieldset、legend實(shí)現(xiàn)文字寫在邊線上的效果
- DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果
- CSS菜單:一個(gè)圖片構(gòu)建菜單的三種狀態(tài)一例!
- CSS布局欣賞:淘寶首頁(yè)布局效果
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- DIVCSS橫向菜單實(shí)例:簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- css背景漸變的技巧與方法
- DIVCSS實(shí)例教程:蔚藍(lán)色的海洋漂亮的CSS縱向菜單
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之一文本排版淺議
。