整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          設(shè)計(jì)網(wǎng)站時(shí),網(wǎng)頁(yè)文字應(yīng)如何排版?自媒體人必須要知道這5個(gè)規(guī)則

          的網(wǎng)站不在于網(wǎng)頁(yè)的眩目多彩,而在于信息的流量和瀏覽者的視覺(jué)感受。小小的文字在不同的設(shè)計(jì)師手中會(huì)演繹成不同的藝術(shù)樂(lè)章。作為網(wǎng)頁(yè)設(shè)計(jì)師,必須下工夫做好網(wǎng)頁(yè)文本的排版設(shè)計(jì),希望下面介紹的網(wǎng)頁(yè)文本編排秘招能給大家一點(diǎn)啟示。

          示例圖片

          本文主要介紹在網(wǎng)站設(shè)計(jì)過(guò)程中文本排版應(yīng)注意的基本問(wèn)題和常規(guī)解決方法。

          不合理的網(wǎng)頁(yè)文本排版會(huì)對(duì)瀏覽者的視力產(chǎn)生消極的影響,不亞于庸俗的網(wǎng)頁(yè)內(nèi)容對(duì)于瀏覽者心靈的毒害。設(shè)計(jì)師要避免這樣的問(wèn)題出現(xiàn),其實(shí)也很簡(jiǎn)單,記住5要素:字體大小、字間距離、行內(nèi)字?jǐn)?shù)、行間距離和段落距離。

          1.字體大小

          標(biāo)準(zhǔn)正文字體大小一般為9pt(點(diǎn)數(shù))或12px(像素)。由于顯示器屏幕越來(lái)越大,同一字體大小設(shè)置會(huì)比以前顯示得小,現(xiàn)在有些網(wǎng)頁(yè)正文字體大小設(shè)計(jì)趨向增大,可以在這個(gè)基礎(chǔ)上增加2個(gè)單位,但不能超過(guò)16像素,否則就會(huì)覺(jué)得太大,顯得版面內(nèi)容太空。

          在網(wǎng)頁(yè)正文中適合視覺(jué)閱讀的字體大小為12pt,但由于在一個(gè)頁(yè)面中需要安排的內(nèi)容較多,通常采用9pt,所以建議根據(jù)個(gè)人網(wǎng)頁(yè)內(nèi)容而設(shè)定。

          較大的字體可用于標(biāo)題或其他需要強(qiáng)調(diào)的地方,小一些的字體可以用于頁(yè)腳和輔助信息。需要注意的是,小字體容易產(chǎn)生整體感和精致感,但可讀性較差。

          2.字間距離

          正文字距一般保持正常即可,即為0em(字體高度),不要超過(guò)1em,否則就顯得不連貫。

          3.行內(nèi)字?jǐn)?shù)

          行內(nèi)字?jǐn)?shù)一般根據(jù)版面大小而定,建議正字?jǐn)?shù)保持在40個(gè)字左右為宜。

          4.行間距離

          正文行距一般設(shè)為1.6em(字體高度)左右,正常范圍為1.2-2em(字體高度)。不宜太小,否則會(huì)擠在一起,無(wú)法識(shí)別;太大就容易產(chǎn)生斷行現(xiàn)象。

          行距的變化也會(huì)對(duì)文本的可讀性產(chǎn)生很大影響。一般情況下,接近字體尺寸的行距設(shè)置比較適合正文。這主要是因?yàn)檫m當(dāng)?shù)男芯鄷?huì)形成一條明顯的水平空白帶,以引導(dǎo)瀏覽者的目光,而行距過(guò)寬會(huì)使一行文字失去較好的延續(xù)性。

          除了對(duì)于可讀性的影響,行距本身也是具有很強(qiáng)表現(xiàn)力的設(shè)計(jì)語(yǔ)言,為了加強(qiáng)版式的裝飾效果,可以有意識(shí)地加寬或縮窄行距,體現(xiàn)獨(dú)特的審美意趣。例如,加寬行距可以體現(xiàn)輕松、舒展的情緒,應(yīng)用于娛樂(lè)性、抒情性的內(nèi)容恰如其分。另外,通過(guò)精心安排,使寬、窄行距并存,可增強(qiáng)版面的空間層次與彈性,表現(xiàn)出獨(dú)具匠心。

          5.段落距離

          正文段距一般可設(shè)為1em(字體高度),即相當(dāng)于空一行,由于在CSS樣式表中沒(méi)有直接的段距設(shè)置,可通過(guò)設(shè)置margin(邊距)、padding(填充)屬性來(lái)實(shí)現(xiàn)。

          1.閱后如果喜歡,不妨點(diǎn)贊、評(píng)論和關(guān)注一下。

          2.如果喜歡玩軟件,請(qǐng)關(guān)注本頭條號(hào)閱讀相關(guān)文章。

          3.在學(xué)習(xí)中有什么問(wèn)題,歡迎與我溝通交流,號(hào)搜索:微課傳媒,我在這里等你喲!

          互聯(lián)網(wǎng)高速發(fā)展的今天,我們通過(guò)瀏覽器可以看到各種各樣的網(wǎng)站,包含了各式不同的領(lǐng)域還有內(nèi)容,通過(guò)點(diǎn)擊網(wǎng)站上的標(biāo)簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù),而這些都是建立在HTML這種標(biāo)記語(yǔ)言的基礎(chǔ)上做到的。

          HTML的英文全稱為Hyper Text Markup Language,中文稱作超文本標(biāo)記語(yǔ)言,是一種專門(mén)用來(lái)建立網(wǎng)站的標(biāo)識(shí)語(yǔ)言。其中包括了許多標(biāo)簽將分散的網(wǎng)絡(luò)數(shù)據(jù)連接到一起,聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁(yè)。

          看到這里是不是有許多朋友想要知道這個(gè)HTML語(yǔ)言該怎么去學(xué)習(xí)呢?是需要找老師統(tǒng)一學(xué),還是去圖書(shū)館找專業(yè)書(shū)籍自己學(xué)好呢?不用擔(dān)心,因?yàn)榻裉煲o大家推薦的就是一個(gè)專門(mén)為大家提供各種編程語(yǔ)言教程的學(xué)習(xí)網(wǎng)站。

          這個(gè)網(wǎng)站名叫 runoob,直接在瀏覽器上搜索即可找到。


          圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

          在首頁(yè)可以看到該欄目的第二個(gè)就是關(guān)于HTML的學(xué)習(xí)教程,點(diǎn)擊左邊的方框可以調(diào)整你的課程進(jìn)度,在第一章節(jié)的教程中很清晰地講解了什么是HTML,以及告訴了你一些關(guān)于網(wǎng)站建立的小知識(shí)。

          下方的提示框會(huì)給你提供一些對(duì)HTML零基礎(chǔ)新手的科普,關(guān)于這種標(biāo)記語(yǔ)言應(yīng)該如何進(jìn)行保存,如何查看文件后輟名,如何打開(kāi)代碼文件等等,還會(huì)提供一些專用工具供你學(xué)習(xí)使用。同時(shí)網(wǎng)站會(huì)給你簡(jiǎn)單介紹一些網(wǎng)頁(yè)編程語(yǔ)言的區(qū)別,還有各種用途上的區(qū)分,非常地詳細(xì)。


          圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

          在第三章節(jié)的編輯器一欄里,會(huì)提供給你一些HTML的專用編輯器,例如VS Code,還有sublime text 等實(shí)用工具,在后面會(huì)教你如何將這些HTML必備編輯器下載并安裝,然后在瀏覽器上面運(yùn)行。

          通過(guò)插件還有語(yǔ)言編程的格式我們就能夠?qū)W會(huì)如何制作第一步的標(biāo)題了,剛開(kāi)始的一步比較簡(jiǎn)單,相信大家很快就能學(xué)會(huì)如何在網(wǎng)頁(yè)上顯示自己打入的文字了。之后進(jìn)一步的學(xué)習(xí)就是關(guān)于如何調(diào)整文字段落,還有各種標(biāo)識(shí)的使用。


          圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

          在如何進(jìn)行文字排版編輯的方面,教程中也講述得很詳細(xì),包括一些用戶們常犯的錯(cuò)誤,還有一些網(wǎng)頁(yè)的實(shí)例,甚至是這個(gè)教學(xué)網(wǎng)站上的排版示范都會(huì)進(jìn)行一一講解。

          更深入的章節(jié)會(huì)對(duì)如何進(jìn)行圖像排列,傳輸?shù)确矫孢M(jìn)行細(xì)講,教程中把大部分網(wǎng)站會(huì)使用到的技巧還有排版方式都分成了許多個(gè)小片段,方便大家能夠?qū)γ總€(gè)方面針對(duì)性地學(xué)習(xí)。這些內(nèi)容并不多,幾乎每一個(gè)片段都是用很直白的語(yǔ)言進(jìn)行講解,方便所有人都能夠看懂,并且在下方都會(huì)有更詳細(xì)的術(shù)語(yǔ)解析,還有一些比較難懂的點(diǎn)會(huì)舉例解釋。


          圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

          經(jīng)過(guò)十幾章節(jié)的教學(xué)之后,基本上能夠掌握HTML語(yǔ)言的基本用法,還有一些簡(jiǎn)單的操作了,這個(gè)時(shí)候如果想要進(jìn)階學(xué)習(xí)的話還可以在網(wǎng)站上查找其他的進(jìn)階語(yǔ)言用法,例如CSS, JavaScript等等復(fù)雜一些的語(yǔ)言,相應(yīng)的你也會(huì)學(xué)到更多如何運(yùn)營(yíng)網(wǎng)頁(yè)的方法。

          當(dāng)然如果想要自己建立一個(gè)網(wǎng)站的話,還需要更多資源還有設(shè)備,例如高速的網(wǎng)絡(luò)連接保持網(wǎng)頁(yè)的穩(wěn)定性,以及穩(wěn)定的服務(wù)器,用來(lái)保證自己的網(wǎng)頁(yè)24小時(shí)都能保持流暢可用。不過(guò)這些都是在學(xué)會(huì)了如何建立網(wǎng)頁(yè)之后才考慮的事了。



          現(xiàn)在網(wǎng)上也有許多編程教學(xué),在網(wǎng)上自學(xué)一門(mén)知識(shí)一門(mén)語(yǔ)言變得非常方便,但是僅僅是擁有資源還是不夠的。學(xué)習(xí)如何建立自己的網(wǎng)站還需要大量的努力以及知識(shí)的積累,通過(guò)不斷的練習(xí)還有實(shí)踐才能自如地使用,只有基礎(chǔ)扎實(shí),建立出來(lái)的網(wǎng)站才能夠長(zhǎng)久。但還需要大家能夠行動(dòng)起來(lái),只有去學(xué)習(xí)去實(shí)踐才能夠真正學(xué)會(huì)東西,希望這個(gè)教學(xué)網(wǎng)站推薦能夠幫到更多人!

          由于漢字的特殊性,在css網(wǎng)頁(yè)布局中,中文排版有別于英文排版。排版是一個(gè)麻煩的問(wèn)題,小編認(rèn)為,作為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)頁(yè)制作人員,掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的,所以今天特意總結(jié)了幾個(gè)簡(jiǎn)單實(shí)用的技巧,希望對(duì)大家有所幫助。

          Web前端教程

            一、如何設(shè)定文字字體、顏色、大小等

            font-style設(shè)定斜體,比如font-style:italic

            font-weight設(shè)定文字粗細(xì),比如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)簽,左右、段前段后的空白,都可以通過(guò)margin來(lái)控制。

            比如

            p{

            margin:18px 6px 6px 18px;/*分別是上、右、下、左,十二點(diǎn)開(kāi)始的順時(shí)針?lè)较?/

            }

            而text-align則用于文字的對(duì)齊方式。

            比如

            p{

            text-align:center;/*居中對(duì)齊*/

            }

            除了居中對(duì)齊之外,對(duì)齊方式還有左對(duì)齊、右對(duì)齊和兩端對(duì)齊,對(duì)應(yīng)的屬性值分別為left、right、justify。

            提示:由于默認(rèn)的margin值會(huì)導(dǎo)致頁(yè)面排版出現(xiàn)問(wèn)題,特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。

            三、豎排文字—使用writing-mode

            writing-mode屬性有兩個(gè)值lr-tb和tb-rl,前者是默認(rèn)的左-右、上-下,后者是上-下、右-左。

            寫(xiě)法如

            p{

            writing-mode:tb-rl;

            }

            四、使用list-style美化列表

            如果我們的排版涉及到列表,不妨考慮為它添加些項(xiàng)目符號(hào)進(jìn)行美化。

          在CSS里,項(xiàng)目符號(hào)包括disc(實(shí)心圓點(diǎn))、circle(空心圓圈)、square(實(shí)心方塊)、decimal(阿拉伯?dāng)?shù)字)、lower-roman(小寫(xiě)羅馬數(shù)字)、upper-roman(大寫(xiě)羅馬數(shù)字)、lower-alpha(小寫(xiě)英文字母)、upper-alpha(大寫(xiě)英文字母)、none(無(wú))。

            嘿嘿!我們可用的項(xiàng)目符號(hào)數(shù)量不少喔,但美中不足的是我們不能為它們?cè)O(shè)定大小,也不能設(shè)定垂直方向上的對(duì)齊。

            如果我們想設(shè)定一個(gè)列表的項(xiàng)目符號(hào)為方塊,可以這樣寫(xiě):

            li{

            list-style:square;

            }

            小編在這里提醒大家一下:當(dāng)一個(gè)項(xiàng)目列表的左外邊距設(shè)為零的時(shí)候,list-style-position:outside的項(xiàng)目符號(hào)不會(huì)顯示。

            五、使用text-overflow 實(shí)現(xiàn)固定寬度漢字截?cái)?/strong>

            用后臺(tái)語(yǔ)言可以對(duì)從數(shù)據(jù)庫(kù)里的字段內(nèi)容做截?cái)嗵幚?,如果想?duì)列表應(yīng)用該樣式,我們可以這樣寫(xiě):

            li{

            overflow:hidden;

            text-overflow:ellipsis;

            white-space:nowrap;

            }

            六、首字下沉

            如果你想制作首字下沉效果,不妨考慮偽對(duì)象:first-letter并配合font-size、float屬性。

            p:first-letter{

            padding:6px;

            font-size:32pt;

            float:left;

            }

            七、首行縮進(jìn)—使用text-indent

            text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個(gè)漢字。

          可以這么寫(xiě)

            p{

            text-indent:2em;/*em是相對(duì)單位,2em即現(xiàn)在一個(gè)字大小的兩倍*/

            }

            注意:如果font-size是12px的話,那么text-indent:2em則代表縮進(jìn)24px。

            八、固定寬度漢字(詞)折行—使用word-break

            在排版的時(shí)候,你是否為一個(gè)詞組,其中一個(gè)字出現(xiàn)在上面而另一個(gè)字折斷到下一行去而發(fā)愁呢?不用愁,這時(shí)使用word-break就可以輕松解決問(wèn)題了。

            九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性

            最后小編向大家介紹一下ruby標(biāo)簽和ruby-align屬性 。這是一個(gè)比較冷門(mén)的技巧,可能平時(shí)使用不多,但小編覺(jué)得不妨提供給大家預(yù)防不時(shí)之需。

            如果我們想為漢字注音就可以這樣寫(xiě)

            <ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

            然后通過(guò)ruby-align設(shè)置其對(duì)齊方式。

          以上就是今日整理的“Web前端教程:簡(jiǎn)單實(shí)用的CSS網(wǎng)頁(yè)布局中文排版技巧”一文,希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎?以后酷仔每日均會(huì)提供MySQL、Python及Web相關(guān)的教程及習(xí)題,趕快學(xué)習(xí)起來(lái)吧。


          主站蜘蛛池模板: 精品一区二区三区免费视频| 丰满岳乱妇一区二区三区| 精品一区二区三区中文| 99久久精品国产一区二区成人| 国产精品亚洲一区二区无码| 中文字幕无线码一区2020青青 | 国产精品免费一区二区三区四区| 国产在线观看91精品一区| 精品熟人妻一区二区三区四区不卡 | 高清一区二区三区免费视频| 国产成人精品一区二三区在线观看 | 精品少妇人妻AV一区二区| 久久久久人妻精品一区 | 午夜视频久久久久一区 | 中文字幕一区二区三区永久| 国产一区二区三区福利| 日韩人妻无码免费视频一区二区三区| 日本精品视频一区二区| 91视频一区二区三区| 亚洲福利视频一区二区三区| 亚洲午夜精品一区二区| 中文字幕精品一区影音先锋| 久久精品无码一区二区无码 | 日韩精品一区二区三区不卡 | 少妇激情一区二区三区视频| 精品永久久福利一区二区| 精品一区二区三区免费毛片爱 | 亚洲午夜精品一区二区麻豆| 久久久久人妻精品一区三寸| 国内精自品线一区91| 国产伦精品一区二区三区在线观看| 国产精品va一区二区三区| 日韩精品人妻av一区二区三区| 国产亚洲一区二区三区在线不卡 | 日韩中文字幕精品免费一区| 在线视频精品一区| 亚洲高清成人一区二区三区| 99精品国产高清一区二区三区| 久久综合九九亚洲一区| 一本久久精品一区二区| 日韩一区二区三区在线观看|