HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 呂麥絲 第9、10章 設(shè)計(jì)列表樣式

掌握設(shè)計(jì)列表掌握定義列表樣式理解列表布局本章任務(wù)? 任務(wù)1：設(shè)計(jì)列表? 任務(wù)2：定義列表樣式? 任務(wù)3：案例實(shí)戰(zhàn)——列表布局導(dǎo)航菜單．．．．任務(wù)1設(shè)計(jì)列表任務(wù)描述本案例是一個(gè)常見的菜單導(dǎo)航，由兩個(gè)無序列表嵌套顯示。通過鼠標(biāo)浮動(dòng)效果，可以把隱藏的二級(jí)菜單顯示出來。圖10-1-1：列表嵌套導(dǎo)航?

任務(wù)實(shí)現(xiàn)任務(wù)分析1. 設(shè)計(jì)一個(gè)父級(jí)元素，寬度為

100%，高度為

55px。2. 定義一個(gè)無序列表，并且在里面嵌套<a>標(biāo)簽，設(shè)計(jì)<a>標(biāo)簽的樣式，使文字居中顯示。3. 在<li>中間嵌套一個(gè)無序列表，可以設(shè)置其初始狀態(tài)為隱藏，當(dāng)鼠標(biāo)經(jīng)過其父級(jí)<li>時(shí)設(shè)置顯示。?

任務(wù)實(shí)現(xiàn)掌握無序列表的基本使用方法，列表嵌套使用方法以及列表與鼠標(biāo)浮動(dòng)事件相結(jié)合1.基本語法1.

無序列表（ul）無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間沒有順序級(jí)別之分，通常是并列的。2.

有序列表（ul）有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。3.

定義列表（ul）定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)?；A(chǔ)案例操作——無序列表1.無序列表無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈進(jìn)行標(biāo)記）無序列表始于<ul>標(biāo)簽。布局代碼如下：<ul><li>Coffee</li><li>Milk</li></ul>?

在上面的語法中，用<ul>標(biāo)簽定義無序列表，使用<li>標(biāo)簽定義具體的列表項(xiàng)，<li>標(biāo)簽嵌套在<ul>標(biāo)簽內(nèi)。<ul>,<li>標(biāo)簽都是成對(duì)出現(xiàn)的。?

無序列表可以分為一級(jí)無序列表和多級(jí)無序列表，一級(jí)無序列表在瀏覽器中解析后，會(huì)在列表<li>標(biāo)簽前面添加一個(gè)小黑點(diǎn)的修飾符，而多級(jí)無序列表則會(huì)根據(jù)級(jí)數(shù)而改變列表前面的修飾符?？偨Y(jié)【案例1】基本無序列表基礎(chǔ)案例操作——無序列表?

無序列表在嵌套結(jié)構(gòu)中隨著其包含的列表級(jí)數(shù)的增加而逐漸縮進(jìn)，并且隨著列表級(jí)數(shù)的增加而改變不同的修飾符。合理地使用HTML標(biāo)簽?zāi)茏岉撁娴慕Y(jié)構(gòu)更加清晰，相對(duì)更符合語義?？偨Y(jié)【案例2】層嵌套的多級(jí)列表結(jié)構(gòu)，在無修飾情況下瀏覽器默認(rèn)解析時(shí)現(xiàn)實(shí)效果如下：<ul><li>一級(jí)列表項(xiàng)目

1<ul><li>二級(jí)列表項(xiàng)目

1</li><li>二級(jí)列表項(xiàng)目

2<!--二級(jí)列表嵌套

--><ul><li>三級(jí)列表項(xiàng)目

1</li><li>三級(jí)列表項(xiàng)目

2</li></ul></li></ul></li><li>一級(jí)列表項(xiàng)目

2</li></ul>布局代碼基礎(chǔ)案例操作——有序列表2.有序列表有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記，有序列表始于<ol>標(biāo)簽。每個(gè)列表項(xiàng)始于<li>標(biāo)簽。布局代碼如下：<ol><li>Coffee</li><li>Milk</li></ol>【案例1】基本有序列表基礎(chǔ)案例操作——無序列表3.定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。布局代碼如下：<dl><dt>Coffee</dt><dd>Black

hot

drink</dd><dt>Milk</dt><dd>Whitecold

drink</dd></dl>?

（1）<dl>標(biāo)簽必須與<dt>標(biāo)簽相鄰，<dd>標(biāo)簽需要相對(duì)于一個(gè)<dt>標(biāo)簽?

（2）<dl>、<dt>和<dd>3個(gè)標(biāo)簽之間不允許出現(xiàn)第四者?

（3）標(biāo)簽必須成對(duì)出現(xiàn)，嵌套要合理注意【案例1】基本定義列表任務(wù)實(shí)現(xiàn)布局代碼?

任務(wù)描述?

任務(wù)分析．．．．任務(wù)2

定義列表樣z1任務(wù)描述本案例是模仿微信官網(wǎng)的導(dǎo)航，主要用到了滑動(dòng)門技術(shù)。這在網(wǎng)頁布局中十分常用，能夠使背景自適應(yīng)文本的長度，從而減少代碼量的編寫，優(yōu)化代碼結(jié)構(gòu)。?

任務(wù)實(shí)現(xiàn)圖10-2-1：仿微信導(dǎo)航任務(wù)分析1.設(shè)計(jì)一個(gè)整體的父級(jí)元素，寬度為

968px，高度為

75px。并讓其居中顯示。2.觀察案例的布局，本案例可分為左邊“微信”圖片部分和右邊菜單導(dǎo)航兩部分。3.左邊“微信”圖片部分可以用<a>標(biāo)簽進(jìn)行定義，通過將其轉(zhuǎn)換為行內(nèi)塊元素，設(shè)置其寬高，并設(shè)置其背景圖片。4.右邊的導(dǎo)航菜單采用無序列表布局，里面嵌套<a>標(biāo)簽和<span>標(biāo)簽分別控制滑動(dòng)門中圓角的左邊和圓角的右邊。5.通過背景圖片定位的方法，切換背景圖的顯示。當(dāng)鼠標(biāo)經(jīng)過時(shí)，改變背景圖定位，從而達(dá)到背景圖切換效果。通過本案例學(xué)會(huì)滑動(dòng)門技術(shù)的應(yīng)用，更加熟練地掌握列表布局?

任務(wù)實(shí)現(xiàn)基本語法list-style-type

屬性值描述None無標(biāo)記Disc默認(rèn)。標(biāo)記是實(shí)心圓。circle標(biāo)記是空心圓。square標(biāo)記是實(shí)心方塊。decimal標(biāo)記是數(shù)字。decimal-leading-zero0

開頭的數(shù)字標(biāo)記。(01,02,03,等)基本語法list-style-type

屬性lower-roman小寫羅馬數(shù)字(i,ii,iii,iv,v,等)upper-roman大寫羅馬數(shù)字(I,II,III,IV,V,等)lower-alpha小寫英文字母Themarkerislower-alpha(a,b,c,d,e,等)upper-alpha大寫英文字母Themarkerisupper-alpha(A,B,C,D,E,等)lower-greek小寫希臘字母(alpha,beta,gamma,等)lower-latin小寫拉丁字母(a,b,c,d,e,等)upper-latin大寫拉丁字母(A,B,C,D,E,等)基礎(chǔ)案例操作1.定義列表類型?

布局代碼如下：<ol>? <li

type="1"

value="1">魔獸世界</li>

<!--阿拉伯?dāng)?shù)字排序-->? <li

type="a">夢(mèng)幻西游</li>

<!--英文字母排序-->? <li

type="I">誅仙

2</li>

<!--羅馬數(shù)字排序-->? </ol>【案例】設(shè)計(jì)項(xiàng)目符號(hào)不同的表基礎(chǔ)案例操作2.用背景圖模擬項(xiàng)目符號(hào)1. 先隱藏列表結(jié)構(gòu)的默認(rèn)項(xiàng)目符號(hào)。方法是設(shè)置

list-style-type:none。2.

為列表項(xiàng)定義背景圖像，指定要顯示的項(xiàng)目符號(hào)，利用背景圖精確定位技術(shù)控制其顯示位置。同時(shí)增加列表項(xiàng)左側(cè)空白，避免背景圖被列表文本遮蓋。基礎(chǔ)案例操作【案例】背景圖像定義項(xiàng)目符號(hào)樣式代碼如下：body{background:rgb(79,115,235);}li{list-style:

none;list-style-image:url(img/2.gif);width:100px;height:30px;}/*用背景圖模擬項(xiàng)目符號(hào)*/布局代碼如下：<ul><li>新聞</li><li>社區(qū)</li><li>微博</li><li>微信</li></ul>基礎(chǔ)案例操作3.列表布局列表結(jié)構(gòu)默認(rèn)顯示為堆疊樣式，并以縮進(jìn)板式進(jìn)行顯示。但在一般網(wǎng)頁中我們所看到的導(dǎo)航、菜單、列表等欄目會(huì)呈現(xiàn)多種版式，如水平布局、垂直布局，或水平與垂直混排布局等?；A(chǔ)案例操作（1）定義列表堆疊列表在默認(rèn)狀態(tài)下會(huì)以垂直布局形式顯示，這是一種符合瀏覽習(xí)慣的布局效果，在新聞列表、分類列表等列表頁或欄目比較常見?；A(chǔ)案例操作【案例】列表結(jié)構(gòu)垂直布局的基本形式。布局代碼如下：<!--設(shè)置無序列表--><p>網(wǎng)站分類</p><ul><li>軟件工程</li><li>編程語言</li><li>軟件設(shè)計(jì)</li><li>web前端</li><li>手機(jī)開發(fā)</li><li>所有隨筆</li></ul>樣式代碼如下：*{margin:0;padding:0;}li{list-style:none;width:150px;height:30px;border:1px

solid#ccc;text-align:center;line-height:30px;background:rgb(248,248,232);}p{font-size:24px;margin:10px;}基礎(chǔ)案例操作（2）定義水平布局水平布局能夠控制列表結(jié)構(gòu)在有限的行內(nèi)顯示，從而節(jié)省頁面空間，這種布局方式多見于導(dǎo)航菜單、詞條列表中。把大量的列表項(xiàng)目收縮在一行或幾行內(nèi)顯示，更方便瀏覽。水平布局的設(shè)計(jì)技巧?

用行內(nèi)顯示設(shè)計(jì)水平布局。一般是定義列表項(xiàng)目為行內(nèi)顯示，設(shè)計(jì)所有列表項(xiàng)目在同一行內(nèi)顯示。?

用浮動(dòng)顯示設(shè)計(jì)水平布局。一般定義列表項(xiàng)目浮動(dòng)顯示?；A(chǔ)案例操作【案例】列表水平布局的基本形式布局代碼如下：<div

class="contain"><p>網(wǎng)站分類</p><ul><li>軟件工程</li><li>編程語言</li><li>軟件設(shè)計(jì)</li><li>web前端</li><li>手機(jī)開發(fā)</li><li>所有隨筆</li></ul></div>樣式代碼如下：*{margin:0;padding:0;}.contain{margin:20px;}p{font-family:"blackadder

itc";font-size:24px;}li{list-style:none;float:left;padding:10px;border:1px

solid#ccc;color:#fff;background:#000;}任務(wù)實(shí)現(xiàn)布局代碼?

任務(wù)描述?

任務(wù)分析．．．．任務(wù)3

案例實(shí)戰(zhàn)一一列表布局

導(dǎo)航菜單任務(wù)描述本案例是一個(gè)常見的導(dǎo)航布局。通過一個(gè)無序列表，定義導(dǎo)航的基本樣式，把導(dǎo)航的內(nèi)容部分先設(shè)置隱藏，當(dāng)鼠標(biāo)經(jīng)過的時(shí)候設(shè)置為顯示狀態(tài),通過圖片上小箭頭的指示，顯示內(nèi)容圖片的父級(jí)元素。圖10-3-1：列表布局導(dǎo)航菜單任務(wù)分析1.設(shè)計(jì)一個(gè)父元素，寬度為

994px，高度為

52px，設(shè)置為居中顯示。2.用無序列表設(shè)計(jì)導(dǎo)航菜單的導(dǎo)航內(nèi)容，文字用<a>標(biāo)簽進(jìn)行包裹。3.定義內(nèi)容部分，先設(shè)置為隱藏，當(dāng)鼠標(biāo)經(jīng)過其父元素時(shí)設(shè)置顯示效果。4.通過對(duì)小箭頭

border的設(shè)置，可以使其呈現(xiàn)出向上的箭頭，并通過偽類元素選擇器，把小箭頭和二級(jí)菜單關(guān)聯(lián)起來，這樣每一個(gè)小箭頭就會(huì)指向相關(guān)聯(lián)的二級(jí)菜單。通過本案例，同學(xué)們可以掌握一個(gè)常用菜單導(dǎo)航的布局，還能學(xué)會(huì)偽類元素的用法以及在

css3

中如何用代碼寫出小箭頭效果。任務(wù)實(shí)現(xiàn)布局代碼總結(jié)掌握設(shè)計(jì)列表基本語法掌握定義列表樣式靈活使用列表布局獨(dú)立完成案例實(shí)戰(zhàn)了解CSS盒子模型了解元素轉(zhuǎn)換掌握網(wǎng)頁布局常用屬性float、position掌握網(wǎng)頁布局方式本章任務(wù)? 任務(wù)1：CSS盒子模型? 任務(wù)2：

網(wǎng)頁布局的基本方法? 任務(wù)3：案例實(shí)戰(zhàn)——新聞頁面的布局實(shí)現(xiàn)．．．'任務(wù)1認(rèn)識(shí)css盒子模型任務(wù)描述本案例是一個(gè)簡單的網(wǎng)頁布局，一個(gè)完整的網(wǎng)頁布局分為頭部區(qū)域、導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。經(jīng)過本案例的學(xué)習(xí)，同學(xué)們可以了解一個(gè)完整網(wǎng)頁的基本布局，在完成一個(gè)網(wǎng)頁應(yīng)該如何從整體進(jìn)行設(shè)計(jì)以及網(wǎng)頁布局的方法。網(wǎng)頁布局示例：?

任務(wù)分析?

布局代碼?

樣式代碼1.基本語法u

1.元素轉(zhuǎn)換?

1）行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素display:block?

2）塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素display:inline?

3）行內(nèi)塊元素display:inline-block1.基本語法u

2.認(rèn)識(shí)盒子模型盒子模型是

CSS

網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個(gè)元素所呈現(xiàn)的效果。首先我們要認(rèn)識(shí)盒子模型。2.基礎(chǔ)案例操作u

1.元素的常用屬性：display根據(jù)

CSS

規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁元素都有一個(gè)

display

屬性，用于確定該元素的類型，每一個(gè)元素都有默認(rèn)的

display屬性值，為了使頁面結(jié)構(gòu)的組織更加輕松、合理，HTML

標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。2.基礎(chǔ)案例操作布局代碼如下：<div

class="contain"><ulclass="nav"><li><ahref="#"><span>首頁</span></a></li><li><ahref="#"><span>微博圈</span></a></li><li><ahref="#"><span>移動(dòng)開發(fā)</span></a></li><li><ahref="#"><span>編程與設(shè)計(jì)</span></a></li><li><ahref="#"><span>程序員與語言</span></a></li><li><ahref="#"><span>編程語言排行榜</span></a></li></ul></div>u

【display屬性案例】設(shè)計(jì)一個(gè)橫排布局的導(dǎo)航樣式代碼如下：2.基礎(chǔ)案例操作.contain

{width:

800px;height:

30px;background:url(img/bg1.gif);margin:

0auto;}*

{margin:

0;padding:

0;}.navli{float:left;list-style:none;}.nav

a

{color:#fff;text-decoration:none;margin:

02px;display:inline-block;line-height:

30px;background:url(img/22.gif)no-repeatlefttop;padding-left:

15px;}/*將<a>標(biāo)簽的行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素*/.navspan

{display:inline-block;line-height:

30px;padding-right:

15px;background:url(img/22.gif)no-repeatrighttop;}/*將<span>標(biāo)簽的行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素*/.nava:hover{background:url(img/22.gif)no-repeatleftbottom;}/*用背景圖定位方法控制背景圖現(xiàn)實(shí)位置*/.navspan:hover{background:url(img/22.gif)no-repeatrightbottom;}.nav

{padding-left:

30px;}2.基礎(chǔ)案例操作u

2.認(rèn)識(shí)盒子模型盒子模型在網(wǎng)頁設(shè)計(jì)中十分重要，只有掌握好了盒子模型的規(guī)律，才能更好地控制網(wǎng)頁中各個(gè)元素的顯示規(guī)律。首先我們來了解一下盒子模型。左圖就是盒子模型的組成部分要想隨心所欲地控制頁面中每個(gè)盒子的樣式，還需要掌握盒子模型的相關(guān)屬性，接下來我們就對(duì)盒子模型的相關(guān)屬性進(jìn)行詳細(xì)講解?！景咐縫adding效果初體驗(yàn)2.基礎(chǔ)案例操作（1）認(rèn)識(shí)

paddingpadding

就是內(nèi)邊距。padding

的區(qū)域有背景顏色，css2.1

前提下，并且背景顏色一定和內(nèi)容區(qū)域的相同。也就是說，background-color

將填充所有

border以內(nèi)的區(qū)域。效果如下：布局代碼：<div>網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作</div>樣式代碼：div{width:

200px;height:

200px;background:rgb(79,115,235);padding:20px;}無樣式加樣式2.基礎(chǔ)案例操作在

CSS

中

padding

屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩?/p>

border

一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置如下：?padding-top:上邊距如果寫了四個(gè)值，則順序?yàn)椋荷?、右、下、左。?pad果di只ng寫-r了ig三h個(gè)t:右值邊，距則順序?yàn)椋荷?、右、下，左和右一樣。如果只寫了兩個(gè)值，則順序?yàn)椋荷舷隆⒆笥?，上和下一樣?pad左di和ng右-b一o樣tt。om比:如下說邊：距?padding-left:左邊距?padding:上邊距

右邊距

下邊距

左邊距padding是4

個(gè)方向的，所以我們能夠分別描述4個(gè)方向的padding。方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。(上、右、下、左)（順時(shí)針方向，用空格隔開。margin

的道理也是一樣的）padding-top:30px;padding-right:20px;padding-bottom:40px;padding-left:100px;padding:30px20px40px100px;padding:30px40px;則順序等價(jià)于：30px40px30px40px【案例】margin初體驗(yàn)2.基礎(chǔ)案例操作（2）認(rèn)識(shí)

margin網(wǎng)頁是由多個(gè)盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設(shè)置外邊距，所謂外邊距指的是元素邊框與相鄰元素之間的距離。布局代碼：<div

class="box1">有生之年</div><div

class="box2">狹路相逢</div>樣式代碼：.box1,.box2{width:200px;height:100px;background:rgb(79,115,235);}.box1{margin-bottom:20px;}無樣式加樣式2.基礎(chǔ)案例操作在

CSS

中

margin

屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊距padding

的用法類似，設(shè)置外邊距的方法如下：?margin-top:上邊距;?margin-right:右邊距;?margin-bottom:下邊距;?margin-left:上邊距;?margin:上邊距

右邊距

下邊距

左邊距;margin

相關(guān)屬性的值，以及復(fù)合屬性

margin

取

1~4

個(gè)值的情況與

padding相同。2.基礎(chǔ)案例操作u

（3）計(jì)算盒子寬度網(wǎng)頁是由多個(gè)盒子排列而成的，每個(gè)盒子都有固定的大小，在

CSS

中使用寬度屬性

width

和高度屬性

height可以對(duì)盒子的大小進(jìn)行控制。CSS

規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：? 盒子的總寬度? width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和? 盒子的總高度? height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和2.基礎(chǔ)案例操作u

（4）清除元素自帶邊距一些元素，默認(rèn)帶有

padding，比如

ul

標(biāo)簽。如下：上圖顯示，不加任何樣式的

ul，也是有

40px

的

padding-left。所以，我們做站的時(shí)候，為了便于控制，總是喜歡清除這個(gè)默認(rèn)的

padding。可以使用*進(jìn)行清除：*{margin:

0;padding:

0;}3.任務(wù)分析u

任務(wù)分析要完成本任務(wù)，需要進(jìn)行如下操作：?

1.設(shè)計(jì)一個(gè)整體的盒子，包含所有內(nèi)容。寬度為1100px。?

2.設(shè)計(jì)網(wǎng)頁的整體布局，定義頭部區(qū)域盒子、導(dǎo)航區(qū)域盒子、內(nèi)容區(qū)域盒子、底部區(qū)域盒子?

3.設(shè)計(jì)頭部區(qū)域盒子樣式。頭部盒子寬度為1100px，高度為

80px，背景顏色為藍(lán)色。通過text-align設(shè)置文本水平居中，通過

line-height設(shè)置文本垂直居中。?

4.設(shè)計(jì)菜單導(dǎo)航區(qū)域盒子樣式。導(dǎo)航盒子寬度為1100px，高度為

50px,背景顏色為藍(lán)色。通過

text-align設(shè)置文本水平居中，通過

line-height設(shè)置文本垂直居中。設(shè)置盒子的上下間距為

10px,用于增加與其他盒子的間隙。?

5.設(shè)計(jì)內(nèi)容區(qū)域盒子樣式。內(nèi)容區(qū)域分為左中右三部分。左邊盒子寬度為200px，高度為

300px，背景顏色為藍(lán)色，盒子左浮動(dòng)。中間盒子寬度為

680px，高度為

300px，背景顏色為藍(lán)色，盒子左浮動(dòng)。右邊盒子寬度為

200px，高度為300px，背景顏色為藍(lán)色，設(shè)置右浮動(dòng)。三個(gè)盒子的

text-align均設(shè)置為居中，line-height統(tǒng)一設(shè)置為

300px，使文本垂直居中。?

6.設(shè)計(jì)底部區(qū)域盒子樣式。底部盒子寬度為

1100px，高度為80px,背景顏色為藍(lán)色。通過

text-align設(shè)置文本水平居中，通過

line-height設(shè)置文本垂直居中。任務(wù)描述4.任務(wù)實(shí)現(xiàn)u

布局代碼如下：<divclass="contain"><divclass="top">頭部區(qū)域</div><divclass="nav">菜單導(dǎo)航區(qū)域</div><divclass="content"><divclass="left">內(nèi)容區(qū)域</div><divclass="center">內(nèi)容區(qū)域</div><divclass="right">內(nèi)容區(qū)域</div></div><divclass="foot">底部區(qū)域</div></div>任務(wù)描述4.任務(wù)實(shí)現(xiàn)u

樣式代碼如下：.contain

{width:

1100px;margin:

0auto;}/*設(shè)置大盒子總體布局*/.top{width:

1100px;height:

80px;background:

rgb(79,

115,

235);text-align:

center;line-height:

80px;}/*設(shè)置頭部盒子樣式*/.nav

{width:

1100px;height:

50px;background:

rgb(79,

115,

235);text-align:

center;line-height:

50px;margin:

10px

0;}/*設(shè)置導(dǎo)航盒子樣式*/.content

{width:1100px;height:

300px;}/*設(shè)置內(nèi)容盒子樣式*/.foot{width:1100px;height:

80px;background:rgb(79,115,235);text-align:

center;line-height:

80px;margin-top:

10px;}/*設(shè)置內(nèi)容盒子樣式*/.content.left

{width:200px;height:

300px;background:rgb(79,115,235);float:left;text-align:

center;line-height:

300px;}/*設(shè)置左部內(nèi)容區(qū)域樣式*/.conten.center

{width:680px;height:

300px;background:rgb(79,115,235);float:left;margin-left:

10px;text-align:

center;line-height:

300px;}/*設(shè)置中部內(nèi)容區(qū)域樣式*/.content.right

{width:200px;height:

300px;background:rgb(79,115,235);float:right;text-align:

center;line-height:

300px;}任務(wù)描述想一想元素轉(zhuǎn)換有哪些？盒子模型的組成?．．．'任務(wù)2

網(wǎng)頁布局的基本萬法任務(wù)描述通過制作新聞網(wǎng)頁，可以讓同學(xué)們了解時(shí)政，增強(qiáng)政治敏感度，增強(qiáng)對(duì)行業(yè)最新發(fā)展動(dòng)態(tài)的了解，增加專業(yè)認(rèn)同感，參考下圖

，設(shè)計(jì)新聞導(dǎo)航菜單。?

任務(wù)分析?

布局代碼?

樣式代碼1.基本語法（1）CSS

的

float

屬性可以定義元素浮動(dòng)顯示。該屬性的基本用法如下：float：none

|

left|right默認(rèn)值為

none，取值說明§none：設(shè)置對(duì)象不浮動(dòng)。§left：設(shè)置對(duì)象浮在左邊?！靣ight：設(shè)置對(duì)象浮在右邊。1.基本語法（2）CSS

的

position屬性可以定義元素定位顯示。position屬性的基本用法如下：te

|

fixed常用值§static：自動(dòng)定位（默認(rèn)定位方式）§relative：相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位§absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位§fixed：固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位position：static|relative

|absoluposition

屬性的2.基礎(chǔ)案例操作（1）認(rèn)識(shí)

float初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會(huì)按照

，通過這樣的布局制作出來的頁面看起來呆板、不美觀，然而大家在瀏覽網(wǎng)頁時(shí)，會(huì)發(fā)現(xiàn)頁面中的元素通常會(huì)按照左、中、右的結(jié)構(gòu)進(jìn)行排版，這是通過

float

屬性實(shí)現(xiàn)的如下圖所示。默認(rèn)的排版方式，將頁面中的元素從上到下一一羅列float2.基礎(chǔ)案例操作【float課堂案例】要求：設(shè)計(jì)3個(gè)盒子，統(tǒng)一它們的大小為200px*100px，背景顏色為藍(lán)色。在默認(rèn)狀態(tài)下，這3個(gè)盒子以流動(dòng)方式堆疊顯示，根據(jù)HTML結(jié)構(gòu)的排列順序自上而下進(jìn)行排列。如果定義3個(gè)盒子都向左浮動(dòng)，則3個(gè)盒子并列顯示在一行，如下圖所示。2.基礎(chǔ)案例操作?

【float課堂案例代碼實(shí)現(xiàn)】代碼實(shí)現(xiàn)如下：布局代碼如下：<divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>樣式代碼如下：.box1,.box2,.box3

{width:200px;height:100px;margin:10px;float:left;background:rgb(79,115,235);}2.基礎(chǔ)案例操作（2）使用

clearfloat元素能夠并列在一行顯示，除了可以通過調(diào)整包含框的寬度，來強(qiáng)迫浮動(dòng)元素?fù)Q行顯示外，還可以使用

clear

屬性，該屬性能夠強(qiáng)迫浮動(dòng)元素?fù)Q行顯示。實(shí)際上，clear

屬性定義了不允許有浮動(dòng)對(duì)象的邊。該屬性的基本用法如下：clear：none

|left|

right|bothclear

屬性的常用值：? left：不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）? right：不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）? both：同時(shí)清除左右兩側(cè)浮動(dòng)的影響2.基礎(chǔ)案例操作【clear課堂案例】延用上節(jié)實(shí)例，設(shè)計(jì)下圖所示效果：2.基礎(chǔ)案例操作【clear課堂案例代碼實(shí)現(xiàn)】代碼實(shí)現(xiàn)如下：布局代碼如下：<divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>樣式代碼如下:.box1,.box2,.box3

{width:200px;height:100px;margin:10px;float:left;background:rgb(79,115,235);}.box2

{clear:left;}（3）定義

positionposition

與

float都是

CSS

核心布局工具，float的優(yōu)點(diǎn)是靈活，position的優(yōu)點(diǎn)是精確。在網(wǎng)頁布局中，它們各有千秋，配合使用，可以提升網(wǎng)頁設(shè)計(jì)的適應(yīng)能力。通過邊偏移屬性

top、bottom、left或

right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，對(duì)他們的具體解釋如下：屬性的常用值：? top：頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離? bottom：底部偏移量，定義元素相對(duì)于其父元素下邊線的距離? left：左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離? right：右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離靜態(tài)定位2.基礎(chǔ)案例操作2.基礎(chǔ)案例操作① 相對(duì)定位當(dāng)

position

屬性的取值為

relative

時(shí)，可以將元素定位于相對(duì)位置。相對(duì)定位是將元素相對(duì)于他在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，對(duì)元素設(shè)置相對(duì)定位后，可以通過邊偏移屬性改變?cè)氐奈恢茫撬谖臋n流中的位置仍然保留?！緍elative課堂小案例】要求：relative初體驗(yàn)，在頁面中寫三個(gè)盒子，寬度為

100px,高度為100px。對(duì)第二個(gè)元素設(shè)置相對(duì)定位，并設(shè)置左部和上部的偏移量，如上圖所示。2.基礎(chǔ)案例操作① 相對(duì)定位課堂案例代碼布局代碼如下：<divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>樣式代碼如下：body{background:rgb(79,115,235);}.box1,.box2,.box3

{width:200px;height:100px;margin:10px;position:relative;background:rgb(255,254,29);}.box2

{left:200px;top:270px;}2.基礎(chǔ)案例操作② 絕對(duì)定位當(dāng)

position

屬性的取值為

absolute

時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)

body

根元素（瀏覽器【absolute

課堂小案例】要求：absolute

初體驗(yàn)，在頁面中寫三個(gè)盒子，寬度為

100px,高度為100px。對(duì)第二個(gè)元素設(shè)置絕對(duì)定位，并設(shè)置左部和上部的偏移量，如上圖所示。窗口）進(jìn)行定位。2.基礎(chǔ)案例操作② 絕對(duì)定位課堂案例代碼布局代碼如下：<divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>樣式代碼如下：body{background:rgb(79,115,235);}.box1,.box2,.box3

{width:200px;height:100px;margin:10px;position:absolute;background:rgb(255,254,29);}.box2

{left:-100px;top:170px;}2.基礎(chǔ)案例操作③ 固定定位?

當(dāng)

position

屬性的取值為

fixed

時(shí)，即可將元素的定位模式設(shè)置為固定定位。固定定位是絕對(duì)定位的一種特殊形式，他以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。?

當(dāng)對(duì)元素設(shè)置固定定位后，他將脫離標(biāo)準(zhǔn)文檔流的控制。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置2.基礎(chǔ)案例操作?

（4）設(shè)置層疊順序ü z-index

層疊等級(jí)屬性素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-ü 當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置ind定ex位的時(shí)默，認(rèn)定屬位性元值是