移動(dòng)設(shè)備html5頁(yè)面布局(參考版)
2025-05-08 22:33本頁(yè)面
【正文】 HTML5移動(dòng) Web開(kāi)發(fā) 第 57頁(yè) 。 ? 請(qǐng)修改代碼， 選擇合適的布局方式， 使其可在移動(dòng)端正常瀏覽，并把其中的顯示的內(nèi)容修改為你個(gè)人的信息（正文）。在多列布局中尤其如此。 ? 但是流體布局也有缺點(diǎn)。 HTML5移動(dòng) Web開(kāi)發(fā) 第 54頁(yè) 例 ? 分別運(yùn)行 ? 有什么不同？ HTML5移動(dòng) Web開(kāi)發(fā) 第 55頁(yè) 流體布局 ? 就是網(wǎng)頁(yè)縮小和放大時(shí)網(wǎng)頁(yè)布局會(huì)隨著瀏覽器的大小而改變！ ? 由于頁(yè)面中的寬度值都是百分?jǐn)?shù)，所以拉伸、縮小瀏覽器的大小，布局的寬度會(huì)隨之變化兒不會(huì)出現(xiàn)橫向滾動(dòng)條。標(biāo)簽方式比較動(dòng)感的，增加了應(yīng)用的趣味性，但使用場(chǎng)景較有限。Path和一些瀏覽器的書簽，均采用了側(cè)邊欄的設(shè)計(jì)。抽屜在交互體驗(yàn)上更加自然，和原界面融合較好。 HTML5移動(dòng) Web開(kāi)發(fā) 第 48頁(yè) HTML5移動(dòng) Web開(kāi)發(fā) 第 49頁(yè) 8，抽屜 /側(cè)邊欄 ? 抽屜也是將內(nèi)容先藏起來(lái)，在需要時(shí)再展開(kāi)。彈出框可在原有界面上進(jìn)行操作，不必跳出界面，體驗(yàn)比較連貫。 HTML5移動(dòng) Web開(kāi)發(fā) 第 46頁(yè) HTML5移動(dòng) Web開(kāi)發(fā) 第 47頁(yè) 7，彈出框 ? 彈出框很常見(jiàn)，也屬于布局設(shè)計(jì)的一種。手風(fēng)琴可以減少界面跳轉(zhuǎn)，與樹形結(jié)構(gòu)相比，手風(fēng)琴減少點(diǎn)擊次數(shù)，提高操作效率。用戶點(diǎn)擊分類可展開(kāi)顯示二級(jí)內(nèi)容，在不用的時(shí)候，內(nèi)容是隱藏的。它的不足是界面比較擁擠。 HTML5移動(dòng) Web開(kāi)發(fā) 第 42頁(yè) HTML5移動(dòng) Web開(kāi)發(fā) 第 43頁(yè) 5，多面板 ? 多面版的布局常見(jiàn)于 PAD終端，手機(jī)上也會(huì)用到。與傳統(tǒng)的一級(jí)一級(jí)的架構(gòu)方式對(duì)比，此種架構(gòu)方式可以減少用戶的點(diǎn)擊次數(shù)，提高效率。雖然它有時(shí)候給人設(shè)計(jì)老套的感覺(jué)，不過(guò)它的一些變體目前比較流行，比如 METRO風(fēng)格，一行兩格的設(shè)計(jì)等。 HTML5移動(dòng) Web開(kāi)發(fā) 第 38頁(yè) HTML5移動(dòng) Web開(kāi)發(fā) 第 39頁(yè) 3，九宮格 ? 九宮格是非常經(jīng)典的設(shè)計(jì)，展示形式簡(jiǎn)單明了，用戶接受度很廣。受屏幕寬度限制，它可顯示的數(shù)量較少，但可通過(guò)左右滑動(dòng)屏幕或點(diǎn)擊箭頭查看更多內(nèi)容，不過(guò)這需要用戶進(jìn)行主動(dòng)探索。 HTML5移動(dòng) Web開(kāi)發(fā) 第 36頁(yè) HTML5移動(dòng) Web開(kāi)發(fā) 第 3
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1