Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 7-網(wǎng)頁(yè)布局VIP

Web前端技術(shù)（html5+css3+響應(yīng)式設(shè)計(jì)）第7章

網(wǎng)頁(yè)布局問(wèn)題的導(dǎo)入網(wǎng)頁(yè)的信息是可以用html語(yǔ)言進(jìn)行標(biāo)記。如何讓這些元素，整齊、美觀的排放在網(wǎng)頁(yè)，就是網(wǎng)頁(yè)的布局要解決的問(wèn)題。網(wǎng)頁(yè)版面的設(shè)計(jì)延續(xù)了傳統(tǒng)紙媒的特點(diǎn)，把內(nèi)容分布在一列或多列中，又比傳統(tǒng)的紙媒更靈活，它可以根據(jù)內(nèi)容自適應(yīng)寬度和高度。導(dǎo)入問(wèn)題教學(xué)內(nèi)容3如何實(shí)現(xiàn)布局2Html5中頁(yè)面標(biāo)簽1常見(jiàn)的布局形式4布局案例7.1網(wǎng)頁(yè)布局思想網(wǎng)頁(yè)布局采用了傳統(tǒng)紙媒的“網(wǎng)格”布局思想，這種布局優(yōu)勢(shì)在于：基于網(wǎng)格的設(shè)計(jì)可以使大量的頁(yè)面保持很好的一致性，視覺(jué)風(fēng)格統(tǒng)一。均勻的網(wǎng)格以合理的比例將頁(yè)面劃分為一定數(shù)目的等寬列，這樣在設(shè)計(jì)中產(chǎn)生很好的均衡感。使用網(wǎng)格可以幫助開(kāi)發(fā)者把標(biāo)題、導(dǎo)航、文字、圖片等各種元素合理地分配到適當(dāng)?shù)膮^(qū)域，這樣可以為內(nèi)容繁多的頁(yè)面創(chuàng)建出一種良好的秩序。網(wǎng)格設(shè)計(jì)不但使網(wǎng)頁(yè)版面布局產(chǎn)生一致性，也可以通過(guò)跨列的方式，創(chuàng)建出各種變化的形式，這樣既保持了頁(yè)面的一致性，有可以打破網(wǎng)格的呆板性。網(wǎng)格設(shè)計(jì)可大大提高整個(gè)頁(yè)面的可讀性。如果一行文字過(guò)長(zhǎng)，讀者在換行時(shí)，眼球就必須跟隨運(yùn)動(dòng)，造成閱讀的疲勞。通過(guò)網(wǎng)格，可以把一行文字的長(zhǎng)度限制在適當(dāng)?shù)姆秶鷥?nèi)，使得閱讀既方便又舒適。7.1版面布局網(wǎng)頁(yè)布局的原理是將頁(yè)面在整體上用進(jìn)行<div>標(biāo)記的分塊，然后對(duì)各個(gè)塊用CSS進(jìn)行定位，最后再在各個(gè)版塊中添加相應(yīng)樣式。大多數(shù)的網(wǎng)站采用一套通用的排版模式，頁(yè)眉、頁(yè)腳、側(cè)邊欄和內(nèi)容區(qū)域。頁(yè)眉，頁(yè)腳的內(nèi)容在每個(gè)頁(yè)面都是一樣。只有中間的內(nèi)容各不相同。這樣形成了整體風(fēng)格統(tǒng)一。7.1常見(jiàn)的幾種布局單列布局7.1常見(jiàn)的幾種布局——二列布局

（a）（b）二列布局二列布局7.1常見(jiàn)的幾種布局——二列布局7.1常見(jiàn)的幾種布局——三列布局

三列布局7.1常見(jiàn)的幾種布局——混合布局

混合布局

混合布局7.1常見(jiàn)的幾種布局——混合布局常見(jiàn)的幾種布局——混合布局常見(jiàn)的幾種布局——混合布局7.2頁(yè)面布局標(biāo)簽 HTML5提供了用于語(yǔ)義化的標(biāo)簽定義頁(yè)面結(jié)構(gòu)的元素，主要包括如下幾個(gè)元素：1.header常用于設(shè)置一個(gè)頁(yè)面的頭部2.footer常用于設(shè)置一個(gè)頁(yè)面的底部區(qū)域。3.nav常用來(lái)定義導(dǎo)航欄。4.section元素用來(lái)定義文檔中的區(qū)塊，可視為一個(gè)區(qū)域分組元素，用來(lái)給頁(yè)面上的內(nèi)容分塊。

7.2頁(yè)面布局標(biāo)簽5.article元素用于定義一個(gè)獨(dú)立的內(nèi)容區(qū)塊，比如一篇文章、一篇博客、一個(gè)帖子、論壇的一段用戶評(píng)論，一篇新聞消息等。article是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語(yǔ)義,代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。6.aside元素通常用來(lái)設(shè)置側(cè)邊欄，用于定義元素之外的內(nèi)容，前提是這些內(nèi)容與article元素內(nèi)的內(nèi)容相關(guān)，同時(shí)也可作為article內(nèi)部元素使用，作為主要內(nèi)容的附屬信息，比如與主內(nèi)容有關(guān)的參考資料，名詞解釋7.3如何實(shí)現(xiàn)布局單列布局標(biāo)簽二列布局的標(biāo)簽7.3如何實(shí)現(xiàn)布局外面加一個(gè)div，加載class類.container，目的的居中對(duì)齊7.3如何實(shí)現(xiàn)布局三列布局結(jié)構(gòu)標(biāo)簽外面加一個(gè)div，加載class類.container7.3三列布局的css樣式設(shè)置header,nav,.container,footer{

width:1000px;//寬度為1000~1200px之間

margin:0auto;//保證居中}header{height:100px;}//根據(jù)情況設(shè)定高度nav{height:40px;//根據(jù)情況設(shè)定高度margin-bottom:5px;}.leftside{ width:25%;//根據(jù)情況設(shè)定寬度

float:left;//

一定要設(shè)}.rightside{ width:25%;

float:left;根據(jù)情況設(shè)定高度}section{ width:49%;

float:left;根據(jù)情況設(shè)定高度 margin:05px5px;}footer{

clear:both;//清除浮動(dòng)的影響 height:80px;7.3三列布局的css樣式設(shè)置7.4綜合案例步驟搭建Html結(jié)構(gòu)添加主要的類名寫(xiě)樣式1、公共的樣式2、頁(yè)眉的樣式3、主體的樣式4、頁(yè)腳的樣式5、交互的設(shè)計(jì)小結(jié)常見(jiàn)布局