千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  >  網(wǎng)頁(yè)排版布局常見(jiàn)問(wèn)題有哪些?

網(wǎng)頁(yè)排版布局常見(jiàn)問(wèn)題有哪些?

來(lái)源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-06-06 11:40:00 1654486800

  關(guān)于排版布局,好的頁(yè)面排版重點(diǎn)突出,看起來(lái)舒適不費(fèi)勁,整體簡(jiǎn)潔大方,更重要的是能讓用戶更好的更方便的瀏覽網(wǎng)站,而在書(shū)寫的過(guò)程中,無(wú)論你寫的是什么代碼,都會(huì)犯一些小錯(cuò)誤,而小錯(cuò)誤往往不起眼難以引起注意,結(jié)果花大量的時(shí)間來(lái)調(diào)試和排錯(cuò).查看下面這份CSS網(wǎng)頁(yè)布局中易犯的7個(gè)小錯(cuò)誤,努力的修正可能會(huì)犯的錯(cuò)誤,加速你的前端開(kāi)發(fā)效率。所以列舉以下網(wǎng)頁(yè)在排版中常見(jiàn)的問(wèn)題

網(wǎng)頁(yè)排版布局常見(jiàn)問(wèn)題有哪些

  **1: 每行文字太多**

  用戶在閱讀許多行文字時(shí)間久了會(huì)引起眼睛的疲勞,在從一行到另一行時(shí)讀者不得不經(jīng)常移動(dòng)他們的眼睛和頭部,而這種讓人疲憊的布局模式是不受歡迎的,經(jīng)網(wǎng)絡(luò)有關(guān)調(diào)查表明每行文字保持文字在50 - 60個(gè)字符以下,看起來(lái)最為舒適,那這就要求在進(jìn)行文字描述的時(shí)候盡可能的簡(jiǎn)潔簡(jiǎn)短。

  **2: 沒(méi)有足夠的行間距**

  行間距能改善整頁(yè)中文字塊的閱讀效果,這樣做是為了當(dāng)讀者閱讀下一行的時(shí)候不會(huì)找不到他們的位置.太小太密集的文字可能引起一種受壓迫感。不同的字體需要不同的行間距這很重要?;蚨嗷蛏傩枰淖儼姹镜母叨葋?lái)降低頁(yè)面中文字之間的密集程度,因?yàn)轫?yè)面中的文本重點(diǎn)突出有引導(dǎo)用戶瀏覽的作用,所以要權(quán)衡好文本之間的間距也是非常重要的.

  **3: 太多的級(jí)別的文本沒(méi)有區(qū)分重點(diǎn)**

  在一頁(yè)面上有太多的字體可能會(huì)使注意力不集中和不能突出重點(diǎn)。頁(yè)面中的文字有些是需要突出讓用戶一眼能看到的重要文字,那么這模塊就要弱化其他的文字,比如通過(guò)文本大小,顏色,文本粗細(xì)等方式來(lái)弱化。太多種字體可能會(huì)引起用戶感覺(jué)得這個(gè)頁(yè)面中找不到重點(diǎn),這可能會(huì)使用戶錯(cuò)過(guò)一些重要的東西,所以通常字體的選擇器在3個(gè)甚至更少,

  **4: 新手程序員對(duì)html標(biāo)簽的語(yǔ)法規(guī)則的檢查**

  HTML5的語(yǔ)法規(guī)則沒(méi)有之前版本的嚴(yán)格,包容性強(qiáng)大,但是我們盡可能的遵循他的語(yǔ)法規(guī)則,而關(guān)于標(biāo)簽的書(shū)寫容易丟失的就是標(biāo)簽中所出現(xiàn)的一些符號(hào)容易丟失或者寫成中文符號(hào),比如尖括號(hào),引號(hào),斜杠等,在一個(gè)就是標(biāo)簽之間的嵌套關(guān)系,即使是非常熟練的程序員也經(jīng)常弄錯(cuò)嵌套關(guān)系,有時(shí)候并不是自己寫錯(cuò)了嵌套關(guān)系,而是因?yàn)閬G失了某一個(gè)符號(hào)引起的,比如斜桿

  **5、檢查CSS語(yǔ)法是否正確**

  CSS的語(yǔ)法首先是選擇器{屬性:值;} 這條語(yǔ)句中出現(xiàn)的符號(hào)都是英文符號(hào),常見(jiàn)的是拼寫錯(cuò)誤,冒汗成了等號(hào),丟失分號(hào),丟失大括號(hào)等。可以在瀏覽器中打開(kāi)開(kāi)發(fā)者工具中審查,錯(cuò)誤的寫法會(huì)直接體現(xiàn)出來(lái)可以利用CleanCSS工具來(lái)檢查 CSS的拼寫錯(cuò)誤

  **6、快速找出錯(cuò)誤模塊**

  經(jīng)常看到有小伙伴在寫也頁(yè)面的時(shí)候發(fā)現(xiàn)底下的元素突然跑到了已經(jīng)寫好的區(qū)域,或者嵌套關(guān)系出現(xiàn)了問(wèn)題,這時(shí)候打亂了整個(gè)頁(yè)面的布局結(jié)構(gòu),這時(shí)候我們可以使用排除法,通常在開(kāi)發(fā)都是模塊化開(kāi)發(fā),只要按照順序?qū)⒚總€(gè)模塊的div逐個(gè)注釋掉,直到注釋掉某個(gè)模塊后頁(yè)面顯示正常,則最后注釋掉的模塊就是錯(cuò)誤發(fā)生的模塊。

  **7、頁(yè)面樣式初始化**

  我們都知道html中有些標(biāo)簽帶有默認(rèn)的內(nèi)外邊距或者間距,這些間距是我們不需要的,同時(shí)在不同的瀏覽器中某些間距解析大小還不一致,這就極大的影響我們對(duì)頁(yè)面的布局,這些屬性包括margin、padding等。因此最好在開(kāi)發(fā)前根據(jù)需求將出現(xiàn)的標(biāo)簽對(duì)應(yīng)的取消他們的默認(rèn)margin、padding值,將他們的值設(shè)置為0等。

  上面的網(wǎng)站布局方式只是一些常見(jiàn)的企業(yè)類網(wǎng)站頁(yè)面布局,布局的方式還有更多。實(shí)際上,布局就像是擺積木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原則即可,并沒(méi)有規(guī)定一定要怎么布局,或者這種布局方式要比那種更好,只能說(shuō)某種布局方式更為合適某個(gè)頁(yè)面而已。所以,大家多做嘗試,從你手頭正在做的項(xiàng)目開(kāi)始,嘗試一下不同的布局方式,給你的設(shè)計(jì)增加一些創(chuàng)意和新鮮感。更多關(guān)于web培訓(xùn)的問(wèn)題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn),采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式,擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
抖音小店照片要求尺寸多大

在抖音平臺(tái)開(kāi)設(shè)小店已經(jīng)成為了越來(lái)越多人的選擇,相信大家已經(jīng)在各大社交平臺(tái)上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

2023-10-08 16:14:25
抖音招商團(tuán)長(zhǎng)托管服務(wù)費(fèi)怎么退回來(lái)

抖音招商團(tuán)長(zhǎng)托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動(dòng)其他創(chuàng)作者成為團(tuán)隊(duì)成員的用戶提供的一種服務(wù)。通過(guò)該服務(wù),招商團(tuán)長(zhǎng)可以自主組建團(tuán)隊(duì)并得到...詳情>>

2023-10-08 16:08:53
抖音小店怎么做代銷

抖音已經(jīng)成為了一個(gè)非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

2023-10-08 15:28:41
怎樣開(kāi)抖音小店帶貨賺錢

隨著直播帶貨的火熱,越來(lái)越多的人開(kāi)始嘗試通過(guò)抖音小店來(lái)開(kāi)展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購(gòu)買直播中產(chǎn)品時(shí)就實(shí)現(xiàn)購(gòu)...詳情>>

2023-10-08 15:06:36
能不能幫我打開(kāi)抖音小店店鋪呢怎么弄

抖音小店是近年來(lái)非?;鸨囊粋€(gè)網(wǎng)絡(luò)業(yè)務(wù),也是提供了很多商業(yè)機(jī)會(huì)的平臺(tái)。對(duì)于一個(gè)創(chuàng)業(yè)者而言,開(kāi)設(shè)抖音小店是一個(gè)不錯(cuò)的選擇。但是,許多小店...詳情>>

2023-10-08 15:01:21
快速通道