第二章补充案例

Size: px

Start display at page:

Download "第二章补充案例"

稀侠莘
5 years ago
Views:

1 第 2 章补充案例案例 2-1 创建三级列表一案例描述 1 考核知识点 ul 元素 ol 元素 2 练习目标掌握列表嵌套的方法熟练地使用列表的嵌套制作多级列表 3 需求分析在使用列表时, 列表项中有可能包含若干子列表项, 要想在列表项中定义子列表项就需要将列表进行嵌套为了让初学者熟悉列表嵌套的方法, 本案例通过无序列表和有序列表进行嵌套, 实现一个三级列表效果 4 案例分析 1) 效果如图 2-1 所示图 2-1 列表的嵌套效果 2) 具体实现步骤如下 : a) 定义无序列表 <ul> b) 在无序列表 <ul> 的子列表项 <li> 中嵌套有序列表二案例实现新建 HMTL 文件, 具体代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 创建三级列表 </title> 1

2 6 </head> 7 <body> 8 <ul> 9 <li> 咖啡 10 <ul> 11 <li> 摩卡 </li> 12 <li> 蓝山 </li> 13 </ul> 14 </li> 15 <li> 茶 16 <ul> 17 <li> 红茶 </li> 18 <li> 绿茶 19 <ol> 20 <li> 龙井 </li> 21 <li> 碧螺春 </li> 22 </ol> 23 </li> 24 </ul> 25 </li> 26 <li> 牛奶 </li> 27 </ul> 28 </body> 29 </html> 保存后, 在火狐浏览器中预览, 效果如图 2-2 所示图 2-2 列表的嵌套注意 : 1 <li> 与 </li> 之间相当于一个容器, 可以容纳所有的元素 2 <ul></ul> 和 <ol></ol> 中只能嵌套 <li></li>, 直接在 <ul></ul> 或 <ol></ol> 标记中输入文字的做法是不被允许的 2

案例 2-2 定义列表实现图文混排一案例描述 1 考核知识点 dl 元素 2 练习目标掌握定义列表的基本语法熟练地使用定义列表实现图文混排 3 需求分析图文混排是网页中常见的效果, 而定义列表可用于对术语名词或图片进行解释和描述当使用定义列表描述图片时, 可轻松实现图文混排本案例将运用定义列表实现一个图文混排的效果 4 案例分析 1) 效果如图 2-3 所示图 2-3

3 案例 2-2 定义列表实现图文混排一案例描述 1 考核知识点 dl 元素 2 练习目标掌握定义列表的基本语法熟练地使用定义列表实现图文混排 3 需求分析图文混排是网页中常见的效果, 而定义列表可用于对术语名词或图片进行解释和描述当使用定义列表描述图片时, 可轻松实现图文混排本案例将运用定义列表实现一个图文混排的效果 4 案例分析 1) 效果如图 2-3 所示图 2-3 定义列表的图文混排 2) 具体实现步骤如下 : a) 使用 dt 标记定义图像 b) 使用 dd 标记定义对图像解释说明的文字 c) 对 dt 和 dd 构成的盒子均设置浮动二案例实现 1 制作页面结构新建 HMTL 文件, 具体代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 定义列表实现图文混排 </title> 6 </head> 7 3

4 8 <body> 9 <dl class="content"> 10 <dt><img src="images/man_r1_c2.jpg" alt=" 谈华为的管道战略 "/></dt> 11 <dd> 12 <h3 class="font3"> 谈华为的管道战略 </h3> 13 <p> 华为执行副总裁徐直军 : 华为致力于通过提升管道容量增强管道使能优化管道管理, 使管道更宽管道覆盖更广客户体验更好 </p> 14 </dd> 15 </dl> 16 </body> 17 </html> 在上面的代码中, 将图像嵌套于 <dt></dt> 标记中, 将对图像解释说明的文字嵌套于 <dd></dd> 标记中然后对 <dt></dt> 和 <dd></dd> 构成的盒子均设置浮动, 这是实现图文混排的关键关于浮动这里了解即可, 在后面的章节中将会详细介绍 2 定义 CSS 样式使用行内式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : 1 <style type="text/css"> 2 body,dl,dt,dd,h3,p,img{ padding:0; margin:0; border:0;} 3 body{color: #3C3C3C; font-family: Arial,Helvetica,sans-serif; font-size: 12px;} 4.content{ 5 width:316px; 6 height:137px; 7 margin:20px auto; 8 background-color:#ffffff; 9 border:1px solid #669800; 10 } 11.content dt{ float:right;} /*dt 标记控制的, 图像所在的盒子右浮动 */ 12.content dt img{ display:block;} /* 去掉图像底部 3px 的间隙 */ 13.content dd { 14 width:180px; 15 float:left; /*dd 标记控制的, 文本所在的盒子左浮动 */ 16 padding:18px px; 17 } 18.content dd h3{ 19 font-size: 15px; 20 height:28px; 21 color:#669800; 22 } 23.content dd p{line-height:19px;} 24 </style> 保存后, 在火狐浏览器中预览, 效果如图 2-4 所示 4

图 2-4 定义列表的图文混排注意 : 1 <dt> 与 </dt> <dd> 与 </dd> 之间相当于一个容器, 可以容纳所有的元素但是 <dl></dl> 中只能嵌套 <dt></dt> 与 <dd></dd>, 直接在 <dl></dl> 标记中输入文字的做法是不被允许的 2 使用定义列表实现图文混排的关键在于对 dt 和 dd 均设置浮动 3 上面代码的第 18 行用于去掉图像底部

5 图 2-4 定义列表的图文混排注意 : 1 <dt> 与 </dt> <dd> 与 </dd> 之间相当于一个容器, 可以容纳所有的元素但是 <dl></dl> 中只能嵌套 <dt></dt> 与 <dd></dd>, 直接在 <dl></dl> 标记中输入文字的做法是不被允许的 2 使用定义列表实现图文混排的关键在于对 dt 和 dd 均设置浮动 3 上面代码的第 18 行用于去掉图像底部 3px 的间隙, 这里了解即可, 在第 9 章将详细介绍案例 2-3 灵活的列表项目符号一案例描述 1 考核知识点 ul 元素 2 练习目标掌握背景图像定义列表项目符号的方法熟练地使用链接伪类控制超链接文本复习盒子模型的相关知识 3 需求分析在实际网页制作过程中, 为了更高效地控制列表项目符号, 通常将列表的 list-style 属性值定义为 none, 然后通过为 <li> 设置背景图像的方式实现不同的列表项目符号接下来, 通过创建一个公司信息动态的案例做具体演示 4 案例分析 1) 效果如图 2-5 所示 5

图 2-5 灵活的列表项目符号 2) 具体实现步骤如下 : a) 定义一个 class 为 all 的大盒子, 用于对页面的整体控制 b) 使用 h2 标记和 ul 标记将页面分为标题和内容两部分 c) 为 <li> 设置背景图像 d) 通过链接伪类控制文本样式二案例实现 1 制作页面结构新建 HTML 页面, 具体代码如下 : 1 <!

6 图 2-5 灵活的列表项目符号 2) 具体实现步骤如下 : a) 定义一个 class 为 all 的大盒子, 用于对页面的整体控制 b) 使用 h2 标记和 ul 标记将页面分为标题和内容两部分 c) 为 <li> 设置背景图像 d) 通过链接伪类控制文本样式二案例实现 1 制作页面结构新建 HTML 页面, 具体代码如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 背景图像定义列表项目符号 </title> 7 </head> 8 <body> 9 <div class="all"> 10 <h2 class="hd"> 公司动态 </h2> 11 <ul class="bd"> 12 <li><a href="#"> 传智播客大型人才招聘会成功举行 </a></li> 13 <li><a href="#"> 设计免费公开课 - 授技数码照片图像精修技巧 </a></li> 14 <li><a href="#"> 花再多钱也买不来的 UI 面试神器免费送啦 </a></li> 15 <li><a href="#"> 传智播客 2014 版全新 IT 入门教程光盘免费领 </a></li> 16 </ul> 17 </div> 18 </body> 19 </html> 在上面的代码中, 定义了一个 class 为 all 的大盒子, 用于对页面元素的整体控制然后使用 h2 标记和 ul 标记定义页面的标题和内容 2 定义 CSS 样式 6

7 使用内嵌式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : 1 <style type="text/css"> 2 body,h2,ul,li{ padding:0; margin:0; list-style:none;} 3.all{width:300px; height:160px; margin:20px auto; border:1px solid #D9E0EE; border-top:3px solid #FF8400;} 4.hd{height:35px; padding-left:10px; font-size:18px; line-height:35px;} 5.bd{border-top:1px solid #D9E0EE; padding:5px px; } 6.bd li{line-height:24px; background:url(images/qipao.jpg) no-repeat left center; padding-left:18px;} 7 a:link,a:visited{font-size:12px; text-decoration:none; color:#3c3c3c;} 8 a:hover{color:#ff8400; text-decoration:underline;} 9.one:link,.one:visited{color:#FF8400;} 10.two:link,.two:visited{color:#0080C0;} 11.two:hover{color:#FF8400;} 12 </style> 保存后, 在火狐浏览器中预览, 效果如图 2-6 所示图 2-6 灵活的列表项目符号注意 : 1 同时使用链接的 4 种伪类时, 通常按照 a:link a:visited a:hover 和 a:active 的顺序书写, 否则定义的样式可能不起作用 2 实际工作中, 通常只需要使用 a:link a:visited 和 a:hover 定义未访问访问后和鼠标悬停时的链接样式 3 常常对 a:link 和 a:visited 应用相同的样式, 使未访问和访问后的链接样式保持一致案例 2-4 easy 导航栏一案例描述 1 考核知识点 7

8 ul 元素 2 练习目标掌握链接伪类控制超链接样式的方法掌握列表的具体应用复习背景图像属性的相关知识 3 需求分析定义超链接时, 为了提高用户体验, 经常需要为超链接指定不同的状态, 使得超链接在点击前点击后和鼠标悬停时的样式不同为了便于初学者的理解和掌握, 接下来, 通过创建一个简单的导航栏做具体演示 4 案例分析 1) 效果如图 2-7 所示图 2-7 导航栏显示效果 2) 具体实现步骤如下 : a) 定义无序列表 <ul> b) 为 <ul> 的子列表项 <li> 添加超链接 c) 通过 CSS 伪类控制超链接样式二案例实现 1 制作页面结构新建 HTML 页面, 具体代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>easy 导航栏 </title> 6 </head> 7 <body> 8 <ul> 9 <li><a href="#"> 网址大全 </a></li> 10 <li><a href="#"> 电视剧 </a></li> 11 <li><a href="#"> 最新电影 </a></li> 12 <li><a href="#"> 网址大全 </a></li> 13 <li><a href="#"> 热门游戏 </a></li> 14 <li><a href="#"> 小游戏 </a></li> 15 </ul> 16 </body> 17 </html> 2 定义 CSS 样式 8

display:block; text-align:center; } 7 a:hover{background-color:red;} 保存后, 在火狐浏览器中预览, 效果如图 2-8 所示图 2-8 默认显示效果当鼠标移上链接文本时, 该文本会出现背景, 用于提示用户当前的操作项如图 2-9 所示, 即为鼠标移上

9 使用内嵌式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : 1 <style type="text/css"> 2 body,ul,li{margin:0; padding:0; list-style:none;} 3 body{font-size:14px; color:#3c3c3c;} 4 ul{margin:50px auto; width:660px;} 5 ul li{float:left; width:110px; height:42px; line-height:42px;} 6 a:link,a:visited{color:#3c3c3c; text-decoration:none; display:block; text-align:center; } 7 a:hover{background-color:red;} 保存后, 在火狐浏览器中预览, 效果如图 2-8 所示图 2-8 默认显示效果当鼠标移上链接文本时, 该文本会出现背景, 用于提示用户当前的操作项如图 2-9 所示, 即为鼠标移上网址大全时页面的显示效果图 2-9 鼠标移上显示效果注意 : 在实现本案例时, 需要注意以下几点 : 1 一个盒子只能添加一个背景图像, 要实现本例的效果则需要 4 个盒子 2 可以设置背景图像的平铺方式, 本案例使用 no-repeat 定义背景图像不平铺 3 设置背景时通常使用其复合属性 4 经常需要使用 background-position 属性改变背景图像的位置 9

10 案例 2-5 制作百度歌曲排行榜一案例描述 1 考核知识点有序列表 <ol> 2 练习目标掌握有序列表的应用方法理解 list-style-position 属性掌握 CSS 控制列表样式的应用方法复习背景属性的相关知识 3 需求分析通过定义有序列表, 可以使其各个列表项按照一定的顺序排列为了便于初学者的理解和掌握, 接下来, 通过制作一个百度音乐排行榜的案例做具体演示 4 案例分析 1) 效果如图 2-10 所示图 2-10 百度音乐排行榜 2) 具体实现步骤如下 : a) 定义有序列表 <ol> b) 再有序列表 <ol> 中, 定义五对 <.li></li> 列表项 c) 通过 CSS 设置列表样式二案例实现 1 制作页面结构新建 HTML 页面, 代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 10

11 5 <title> 制作百度歌曲排行榜 </title> 6 </head> 7 <body> 8 <ol> 9 <li> 小苹果 <span> 筷子兄弟 </span></li> 10 <li class="one"> 后会有期 <span> 佚名 </span></li> 11 <li> 因为爱情 <span> 佚名 </span></li> 12 <li class="one"> 会不会 <span> 佚名 </span></li> 13 <li> 古柏 <span> 佚名 </span></li> 14 </ol> 15 </body> 16 </html> 2 定义 CSS 样式使用内嵌式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : 1 <style> 2 *{margin:0px; padding:0px;} 3 ol{width:300px; height:200px; margin:20px auto; border:#f1f1f1 1px solid; } 4 li{width:290px; height:30px; color:#519b9f; padding:10px px; list-style-position:inside; background:url(images/up.jpg) no-repeat 170px 14px;} 5.one{background:#F3F3F3 url(images/down.jpg) no-repeat 170px 14px;} 6 span{} 7 </style> 保存后, 在火狐浏览器中预览, 效果如图 2-11 所示图 2-11 百度音乐排行榜 11

案例 2-6 简单的光影资讯页面一案例描述 1 考核知识点无序列表 <ul> 2 练习目标掌握列表的应用掌握 CSS 控制列表样式的方法掌握超链接伪类的定义方法复习盒子模型相关知识 3 需求分析在制作网页时, 为了增强网页的功能性, 经常需要将列表和超链接配合使用, 为了便于初学者的理解和掌握, 接下来,

12 案例 2-6 简单的光影资讯页面一案例描述 1 考核知识点无序列表 <ul> 2 练习目标掌握列表的应用掌握 CSS 控制列表样式的方法掌握超链接伪类的定义方法复习盒子模型相关知识 3 需求分析在制作网页时, 为了增强网页的功能性, 经常需要将列表和超链接配合使用, 为了便于初学者的理解和掌握, 接下来, 通过制作一个简单光影资讯页面的案例做具体演示 4 案例分析 1) 效果如图 2-12 所示图 2-12 光影资讯页面 2) 具体实现步骤如下 : a) 定义一个大盒子对页面做整体控制 b) 定义 <h2> 标题, 并为其设置背景图 movies c) 定义无序列表 <ul> d) 定义三对 <li></li> 列表项 e) 通过 CSS 控制列表样式, 并定义链接伪类二案例实现 1 制作页面结构 12

13 新建 HTML 页面, 代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 简单的光影资讯页面 </title> 6 <link href="css/style01.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 <div class="box"> 10 <h2></h2> 11 <ul> 12 <li> 13 <a href="#"> 变形金刚 4 绝境逢生 (2014)<br/></a> 14 <p class="text"> 芝加哥一战后, 汽车人霸天虎销声匿迹一群天才科学家欲研发难以驾驭的新技术而一个古老强大的变形金刚出现并威胁着人类, 决战一触即发 </p> 15 </li> 16 <li> 17 <a href="#"> 罪恶之城 2 (2014)<br/></a> 18 <p class="text"> 芝加哥一战后, 汽车人霸天虎销声匿迹一群天才科学家欲研发难以驾驭的新技术而一个古老强大的变形金刚出现并威胁着人类, 决战一触即发 </p> 19 </li> 20 <li> 21 <a href="#"> 加勒比海盗 5 (2014)<br/></a> 22 <p class="text"> 芝加哥一战后, 汽车人霸天虎销声匿迹一群天才科学家欲研发难以驾驭的新技术而一个古老强大的变形金刚出现并威胁着人类, 决战一触即发 </p> 23 </li> 24 </ul> 25 </div> 26 </body> 27 </html> 2 定义 CSS 样式使用链入式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : "utf-8"; 2 /* CSS Document */ 3 *{margin:0px; padding:0px; list-style:none; border:0;} 4.box{width:600px; height:400px; background:#ede9dd; margin:30px auto; padding-top:20px; border:#ccc 1px solid;} 5 h2{width:600px; height:37px;background:url(../images/movie.jpg) no-repeat center center;} 6 a:link,a:visited{text-decoration:none; color:#903; font-size:16px; font-weight:bold;} 7 a:hover{text-decoration:underline; color:#f96;} 13

8 li{width:400px; height:100px; border-top:1px #CCC dotted; margin:0 auto; background:url(../images/star.jpg) no-repeat 10px 10px; padding:10px 0 0 95px;} 9.

14 8 li{width:400px; height:100px; border-top:1px #CCC dotted; margin:0 auto; background:url(../images/star.jpg) no-repeat 10px 10px; padding:10px px;} 9.text{margin-top:10px;} 保存后, 在火狐浏览器中预览, 效果如图 2-13 所示图 2-13 光影资讯页面案例 2-7 家居大视野一案例描述 1 考核知识点无序列表 <ul> 2 练习目标掌握链接伪类设置文本样式熟悉列表布局的方法复习盒子模型的相关知识 3 需求分析在实际工作中, 常常需要应用列表进行简单的布局为了让初学者熟悉列表布局的方法, 接下来, 通过一个家居大视野的案例做具体演示 4 案例分析 1) 效果如图 2-14 所示 14

图 2-14 家居大视野效果图 2) 具体实现步骤如下 : a) 定义标题 b) 创建无序列表 <ul> c) 在无序列表 <ul> 的子列表项 <li> 中插入图片和段落文本 d) 为段落文本设置超链接, 将超链接 <a> 标记转换为行内块元素, 同时为其指定宽度和高度 e) 定义超链接的背景图像, 当鼠标经过时, 更换背景图像二案例实现 1 制作页面结构新建 HTML 页面, 代码如下

15 图 2-14 家居大视野效果图 2) 具体实现步骤如下 : a) 定义标题 b) 创建无序列表 <ul> c) 在无序列表 <ul> 的子列表项 <li> 中插入图片和段落文本 d) 为段落文本设置超链接, 将超链接 <a> 标记转换为行内块元素, 同时为其指定宽度和高度 e) 定义超链接的背景图像, 当鼠标经过时, 更换背景图像二案例实现 1 制作页面结构新建 HTML 页面, 代码如下 : 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 家居大视野 </title> 6 </head> 7 <body> 8 <div class="box"> 9 <h2> 家居大视野 </h2> 10 <ul> 11 <li> 12 <img src="images/pic_1.jpg"/> 13 <p><a href="#"> 室外居家空间设计 </a></p> 14 </li> 15 <li> 16 <img src="images/pic_2.jpg"/> 17 <p><a href="#"> 室外居家空间设计 </a></p> 18 </li> 19 <li> 20 <img src="images/pic_3.jpg"/> 15

16 21 <p><a href="#"> 室外居家空间设计 </a></p> 22 </li> 23 <li> 24 <img src="images/pic_4.jpg"/> 25 <p><a href="#"> 室外居家空间设计 </a></p> 26 </li> 27 <li> 28 <img src="images/pic_5.jpg"/> 29 <p><a href="#"> 室外居家空间设计 </a></p> 30 </li> 31 </ul> 32 </div> 33 </body> 34 </html> 在上面的代码中, 首先定义了一个 class 为 box 的大盒子, 用于对页面元素的整体控制然后使用 h2 标记和 ul 标记定义页面的标题和内容 2 定义 CSS 样式使用行内式 CSS 样式表为页面添加样式, 具体 CSS 代码如下 : 1 <style type="text/css"> 2 body{color:#000; font-size:12px; font-family:" 宋体 ";} 3 h2,ul,li,p{margin:0;padding:0; list-style:none;} 4.box{width:950px; height:360px; margin:0 auto;} 5 h2{width:950px; height:62px; font-size:14px; text-align:center; border-top:5px solid #000; padding-top:5px; background:url("images/nav_bg.jpg") repeat-x;} 6 ul{width:932px; height:288px; padding-left:18px;} 7 ul li{width:165px; height:255px; background:url("images/bg.jpg"); padding:4px 5px 0; float:left; margin-right:9px;} 8 p{padding-top:10px; text-align:center;} 9 a:link,a:visited{color:#000; text-decoration:none;} 10 a:hover{color:#930; text-decoration:underline;} 11 </style> 在上面的 CSS 代码中, 第 7 行的 float:left; 用于设置列表项左浮动, 从而使多个列表项排列在同一行对于浮动, 这里初学者了解即可, 本书将在后面的章节对浮动进行具体介绍保存后, 在火狐浏览器中预览, 效果如图 2-15 所示 16

17 图 2-15 家居大视野注意 : 对于一行文本, 当行高小于盒子的高度时, 文本内容垂直偏上, 行高大于盒子的高度时, 文本内容垂直偏下, 如果行高正好等于盒子的高度, 文本内容将垂直居中显示 17

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

第二章 补充案例

第二章补充案例