博學谷——讓IT教學更簡單，讓IT學習更有效 PAGE 1 第4章 補充案例 【案例4-1】 減肥運動排行榜 一、案例描述 考核知識點 屬性選擇器 練習目標 掌握屬性選擇器的使用方法。 需求分析 減肥一直是人們熱于討論的一個話題，減肥方式分為好多種，其中運動減肥算是健康減肥的方式之一，本案例通過屬性選擇器的使用，來制作一個減肥運動排行榜。 案例分析 效果如圖4-1所示。 減肥運動排行榜效果展示 具體實現(xiàn)步驟如下： 定義列表dl來搭建結(jié)構(gòu)。 通過屬性選擇器添加樣式。 二、案例實現(xiàn) 1、制作頁面結(jié)構(gòu) 新建HTML文件，具體代碼如下： !doctype html html head meta charset=“utf-8” title減肥運動排行榜/title /head body h2減肥運動排行榜/h2 dldt1、壁球/dtdd每半小時消耗熱量三百卡。可鍛煉兩腿靈活性，可增加速度能力。但心肺功能較差者不宜。/dd /dl dldt id=th12、跳繩/dtdd每半小時消耗熱量四百卡?？筛纳迫说淖藨B(tài)。三十五歲以上的人跳繩不可過于激烈。/dd /dl dldt id=th23、滑旱冰/dtdd每半小時消耗熱量一百七十五卡?？稍鰪娙盱`活性和局部力量。/dd /dl dldt id=the14、散步/dtdd每半小時消耗熱量七十五卡。它能改善血液循環(huán)，活動關(guān)節(jié)和有助于減肥。/dd /dl dldt id=the25、慢跑/dtdd每半小時消耗熱量三百卡。有益于心肺和血液循環(huán)。跑的路程越長，消耗的熱量越大。/dd /dl /body /html 2、定義CSS樣式 使用內(nèi)嵌式CSS樣式表為頁面添加樣式，具體CSS代碼如下： style type=text/css dt{font-size: 18px;color:red;font-weight: bold; } dt[id$=1]{color:#f65e03;} dt[id$=2]{color:#f6d703;} dt[id^=the]{color:#0386f6;} /style 保存后，在谷歌瀏覽器中預覽，效果如圖4-2所示。 減肥運動排行榜效果展示 注意： 1、屬性選擇器分為三種，注意區(qū)分三者間的用法和書寫區(qū)別。 【案例4-2】 兄弟選擇器的使用 一、案例描述 考核知識點 兄弟選擇器 練習目標 掌握兄弟選擇器的使用方法。 需求分析 在網(wǎng)頁中瀏覽一些文學作品時，經(jīng)常會看到標題下第一段落的顏色與其他段落不同，本案例通過引入關(guān)系選擇器，來實現(xiàn)這一效果。 案例分析 效果如圖4-3所示。 兄弟選擇器的應用效果 具體實現(xiàn)步驟如下： 在頁面主體body中添加header元素用于定義標題。 p標記用于定義文章內(nèi)容。 通過兄弟選擇器定義第一段的樣式。 二、案例實現(xiàn) 1、制作頁面結(jié)構(gòu) 新建HTML文件，具體代碼如下： !doctype html html head meta charset=“utf-8” title兄弟選擇器的使用/title /head body header家鄉(xiāng)的雪/header pnbsp;nbsp;我的家鄉(xiāng)很美，春天花香鳥語，夏天百鳥齊飛，秋天碩果蕾蕾，冬天是最美的，尤其是冬天的雪。/p pnbsp;nbsp;雪紛紛揚揚來到人間，像一只只銀色蝴蝶，在空中翩翩起舞，頃刻間，天地一色，房屋上白了，想一座座玉山；樹上全白了，像一個個用白銀砌出的雕像；地上全白了，像一張張雪白的地毯。我仿佛來到了一個粉妝玉砌的童話世界。踩在雪地上發(fā)出“咯吱咯吱’的聲音。/p /body /html 2、定義CSS樣式 使用內(nèi)嵌式CSS樣式表為頁面添加樣式，具體CSS代碼如下： style type=text/css header{font-size: 20px;font-weight: bold; } header+p{color:#f4961d;} /style 保存后，在谷歌瀏覽器中預覽，效果如圖4-4所示。 兄弟選擇器的應用效果 注意： 1、本案例使用到的為兄弟選擇器中的臨近兄弟選擇器，注意區(qū)分于普通兄弟選擇器的區(qū)別。 【案例4-3】 設(shè)置文章段落樣式 一、案例描述 考核知識點 : o CSS :nth-child(n) 選擇器 nth-child(n)和:nth-last-child(n)選擇器 練習目標 掌握: o CSS :nth-child(n) 選擇器 nth-child(n)和:nth-last-child(n)選擇器的使用方法。 需求分析 通常一篇文章可以由很多個段落來描述，為不同的段落設(shè)置不同的樣式為網(wǎng)頁的一種表現(xiàn)形式，一般可以通過添加類名的方法實現(xiàn)，但是為每一個段落添加類

相關(guān)知識

4第四章家庭健康護理
第二章
如何選擇最適合你的健身器材？
1第一章
第一章 環(huán)境質(zhì)量監(jiān)測.doc
第二章 建立塑形理論模型
選擇健身器材注意什么
第十二章 慢性疼痛康復
選擇健康:女性健身篇
選擇健康：女性健身篇

網(wǎng)址: 第4章 CSS3選擇器 http://www.u1s5d6.cn/newsview170264.html