第4章 CSS3选择器_补充案例.docxVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 1 第4章 补充案例 【案例4-1】 减肥运动排行榜 一、案例描述 考核知识点 属性选择器 练习目标 掌握属性选择器的使用方法。 需求分析 减肥一直是人们热于讨论的一个话题，减肥方式分为好多种，其中运动减肥算是健康减肥的方式之一，本案例通过属性选择器的使用，来制作一个减肥运动排行榜。 案例分析 效果如图4-1所示。 减肥运动排行榜效果展示 具体实现步骤如下： 定义列表dl来搭建结构。 通过属性选择器添加样式。 二、案例实现 1、制作页面结构 新建HTML文件，具体代码如下： !doctype html html head meta charset=“utf-8” title减肥运动排行榜/title /head body h2减肥运动排行榜/h2 dl dt1、壁球/dt dd每半小时消耗热量三百卡。可锻炼两腿灵活性，可增加速度能力。但心肺功能较差者不宜。/dd /dl dl dt id=th12、跳绳/dt dd每半小时消耗热量四百卡。可改善人的姿态。三十五岁以上的人跳绳不可过于激烈。/dd /dl dl dt id=th23、滑旱冰/dt dd每半小时消耗热量一百七十五卡。可增强全身灵活性和局部力量。/dd /dl dl dt id=the14、散步/dt dd每半小时消耗热量七十五卡。它能改善血液循环，活动关节和有助于减肥。/dd /dl dl dt id=the25、慢跑/dt dd每半小时消耗热量三百卡。有益于心肺和血液循环。跑的路程越长，消耗的热量越大。/dd /dl /body /html 2、定义CSS样式 使用内嵌式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、属性选择器分为三种，注意区分三者间的用法和书写区别。 【案例4-2】 兄弟选择器的使用 一、案例描述 考核知识点 兄弟选择器 练习目标 掌握兄弟选择器的使用方法。 需求分析 在网页中浏览一些文学作品时，经常会看到标题下第一段落的颜色与其他段落不同，本案例通过引入关系选择器，来实现这一效果。 案例分析 效果如图4-3所示。 兄弟选择器的应用效果 具体实现步骤如下： 在页面主体body中添加header元素用于定义标题。 p标记用于定义文章内容。 通过兄弟选择器定义第一段的样式。 二、案例实现 1、制作页面结构 新建HTML文件，具体代码如下： !doctype html html head meta charset=“utf-8” title兄弟选择器的使用/title /head body header家乡的雪/header pnbsp;nbsp;我的家乡很美，春天花香鸟语，夏天百鸟齐飞，秋天硕果蕾蕾，冬天是最美的，尤其是冬天的雪。/p pnbsp;nbsp;雪纷纷扬扬来到人间，像一只只银色蝴蝶，在空中翩翩起舞，顷刻间，天地一色，房屋上白了，想一座座玉山；树上全白了，像一个个用白银砌出的雕像；地上全白了，像一张张雪白的地毯。我仿佛来到了一个粉妆玉砌的童话世界。踩在雪地上发出“咯吱咯吱’的声音。/p /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css header{ font-size: 20px; font-weight: bold; } header+p{color:#f4961d;} /style 保存后，在谷歌浏览器中预览，效果如图4-4所示。 兄弟选择器的应用效果 注意： 1、本案例使用到的为兄弟选择器中的临近兄弟选择器，注意区分于普通兄弟选择器的区别。 【案例4-3】 设置文章段落样式 一、案例描述 考核知识点 : \o CSS :nth-child(n) 选择器 nth-child(n)和:nth-last-child(n)选择器 练习目标 掌握: \o CSS :nth-child(n) 选择器 nth-child(n)和:nth-last-child(n)选择器的使用方法。 需求分析 通常一篇文章可以由很多个段落来描述，为不同的段落设置不同的样式为网页的一种表现形式，一般可以通过添加类名的方法实现，但是为每一个段落添加类