移動設(shè)備html5頁面布局(編輯修改稿)
2025-06-01 22:33 本頁面
【文章內(nèi)容簡介】 HTML5移動 Web開發(fā) 第 25頁 HTML5移動 Web開發(fā) 第 26頁 HTML5移動 Web開發(fā) 第 27頁 三段式結(jié)構(gòu)是一種最基本布局方式 ? 單視圖并不一定都有 head或 foot，所以 Header、 Footer使用虛線來表示。多數(shù)應(yīng)用中還會有導(dǎo)航條（ Navigatior），但一般情況下導(dǎo)航條會被計算為 Header或 Content的一部分，而不會獨立存在。 HTML5移動 Web開發(fā) 第 28頁 使用 HTML5創(chuàng)建標準的移動 Web頁面 1. 從前圖 UI布局可以看出，主要區(qū)域包括 header，正文 article。 2. header標簽包含標題和 nav導(dǎo)航列表。 3. section標簽包含全部 article中文內(nèi)容，每條article相當于列表的一項值。 HTML5移動 Web開發(fā) 第 29頁 HTML5移動 Web開發(fā) 第 30頁 請問，修改了那些地方？ HTML5移動 Web開發(fā) 第 31頁 HTML5移動 Web開發(fā) 第 32頁 課堂練習 ? 利用 HTML5創(chuàng)建一個簡單的 web頁面，頁面規(guī)劃如下圖： header section 導(dǎo)航 aside 導(dǎo)航 article footer HTML5移動 Web開發(fā) 第 33頁 課后作業(yè) ? 已給代碼是一個人的簡歷的網(wǎng)頁描述。 ? 請修改代碼， 選擇合適的布局方式 ，使其可在移動端正常瀏覽，并把其中的顯示的內(nèi)容修改為你個人的信息（正文）。 ? 源代碼見： resume_demo原版 HTML5移動 Web開發(fā) 第 34頁 附錄 ? 我們來看一下流行的頁面布局有哪些？ ? 這些布局不局限于 web，泛指所有移動應(yīng)用的頁面布局。 HTML5移動 Web開發(fā) 第 35頁 1，豎排列表 ? 豎排列表是最常用的布局之一。手機屏幕一般是列表豎屏顯示的，文字是橫屏顯示的，因此豎排列表可以包含比較多的信息。列表長度可以沒有限制，通過上下滑動可以查看更多內(nèi)容。豎排列表在視覺上整齊美觀，用戶接受度很高，常用于并列元素的展示，包括目錄、分類、內(nèi)容等。 HTML5移動
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1