HTML5+CSS3移動(dòng)Web開(kāi)發(fā)實(shí)戰(zhàn)單元2文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)

HTML5+CSS3

移動(dòng)Web開(kāi)發(fā)實(shí)戰(zhàn)精選8種類型的網(wǎng)站項(xiàng)目，55個(gè)典型教學(xué)案例實(shí)例探析+引導(dǎo)訓(xùn)練+同步訓(xùn)練+拓展訓(xùn)練反映移動(dòng)Web應(yīng)用開(kāi)發(fā)的實(shí)際需求和水平單元

2文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)

新聞網(wǎng)站通常以文本新聞為主體。本單元通過(guò)對(duì)新聞網(wǎng)站的導(dǎo)航網(wǎng)頁(yè)和文本新聞網(wǎng)頁(yè)設(shè)計(jì)的探析與訓(xùn)練，重點(diǎn)講解HTML5中常用的文本標(biāo)簽、CSS文本屬性、字體屬性、顏色值及顏色表示方法、CSS鏈接屬性等相關(guān)內(nèi)容。讀者應(yīng)學(xué)會(huì)網(wǎng)頁(yè)元素的水平對(duì)齊、CSS導(dǎo)航欄的設(shè)計(jì)，掌握文本新聞網(wǎng)頁(yè)和導(dǎo)航網(wǎng)頁(yè)的設(shè)計(jì)方法。實(shí)例探析任務(wù)2-1探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)【效果展示】手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)0201.html的瀏覽效果如圖2-1所示。手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)0201.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)，頂部為標(biāo)題文本，中部包括多個(gè)熱點(diǎn)網(wǎng)站的鏈接按鈕和多行分類網(wǎng)站導(dǎo)航鏈接，底部包括多個(gè)導(dǎo)航鏈接和版權(quán)信息。圖2-1手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)0201.html的瀏覽效果【網(wǎng)頁(yè)探析】1．網(wǎng)頁(yè)0201.html的HTML代碼探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)0201.html的HTML代碼如表2-1所示。表2-1網(wǎng)頁(yè)0201.html的HTML代碼續(xù)表

網(wǎng)頁(yè)0201.html的主體結(jié)構(gòu)的HTML代碼如表2-2所示。該網(wǎng)頁(yè)主要包括多個(gè)名站的超鏈接。表2-2網(wǎng)頁(yè)0201.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁(yè)0201.html的CSS代碼探析網(wǎng)頁(yè)0201.html通用的CSS代碼如表2-3所示。表2-3網(wǎng)頁(yè)0201.html通用的CSS代碼

網(wǎng)頁(yè)0201.html主體結(jié)構(gòu)的CSS代碼如表2-4所示。表2-4網(wǎng)頁(yè)0201.html主體結(jié)構(gòu)的CSS代碼

網(wǎng)頁(yè)0201.html其他部分的CSS代碼如表2-5所示。表2-5網(wǎng)頁(yè)0201.html其他部分的CSS代碼續(xù)表續(xù)表知識(shí)梳理1．在HTML5中常用的文本標(biāo)簽（1）<details>標(biāo)簽與<summary>標(biāo)簽<details>標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)，目前只有Chrome瀏覽器支持<details>標(biāo)簽。該標(biāo)簽可以與<summary>標(biāo)簽配合使用。（2）<bdi>標(biāo)簽<bdi>標(biāo)簽用于設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。（3）<ruby>標(biāo)簽、<rt>標(biāo)簽與<rp>標(biāo)簽<ruby>標(biāo)簽用于定義ruby注釋（中文注音或字符），其與<rt>標(biāo)簽一同使用。<ruby>元素由一個(gè)或多個(gè)字符（需要一個(gè)解釋或發(fā)音）和一個(gè)提供該信息的<rt>元素組成，還包括可選的<rp>元素，定義當(dāng)瀏覽器不支持<ruby>標(biāo)簽時(shí)顯示的內(nèi)容。<rt>標(biāo)簽用于定義字符（中文注音或字符）的解釋或發(fā)音。<rp>標(biāo)簽在ruby注釋中使用，以定義不支持<ruby>元素的瀏覽器所顯示的內(nèi)容。（4）<mark>標(biāo)簽<mark>標(biāo)簽主要用來(lái)在視覺(jué)上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字，典型的應(yīng)用是搜索結(jié)果中高亮顯示所搜索的關(guān)鍵字。（5）<time>標(biāo)簽<time>標(biāo)簽用于定義日期或時(shí)間，也可以兩者同時(shí)定義。示例代碼如下所示：<p>我們?cè)诿刻煸缟?lt;time>9:00</time>開(kāi)始營(yíng)業(yè)。</p><p>我在<timedatetime="2019-02-14">情人節(jié)</time>有個(gè)約會(huì)。</p><time>標(biāo)簽用于定義公歷的時(shí)間（24小時(shí)制）或日期，其中時(shí)間和時(shí)區(qū)偏移是可選的。該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，且當(dāng)用戶把生日提醒或排定的事件添加到用戶日程表中時(shí)，搜索引擎也能夠生成更智能的搜索結(jié)果。（6）<meter>標(biāo)簽<meter>標(biāo)簽用于定義度量衡，其僅用于已知最大和最小值的度量的情況。（7）<progress>標(biāo)簽<progress>標(biāo)簽用于定義任何類型任務(wù)的運(yùn)行進(jìn)度。用戶可以使用<progress>元素顯示JavaScript中的耗時(shí)時(shí)間函數(shù)的進(jìn)程。（8）<br>標(biāo)簽與<wbr>標(biāo)簽<br>標(biāo)簽用于插入一個(gè)簡(jiǎn)單的換行符。使用<br>來(lái)輸入空行，而不是分割段落。<br>標(biāo)簽是空標(biāo)簽（意味著它沒(méi)有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：<br></br>）。在XHTML中，把結(jié)束標(biāo)簽放在開(kāi)始標(biāo)簽中，也就是<br/>。<br>標(biāo)簽只是簡(jiǎn)單地開(kāi)始新的一行，而當(dāng)瀏覽器遇到<p>標(biāo)簽時(shí)，通常會(huì)在相鄰的段落之間插入一些垂直的間距。<wbr>標(biāo)簽表示軟換行，用于在文本中添加換行符，其與<br>標(biāo)簽元素的區(qū)別是：<br>標(biāo)簽表示此處必須換行；<wbr>表示瀏覽器窗口或父級(jí)元素足夠?qū)挄r(shí)（沒(méi)必要換行時(shí)）則不換行，而寬度不夠時(shí)，主動(dòng)在此處換行。2．CSS的文本屬性（Text）CSS的文本屬性可定義文本的外觀，通過(guò)文本屬性，可以改變文本的顏色、字符間距、對(duì)齊文本、裝飾文本，以及對(duì)文本進(jìn)行縮進(jìn)等。（1）縮進(jìn)文本把Web頁(yè)面中段落的第一行縮進(jìn)，是一種最常用的文本格式化效果。CSS提供了text-indent屬性。該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。通過(guò)使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。（2）水平對(duì)齊text-align是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式，其取值left、right和center會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。（3）字間隔word-spacing屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔，其默認(rèn)值normal與設(shè)置值為0是一樣的。word-spacing屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值，那么文字之間的間隔就會(huì)增加。（4）字母間隔與word-spacing屬性一樣，letter-spacing屬性的取值包括所有長(zhǎng)度，默認(rèn)關(guān)鍵字是normal（這與letter-spacing:0相同）。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少指定的量，示例代碼如下：h1{letter-spacing:-0.5em}h4{letter-spacing:20px}letter-spacing屬性與word-spacing的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。（5）字符轉(zhuǎn)換text-transform屬性處理文本的大小寫，該屬性有4個(gè)取值：none、uppercase、lowercase和capitalize。默認(rèn)值none對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫。顧名思義，uppercase和lowercase將文本轉(zhuǎn)換為全大寫和全小寫字符，capitalize只對(duì)每個(gè)單詞的首字母大寫。（6）文本裝飾text-decoration屬性提供了很多非常有趣的行為。text-decoration有5個(gè)值，分別為none、underline、overline、line-through、blink。underline會(huì)對(duì)元素加下劃線，overline的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線，line-through則在文本中間畫一個(gè)貫穿線，blink會(huì)讓文本閃爍。none值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無(wú)裝飾的文本是默認(rèn)外觀，但也不總是這樣。例如，鏈接默認(rèn)地會(huì)有下劃線，如果希望去掉超鏈接的下劃線，則可以使用以下CSS代碼：a{text-decoration:none;}（7）文本陰影在CSS3中，text-shadow屬性可向文本應(yīng)用陰影，允許設(shè)置水平陰影、垂直陰影、模糊距離及陰影的顏色。（8）處理空白符white-space屬性會(huì)影響到對(duì)源文檔中的空格、換行和tab字符的處理。通過(guò)使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。默認(rèn)情況下，XHTML已經(jīng)完成了空白符處理——它會(huì)把所有空白符合并為一個(gè)空格。3．CSS的字體屬性（Font）CSS的字體屬性定義文本的字體系列、風(fēng)格（如斜體）和變形（如小型大寫字母）、加粗、大小。（1）CSS的字體系列在CSS中，有以下兩種不同類型的字體系列。①通用字體系列：擁有相似外觀的字體系統(tǒng)組合，包括serif字體、sans-serif字體、monospace字體、cursive字體和fantasy字體5種。②特定字體系列：具體的字體系列（如“Times”或“Courier”）。（2）字體風(fēng)格font-style屬性最常用于規(guī)定斜體文本。該屬性有3個(gè)取值：normal（文本正常顯示）、italic（文本斜體顯示）、oblique（文本傾斜顯示）。（3）字體變形font-variant屬性用于設(shè)定小型大寫字母。小型大寫字母不是一般的大寫字母，也不是小寫字母。這種字母采用不同大小的大寫字母。（4）字體加粗font-weight屬性用于設(shè)置文本的粗細(xì)，使用bold關(guān)鍵字可以將文本設(shè)置為粗體。關(guān)鍵字100～900為字體指定了9級(jí)加粗度。100對(duì)應(yīng)最細(xì)的字體變形，900對(duì)應(yīng)最粗的字體變形。數(shù)字400等價(jià)于normal，而700等價(jià)于bold。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別。（5）字體大小font-size屬性用于設(shè)置文本的大小。font-size值可以是絕對(duì)值或相對(duì)值。絕對(duì)值是指將文本設(shè)置為指定的大小，不允許用戶在所有瀏覽器中改變文本大小，絕對(duì)值在確定了輸出的物理尺寸時(shí)很有用。相對(duì)值是指相對(duì)于周圍的元素來(lái)設(shè)置大小，允許用戶在瀏覽器中改變文本大小。（6）CSS3的@font-face規(guī)則在CSS3之前，我們必須使用已在用戶計(jì)算機(jī)上安裝好的字體，而通過(guò)CSS3，則可以使用我們喜歡的任意字體。當(dāng)我們找到或購(gòu)買到希望使用的字體時(shí)，可將該字體文件存放到Web服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。我們自己使用的字體是在CSS3的@font-face規(guī)則中定義的，在新的@font-face規(guī)則中，必須首先定義字體的名稱（如myFont），然后指向該字體文件。如果需要為HTML元素使用字體，則通過(guò)font-family屬性來(lái)引用字體的名稱myFont。

表2-6中列出了能夠在@font-face規(guī)則中定義的字體描述符。描述符名稱允許的取值使用說(shuō)明font-familyname必需項(xiàng)，規(guī)定字體的名稱srcURL必需項(xiàng)，定義字體文件的URLfont-stretchnormal、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded可選項(xiàng)，定義如何拉伸字體，默認(rèn)是“normal”font-stylenormal、italic、oblique可選項(xiàng)，定義字體的樣式，默認(rèn)是“normal”font-weightnormal、bold、100、200、300、400、500、600、700、800、900可選項(xiàng)，定義字體的粗細(xì)，默認(rèn)是“normal”unicode-rangeunicode-range可選項(xiàng)，定義字體支持的UNICODE字符范圍，默認(rèn)是“U+0-10FFFF”表2-6能夠在@font-face規(guī)則中定義的字體描述符4．CSS的顏色顏色是通過(guò)對(duì)紅、綠和藍(lán)三原色的組合來(lái)顯示的。（1）顏色值在CSS中，顏色使用組合了紅、綠、藍(lán)顏色值（RGB）的十六進(jìn)制（HEX）表示法進(jìn)行定義。對(duì)光源進(jìn)行設(shè)置的最低值可以是0（十六進(jìn)制00），最高值是255（十六進(jìn)制FF）。十六進(jìn)制值使用3個(gè)兩位數(shù)來(lái)編寫，并以#符號(hào)開(kāi)頭。在CSS中，常用顏色的HEX表示法與RGB表示法如表2-7所示。顏色HEX表示法顏色RGB表示法顏色HEX表示法顏色RGB表示法#000000rgb(0,0,0)#00FFFFrgb(0,255,255)#FF0000rgb(255,0,0)#FF00FFrgb(255,0,255)#00FF00rgb(0,255,0)#FFFFFFrgb(255,255,255)#0000FFrgb(0,0,255)#CCCCCCrgb(204,204,204)#FFFF00rgb(255,255,0)#C0C0C0rgb(192,192,192)表2-7CSS中的常用顏色的HEX表示法與RGB表示法（2）CSS中的顏色的表示方法①十六進(jìn)制顏色十六進(jìn)制顏色是這樣規(guī)定的：#RRGGBB，其中，RR為紅色、GG為綠色、BB為藍(lán)色。十六進(jìn)制整數(shù)規(guī)定了顏色的成分，所有值必須介于0與FF之間。所有瀏覽器都支持十六進(jìn)制顏色值。例如，#0000ff值顯示為藍(lán)色，這是因?yàn)樗{(lán)色成分被設(shè)置為最高值（ff），而其他成分被設(shè)置為0。②RGB顏色RGB顏色值的表示方式為rgb(red,green,blue)，每個(gè)參數(shù)（red、green及blue）定義顏色的強(qiáng)度，可以是介于0～255之間的整數(shù)，或者是百分比值（從0%～100%）。所有瀏覽器都支持RGB顏色值。例如，rgb(0,0,255)值顯示為藍(lán)色，這是因?yàn)閎lue參數(shù)被設(shè)置為最高值（255），而其他被設(shè)置為0。同樣地，以下兩種表示方式定義了相同的顏色：rgb(0,0,255)和rgb(0%,0%,100%)。③RGBA顏色RGBA顏色值是RGB顏色值的擴(kuò)展，帶有一個(gè)alpha通道（規(guī)定了對(duì)象的不透明度）。RGBA顏色值的表示方式為：rgba(red,green,blue,alpha)，其中alpha參數(shù)是介于0.0（完全透明）與1.0（完全不透明）之間的數(shù)字。RGBA顏色值得到以下瀏覽器的支持：IE9+、Firefox3+、Chrome、Safari及Opera10+等。例如，rgba(255,0,0,0.5)值顯示為紅色，不透明度為0.5。④HSL顏色HSL指的是Hue（色調(diào)）、Saturation（飽和度）、Lightness（亮度）。HSL顏色值的表示方法為：hsl(hue,saturation,lightness)，例如，hsl(120,65%,75%)。hue是色盤上的度數(shù)（從0～360），0（或360）是紅色，120是綠色，240是藍(lán)色；saturation是百分比值，0%意味著灰色，而100%是全彩；lightness同樣是百分比值，0%是黑色，100%是白色。HSL顏色值得到以下瀏覽器的支持：IE9+、Firefox、Chrome、Safari及Opera10+等。

⑤HSLA顏色HSLA顏色值是HSL顏色值的擴(kuò)展，帶有一個(gè)alpha通道（規(guī)定了對(duì)象的不透明度）。HSLA顏色值的表示方法為：hsla(hue,saturation,lightness,alpha)，其中的alpha參數(shù)定義不透明度，alpha參數(shù)是介于0.0（完全透明）與1.0（完全不透明）之間的數(shù)字。例如，hsla(120,65%,75%,0.3)。HSLA顏色值得到以下瀏覽器的支持：IE9+、Firefox3+、Chrome、Safari及Opera10+等。⑥預(yù)定義/跨瀏覽器顏色名HTML和CSS顏色規(guī)范中定義了147種顏色名（17種標(biāo)準(zhǔn)顏色加130種其他顏色）。17種標(biāo)準(zhǔn)色分別是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。這些是所有瀏覽器都支持的顏色名。5．網(wǎng)頁(yè)元素的水平對(duì)齊在CSS中，可以使用多種屬性來(lái)水平對(duì)齊元素。（1）使用text-align屬性水平對(duì)齊元素text-align是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。（2）使用margin屬性水平對(duì)齊塊元素塊元素指的是占據(jù)全部可用寬度的元素，并且在其前后都會(huì)換行。網(wǎng)頁(yè)中常見(jiàn)的塊元素有<h1>、<p>、<div>。（3）使用position屬性進(jìn)行左和右對(duì)齊對(duì)齊元素的方法之一是絕對(duì)定位。絕對(duì)定位的元素會(huì)從正常流中刪除，并且能夠交疊元素。（4）使用float屬性來(lái)進(jìn)行左和右對(duì)齊對(duì)齊元素的另一種方法是使用float屬性。6．CSS的鏈接屬性（Hyperlink）（1）設(shè)置鏈接的樣式鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式。能夠設(shè)置鏈接樣式的CSS屬性有很多種，如color、font-family、background等。鏈接有4種狀態(tài)：a:link（普通的、未被訪問(wèn)的鏈接）、a:visited（用戶已訪問(wèn)的鏈接）、a:hover（鼠標(biāo)指針位于鏈接的上方）和a:active（鏈接被單擊的時(shí)刻）。（2）常見(jiàn)的鏈接樣式①文本修飾text-decoration屬性大多用于去掉鏈接中的下劃線，示例代碼如下：a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:underline;}a:active{text-decoration:underline;}②背景色background-color屬性用于設(shè)置鏈接的背景色，示例代碼如下：a:link{background-color:#B2FF99;}a:visited{background-color:#FFFF85;}a:hover{background-color:#FF704D;}a:active{background-color:#FF704D;}7．CSS的導(dǎo)航欄擁有易用的導(dǎo)航欄對(duì)于任何網(wǎng)站都很重要，而通過(guò)CSS，能夠把乏味的HTML菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。（1）垂直導(dǎo)航欄如需構(gòu)建垂直導(dǎo)航欄，則只需要定義<a>元素的樣式，除了上面的代碼之外，還需添加以下代碼：a{display:block;width:60px;}

display:block：把鏈接顯示為塊元素可使整個(gè)鏈接區(qū)域可單擊（不僅僅是文本），同時(shí)也允許我們規(guī)定寬度。width:60px：塊元素默認(rèn)占用全部可用寬度，我們需要規(guī)定60px的寬度。應(yīng)始終規(guī)定垂直導(dǎo)航欄中<a>元素的寬度，如果省略寬度，則IE6會(huì)產(chǎn)生意想不到的結(jié)果。（2）水平導(dǎo)航欄有兩種創(chuàng)建水平導(dǎo)航欄的方法，即使用行內(nèi)列表項(xiàng)和浮動(dòng)列表項(xiàng)。兩種方法都不錯(cuò)，但是如果希望鏈接擁有相同的尺寸，就必須使用浮動(dòng)列表項(xiàng)。①行內(nèi)列表項(xiàng)②對(duì)列表項(xiàng)進(jìn)行浮動(dòng)引導(dǎo)訓(xùn)練任務(wù)2-2設(shè)計(jì)手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁(yè)【任務(wù)描述】編寫HTML代碼和CSS代碼，設(shè)計(jì)圖2-2所示的手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁(yè)0202.html。手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁(yè)0202.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)。頂部?jī)?nèi)容包括返回鏈接按鈕、標(biāo)題文字和主頁(yè)鏈接按鈕，中部?jī)?nèi)容包括多行分類的站內(nèi)頁(yè)面導(dǎo)航超鏈接，底部?jī)?nèi)容包括多個(gè)超鏈接和版權(quán)信息。

網(wǎng)頁(yè)0202.html的頂部結(jié)構(gòu)使用<header>標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用<section>標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實(shí)現(xiàn)。圖2-2手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁(yè)0202.html的瀏覽效果【任務(wù)實(shí)施】1．網(wǎng)頁(yè)0202.html的主體結(jié)構(gòu)設(shè)計(jì)在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)\0202”中創(chuàng)建網(wǎng)頁(yè)0202.html。（1）編寫網(wǎng)頁(yè)0202.html通用的CSS代碼網(wǎng)頁(yè)0202.html通用的CSS代碼如表2-8所示。表2-8網(wǎng)頁(yè)0202.html通用的CSS代碼（2）編寫網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的CSS代碼網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的CSS代碼如表2-9所示。表2-9網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的HTML代碼網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的HTML代碼如表2-10所示。表2-10網(wǎng)頁(yè)0202.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁(yè)0202.html的局部?jī)?nèi)容設(shè)計(jì)（1）網(wǎng)頁(yè)0202.html的頂部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0202.html頂部?jī)?nèi)容的CSS代碼如表2-11所示。表2-11網(wǎng)頁(yè)0202.html頂部?jī)?nèi)容的CSS代碼續(xù)表

在“<headerclass="h">”與“</header>”之間編寫網(wǎng)頁(yè)0202.html頂部?jī)?nèi)容的HTML代碼，如表2-12所示。表2-12網(wǎng)頁(yè)0202.html頂部?jī)?nèi)容的HTML代碼（2）網(wǎng)頁(yè)0202.html的中部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0202.html中部?jī)?nèi)容的CSS代碼如表2-13所示。表2-13網(wǎng)頁(yè)0202.html中部?jī)?nèi)容的CSS代碼表2-14網(wǎng)頁(yè)0202.html中部?jī)?nèi)容的HTML代碼續(xù)表（3）網(wǎng)頁(yè)0202.html的底部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0202.html底部?jī)?nèi)容的CSS代碼如表2-15所示。表2-15網(wǎng)頁(yè)0202.html底部?jī)?nèi)容的CSS代碼

在“<footerclass="site">”和“</footer>”之間編寫網(wǎng)頁(yè)0202.html底部?jī)?nèi)容的HTML代碼，如表2-16所示。表2-16網(wǎng)頁(yè)0202.html底部?jī)?nèi)容的HTML代碼【網(wǎng)頁(yè)瀏覽】保存網(wǎng)頁(yè)0202.html，在瀏覽器GoogleChrome中的瀏覽效果如圖2-2所示。圖2-3手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁(yè)0203.html的瀏覽效果任務(wù)2-3設(shè)計(jì)手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁(yè)【任務(wù)描述】編寫HTML代碼和CSS代碼，設(shè)計(jì)圖2-3所示的手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁(yè)0203.html。手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁(yè)0203.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)。頂部?jī)?nèi)容包括標(biāo)題文字和主頁(yè)鏈接按鈕，中部?jī)?nèi)容包括文本新聞的標(biāo)題和正文，底部?jī)?nèi)容包括多個(gè)超鏈接和版權(quán)信息。網(wǎng)頁(yè)0203.html的頂部結(jié)構(gòu)使用<header>標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用<article>標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實(shí)現(xiàn)?！救蝿?wù)實(shí)施】1．網(wǎng)頁(yè)0203.html的主體結(jié)構(gòu)設(shè)計(jì)在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)\0203”中創(chuàng)建網(wǎng)頁(yè)0203.html。（1）編寫網(wǎng)頁(yè)0203.html通用的CSS代碼網(wǎng)頁(yè)0203.html通用的CSS代碼如表2-8所示。（2）編寫網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的CSS代碼網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的CSS代碼如表2-17所示。表2-17網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的HTML代碼網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的HTML代碼如表2-18所示。表2-18網(wǎng)頁(yè)0203.html主體結(jié)構(gòu)的HTML代碼續(xù)表2．網(wǎng)頁(yè)0203.html的局部?jī)?nèi)容設(shè)計(jì)（1）網(wǎng)頁(yè)0203.html的頂部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0203.html頂部?jī)?nèi)容的CSS代碼如表2-19所示。表2-19網(wǎng)頁(yè)0203.html頂部?jī)?nèi)容的CSS代碼

在“<headerclass="h_min">”與“</header>”之間編寫網(wǎng)頁(yè)0203.html頂部?jī)?nèi)容的HTML代碼，如表2-20所示。表2-20網(wǎng)頁(yè)0203.html頂部?jī)?nèi)容的HTML代碼（2）網(wǎng)頁(yè)0203.html的中部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0203.html中部?jī)?nèi)容的CSS代碼如表2-21所示。表2-21網(wǎng)頁(yè)0203.html中部?jī)?nèi)容的CSS代碼

在“<articleclass="fin">”和“</article>”之間編寫網(wǎng)頁(yè)0203.html中部?jī)?nèi)容的HTML代碼，如表2-22所示。表2-22網(wǎng)頁(yè)0203.html中部?jī)?nèi)容的HTML代碼續(xù)表（3）網(wǎng)頁(yè)0203.html的底部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0203.html底部?jī)?nèi)容的CSS代碼如表2-23所示。表2-23網(wǎng)頁(yè)0203.html底部?jī)?nèi)容的CSS代碼

在“<footerclass="site">”和“</footer>”之間編寫網(wǎng)頁(yè)0203.html底部?jī)?nèi)容的HTML代碼，如表2-24所示。表2-24網(wǎng)頁(yè)0203.html底部?jī)?nèi)容的HTML代碼【網(wǎng)頁(yè)瀏覽】保存網(wǎng)頁(yè)0203.html，在瀏覽器GoogleChrome中的瀏覽效果如圖2-3所示。同步訓(xùn)練任務(wù)2-4設(shè)計(jì)新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁(yè)【任務(wù)描述】編寫HTML代碼和CSS代碼，設(shè)計(jì)圖2-4所示的新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁(yè)0204.html。圖2-4新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁(yè)0204.html的瀏覽效果

新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁(yè)0204.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)。頂部?jī)?nèi)容包括Logo圖片和標(biāo)題文字，中部?jī)?nèi)容包括多行的站內(nèi)頁(yè)面導(dǎo)航超鏈接，底部?jī)?nèi)容包括多個(gè)超鏈接和版權(quán)信息。網(wǎng)頁(yè)0204.html頂部結(jié)構(gòu)使用<header>標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用<section>標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實(shí)現(xiàn)?！救蝿?wù)實(shí)施】1．網(wǎng)頁(yè)0204.html的主體結(jié)構(gòu)設(shè)計(jì)在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)\0204”中創(chuàng)建網(wǎng)頁(yè)0204.html。（1）編寫網(wǎng)頁(yè)0204.html通用的CSS代碼網(wǎng)頁(yè)0204.html通用的CSS代碼如表2-25所示。表2-25網(wǎng)頁(yè)0204.html通用的CSS代碼（2）編寫網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的CSS代碼網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的CSS代碼如表2-26所示。表2-26網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的HTML代碼網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的HTML代碼如表2-27所示。表2-27網(wǎng)頁(yè)0204.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁(yè)0204.html的局部?jī)?nèi)容設(shè)計(jì)（1）網(wǎng)頁(yè)0204.html的頂部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0204.html頂部?jī)?nèi)容的CSS代碼見(jiàn)本書提供的電子資源。在“<header>”與“</header>”之間編寫網(wǎng)頁(yè)0204.html頂部?jī)?nèi)容的HTML代碼，如表2-28所示。表2-28網(wǎng)頁(yè)0204.html頂部?jī)?nèi)容的HTML代碼（2）網(wǎng)頁(yè)0204.html的中部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0204.html中部?jī)?nèi)容的CSS代碼見(jiàn)本書提供的電子資源。在“<sectionclass="main-navigation">”和“</section>”之間編寫網(wǎng)頁(yè)0204.html中部?jī)?nèi)容的HTML代碼，如表2-29所示。表2-29網(wǎng)頁(yè)0204.html中部?jī)?nèi)容的HTML代碼續(xù)表（3）網(wǎng)頁(yè)0204.html的底部?jī)?nèi)容設(shè)計(jì)網(wǎng)頁(yè)0204.html底部?jī)?nèi)容的CSS代碼見(jiàn)本書提供的電子資源。在“<footerclass="footbox">”和“</footer>”之間編寫網(wǎng)頁(yè)0204.html底部?jī)?nèi)容的HTML代碼，如表2-30所示。表2-30網(wǎng)頁(yè)0204.html底部?jī)?nèi)容的HTML代碼【網(wǎng)頁(yè)瀏覽】保存網(wǎng)頁(yè)0204.html，在瀏覽器GoogleChrome中的瀏覽效果如圖2-4所示。任務(wù)2-5設(shè)計(jì)新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁(yè)【任務(wù)描述】編寫HTML代碼和CSS代碼，設(shè)計(jì)圖2-5所示的新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁(yè)0205.html。圖2-5新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁(yè)0205.html的瀏覽效果

在網(wǎng)頁(yè)0205.html中單擊“A+”超鏈接，可以將文本新聞的文字大小設(shè)置為24px，單擊“A-”超鏈接，可以將文本新聞的文字大小重新設(shè)置為16px，即該網(wǎng)頁(yè)中文本新聞的文字大小可以在“24px”和“16px”之間進(jìn)行動(dòng)態(tài)切換。新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁(yè)0205.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)。頂部?jī)?nèi)容包括回首頁(yè)超鏈接和標(biāo)題文字，中部?jī)?nèi)容包括文本新聞的標(biāo)題、來(lái)源和正文，底部?jī)?nèi)容包括多個(gè)超鏈接和版權(quán)信息。網(wǎng)頁(yè)0205.html頂部結(jié)構(gòu)使用<header>標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用<article>標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實(shí)現(xiàn)?！救蝿?wù)實(shí)施】1．網(wǎng)頁(yè)0205.html的主體結(jié)構(gòu)設(shè)計(jì)在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)\0205”中創(chuàng)建網(wǎng)頁(yè)0205.html。（1）編寫網(wǎng)頁(yè)0205.html通用的CSS代碼網(wǎng)頁(yè)0205.html通用的CSS代碼如表2-31所示。表2-31網(wǎng)頁(yè)0205.html通用的CSS代碼（2）編寫網(wǎng)頁(yè)0205.html主體結(jié)構(gòu)的CSS代碼網(wǎng)頁(yè)0205.html主體結(jié)構(gòu)的CSS代碼如表2-32所示。表2-32網(wǎng)頁(yè)0205.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁(yè)0205.html主體結(jié)構(gòu)的HTML代碼網(wǎng)頁(yè)0205.ht