第31章項(xiàng)目實(shí)戰(zhàn)-pc端固定布局

31-PC端固定布局學(xué)習(xí)要點(diǎn)主講教師：本課程由北風(fēng)網(wǎng)和瓢城Web提本章主要開始使用HTML5CSS3來構(gòu)Web頁面，第一個(gè)項(xiàng)目PC端一．大綱算法在HTML5中有一個(gè)很重要的概念，叫做HTML5大綱算法(HTML5Outliner)，它的用途是為用戶提供一份頁面的信息結(jié)構(gòu)比如我們經(jīng)常使用的手冊就是一個(gè)非常好的大綱結(jié)合理的使用HTML5元素，可以生成一個(gè)非常清晰的文檔大綱，我們可以通過各種工具去查看當(dāng)前頁面，比如谷歌和火狐的插件可以查看當(dāng)前的HTML5大綱。這里我們推薦使用一個(gè)服務(wù)器端的測試工具：HTML5Outliner，如下：測試工具：這個(gè)工具可以上傳本地html文件，也可以填寫URL，或者直接在多行文本框上編寫HTML5代碼均可了解大綱。通過上一節(jié)課的代碼編寫，發(fā)現(xiàn)這個(gè)頁面的大綱非常的難看，出現(xiàn)三個(gè)UnitledSction，這個(gè)意思表示頁面此處缺少大綱標(biāo)題，不規(guī)范。如果你的頁面在這里測試，大綱都比較清晰，那么HTM5頁面是比較規(guī)范的。//大 結(jié)UntitledUntitledUntitledsection和首先，我們暫不探討怎么讓html5頁面大綱合乎規(guī)范。先探討一下section和div的div元素在html5之前就是非常常用的，它本身沒有任何語義，用來頁面布局CSS樣式以及JS調(diào)用。那么，div的用途已經(jīng)說的很清楚了1.如果是頁面布局，且不是header、footer之類的專屬區(qū)域，都應(yīng)該使用div；3.如果想對一段內(nèi)容進(jìn)行JS控制，那么也應(yīng)該使用divhtml5中，section并不是用來取代div的。在基礎(chǔ)課程中已經(jīng)簡單的了解過，它是具有語義的文檔。表示一段文檔中的章節(jié)，比如包含一個(gè)標(biāo)題和一個(gè)段落，而大綱規(guī)范中，<p>Bootstrap是一款html5開源框架通過上訴說明，我們對于下方的section，增加一個(gè)h2即可實(shí)現(xiàn)大綱要求。最終//大 結(jié)1.Untitled1.Untitled那么發(fā)現(xiàn)最后一個(gè)UntiledSctin已經(jīng)擁有了標(biāo)題，已經(jīng)符合規(guī)范。對于前面還有兩個(gè)，待會兒再說。現(xiàn)在再探討一個(gè)問題，既然div用于沒有任何語義的布局和樣式定義，那么我們就需要探討一下如下代碼用iv還是secion。//這里改用section還是div呢<section<h1class="logo">瓢城旅行社<ul從結(jié)構(gòu)上來看，section需要包含至少一個(gè)h1~h6，這里是符合的。但容易的部分是，section是某個(gè)區(qū)域章節(jié)的標(biāo)題，h1其實(shí)是整個(gè)的標(biāo)題。而ul部分是導(dǎo)航超section并不是代替div的元素。//比較合理的做<div<h1class="logo">瓢城旅行社<ul這里大綱進(jìn)行了一個(gè)很有趣的變化，如下//改變后的大1.Untitled是哪個(gè)元素下的呢？答案是：body元素。我們只要在body元素下創(chuàng)建一個(gè)h1，寫上標(biāo)題//增加body標(biāo)題，解決大綱問<h1>Body大標(biāo)題雖然在bodybody創(chuàng)建一個(gè)h1啊。難道創(chuàng)建后，再隱藏這種多此一舉的方法嗎？這個(gè)問題，稍后再看，先再探三．結(jié)構(gòu)分析首先，探討一下nav元素。這個(gè)元素本質(zhì)上是用來存放一組作為導(dǎo)航的，比如ul。我LOGO+導(dǎo)航，我們可以理解為header頭部，所以，最終改寫成如下結(jié)構(gòu)：//頭部元素?fù)Q成了header，nav元素只包含<header<div<h1class="logo">瓢城旅行社<navsection和nav元素大綱要求有標(biāo)題h1~h6，但section必須有才規(guī)范，而如果沒有標(biāo)題，也是合理的。當(dāng)然，添加上標(biāo)題會讓大綱更加好看，頁面中可以隱藏//最終格式如下<header<div<h1cl