您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

細(xì)節(jié)論成?。o(wú)css時(shí)網(wǎng)頁(yè)的可讀性

網(wǎng)頁(yè)設(shè)計(jì)之細(xì)節(jié)決定成敗,網(wǎng)頁(yè)加載緩慢、加載丟失正常css怎么辦,網(wǎng)頁(yè)一團(tuán)糟,不忍直視~ 在無(wú)css加載的情況下,對(duì)網(wǎng)頁(yè)可讀性進(jìn)行的優(yōu)化也是很必要的。

先上示例,首頁(yè)酒店模塊的效果圖如下:



代碼結(jié)構(gòu)如下:




  • 酒店



  • 北京



  • 上海







  • 北京酒店列表



  • 北京酒店列表



  • 上海酒店列表



  • 上海酒店列表




這種結(jié)構(gòu)在顯示上沒有任何問(wèn)題,切換城市時(shí)下面的列表會(huì)相應(yīng)改變。但當(dāng)無(wú)法正常加載css時(shí)顯示效果就比較杯具了,截圖如下:



接下去是其它城市的列表,太長(zhǎng)了圖片沒有截全。我們需要的至少是城市與所屬它的列表顯示在一起,在視覺上歸屬同一個(gè)模塊,也就是說(shuō)要在代碼結(jié)構(gòu)上把它們按照業(yè)務(wù)邏輯重現(xiàn)出來(lái):




  • 北京







    • 北京酒店列表



    • 北京酒店列表











  • 上海







    • 上海酒店列表



    • 上海酒店列表








這樣當(dāng)頁(yè)面出現(xiàn)no css的時(shí)候顯示效果就比較接近真實(shí)需求:



到這里就離成功不遠(yuǎn)了,接下來(lái)的問(wèn)題是如何用現(xiàn)在的 dl, dt, dd 實(shí)現(xiàn)想要的視覺效果。

1. 先給所有 dl 的外層 div 加樣式:position: relative,再給 dd 設(shè)置 position: absolute,這樣列表就可以脫離 dl 的文本流了,切換列表時(shí)保證它們顯示在同一個(gè)位置;

2. 城市橫排顯示,這時(shí)設(shè) dl 為浮動(dòng) float: left,再刷新果然橫過(guò)去了。不過(guò)現(xiàn)在笑還早了點(diǎn),不要忘了還有那萬(wàn)惡的 IE6 要兼容:給 dt 設(shè)置浮動(dòng)并轉(zhuǎn)行內(nèi)元素,否則會(huì)有多余的空隙 float: left; display: inline; 再刷新就OK了;

3. 補(bǔ)充一點(diǎn)為什么要在 dd 中加 ul,這要視頁(yè)面結(jié)構(gòu)而定,每一條除了標(biāo)題還有價(jià)格,還有個(gè)需要轉(zhuǎn)化的人民幣符號(hào) ¥,如果直接用 a 鏈接就需要大批量行內(nèi)轉(zhuǎn)塊元素,比較耗性能。最初想用多個(gè) dd,但因?yàn)橛薪^對(duì)定位的原因列表會(huì)重疊在一起,所以更換方案。


[教程作者:點(diǎn)頭豬]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd2958.html
深入了解viewport和px
css超出div長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示
圖趣網(wǎng)微信
建議反饋
×