這篇文章主要介紹html5中的頁面布局怎么做,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)主營卡若網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app開發(fā)定制,卡若h5重慶小程序開發(fā)搭建,卡若網(wǎng)站營銷推廣歡迎卡若等地區(qū)企業(yè)咨詢
瀏覽器中渲染的網(wǎng)頁由許多東西組成-logo、信息文本、圖片、超鏈接、導航結(jié)構(gòu)等等。
HTML5為網(wǎng)頁提供了一系列允許你創(chuàng)建結(jié)構(gòu)化布局的標簽。這些元素通常被稱為語義化標簽,因為它們能夠清楚地給開發(fā)者和瀏覽器傳達它們的意義和目的。本文將討論一些有助于網(wǎng)頁布局的重要的HTML5標簽。
HTML5新元素及其特性
HTML5的語義化標簽以及屬性,可以讓開發(fā)者非常方便地實現(xiàn)清晰的web頁面布局,加上CSS3的效果渲染,快速建立豐富靈活的web頁面顯得非常簡單。
本次學習HTML5的新標簽元素有:
學習這些標簽最好的方法當然就是試著使用它們。雖然現(xiàn)在有很多現(xiàn)成的網(wǎng)頁布局的模板可以方便的拿來用,但是對于初學者來說,自己實現(xiàn)簡單的頁面布局絕對是有必要的。
這里通過一個簡單的頁面布局的例子,來展示上述標簽的使用方法。
示例:模仿博客首頁布局
實現(xiàn)如圖2-1的網(wǎng)頁結(jié)構(gòu),這是一個非常典型的博客頁面:頭部、尾部、水平導航欄、側(cè)邊欄導航以及內(nèi)容。
圖2-1
在圖2-1中已經(jīng)看到,相應標簽實現(xiàn)的區(qū)域用名稱標注了出來,比如頭部Header
在編寫頁面前,有必要說一下:頁面元素由HTML5實現(xiàn),而元素的顯示效果是CSS3渲染的,CSS3的代碼可以和HTML5的代碼放在同一個文件,也可以是獨立的文件,只要在HTML5文件里引用即可。建議最好各自是獨立的文件,這樣的好處有:
1)符合單一職責原則:HTML5頁面就負責管理元素,而CSS3文件只負責對相應HTML5文件顯示效果的渲染,相互獨立,互不相交。
2)降低頁面的復雜度,便于維護:試想,當頁面的元素數(shù)量增到很多的時候,同時在一個頁面里管理元素和元素的顯示屬性,可讀性是該有多差,后期的維護會很蛋疼。
3)加快瀏覽器的加載速度:第2)點的另外一個好處,簡單的頁面自然加載更快。
當然,如果就是習慣HTML5+CSS3放在一個文件里,也未嘗不可,這里也只是建議。
下面來具體實現(xiàn)圖2-1。
分為兩個部分:1)HTML5文件;2)CSS3文件
一.HTML5部分
1. HTML5的文檔聲明
新建index.html文件,如果用的網(wǎng)頁編寫工具已經(jīng)支持HTML5文件類型,那么,應該生成如下的HTML5模板:
1 2 3 4 5 6 7 8 9 | 1 2 3 4 5 6 7 8 9 |
如果網(wǎng)頁編寫工具暫時不支持HTML5也沒關系,自己寫這幾行代碼也很簡單。
說明:第一行:是HTML5對文檔類型的簡化,化繁為簡;(文檔類型的作用:驗證器依據(jù)它來判斷該采用何種規(guī)則去驗證代碼;強制瀏覽器以標準模式渲染頁面)
2. 頭部
1 2 3 |
Header
|
說明:1)header不能喝h2,h3,h4這些標題混為一談。
2)同一個頁面可以包含多個
3. 尾部
1 2 3 |
Footer
|
說明:位置是頁面或者區(qū)塊的尾部,用法和
4. 導航
1 2 3 4 5 6 7 8 |
|
說明:導航的重要性對于一個網(wǎng)頁至關重要,快速方便的導航是留住訪客所必須的。
1)可以被包含在
2)導航一般需要CSS來渲染,隨后將會看到CSS的渲染。
5. 區(qū)塊和文章
1 2 3 4 5 6 7 8 9 |
/*可以包含多個< article>*/
/*article的內(nèi)容*/
/*article的內(nèi)容*/
|
下面是
1 2 3 4 5 6 7 8 9 10 |
Article Header
Without you?I'd be a soul without a purpose.
Article Footer
|
可以看到它可以包含很多元素。
6. 旁白和側(cè)邊欄
1 2 3 4 |
sth. in aside
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Article Header
sth. in aside
Without you?I'd be a soul without a purpose.
Article Footer
|
側(cè)邊欄,不是旁白!看做是右面的一個區(qū)域,包含鏈接,用
1 2 3 4 5 6 7 8 9 10 |
|
到這里,每種標簽的使用就是這樣了,下面是HTML5的完整代碼index.html文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
body
Header
Section
article
Article Header
Article Aside
Without you?I'd be a soul without a purpose.
Article Footer
article
Article Header
Article Aside
Without you?I'd be a soul without a purpose.
Article Footer
Section
Sidebar Header
Footer
|
二.CSS3部分
對于CSS文件,最好能夠根據(jù)HTML文件的樹結(jié)構(gòu),對應到相應的元素,有組織有層次的進行元素屬性的渲染。這樣既能夠不遺漏元素,又便于查找修改。當然根據(jù)個人的習慣來定就好。
CSS3的屬性定義更加豐富,這里不再贅述,網(wǎng)上有CSS3參考手冊,用的時候查一查就好。更或者,連查都懶得查,還有專門的CSS3控件代碼生成工具和網(wǎng)站,例如http://css-tricks.com/examples/,豐富的控件效果示例可以下載。還可以搜一些類似的。
這里直接貼出CSS3代碼 style.css文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | @charset "utf-8"; /* CSS Document */ body { /*整個頁面的屬性設定*/ background-color: #CCCCCC; /*背景色*/ font-family: Geneva, sans-serif; /*可用字體*/ margin: 10px auto; /*頁邊空白*/ max-width: 800px; border: solid; /*邊緣立體*/ border-color: #FFFFFF; /*邊緣顏色*/ }
h3 { /*設定整個body內(nèi)的h3的共同屬性*/ text-align: center; /*文本居中*/ }
header { /*整個body頁面的header適用*/ background-color: #F47D31; color: #FFFFFF; text-align: center; }
article { /*整個body頁面的article適用*/ background-color: #eee; }
p { /*整個body頁面的p適用*/ color: #F36; }
nav,article,aside { /*共同屬性*/ margin: 10px; padding: 10px; display: block; }
header#page_header nav { /*header#page_header nav的屬性*/ list-style: none; margin: 0; padding: 0; }
header#page_header nav ul li { /*header#page_header nav ul li屬性*/ padding: 0; margin: 0 20px 0 0; display: inline; }
section#posts { /*#posts 的section屬性*/ display: block; float: left; width: 70%; height: auto; background-color: #F69; }
section#posts article footer { /*section#posts article footer屬性*/ background-color: #039; clear: both; height: 50px; display: block; color: #FFFFFF; text-align: center; padding: 15px; }
section#posts aside { /*section#posts aside屬性*/ background-color: #069; display: block; float: right; width: 35%; margin-left: 5%; font-size: 20px; line-height: 40px; }
section#sidebar { /*section#sidebar屬性*/ background-color: #eee; display: block; float: right; width: 25%; height: auto; background-color: #699; margin-right: 15px; }
footer#page_footer { /*footer#page_footer屬性*/ display: block; clear: both; width: 100%; margin-top: 15px; display: block; color: #FFFFFF; text-align: center; background-color: #06C; |
以上是“html5中的頁面布局怎么做”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!