第三章补充案例

Size: px

Start display at page:

Download "第三章补充案例"

院慢洪
5 years ago
Views:

1 第四章补充案例案例 4-1 顶部导航栏 1 1 考核知识点边框的复合属性背景颜色灵活运用边框的复合属性掌握背景颜色的定义方法 3 需求分析制作网页时, 经常需要给盒子设置边框, 以修饰和美化元素的显示样式, 常用方法如下 : 对盒子的四条边定义不同宽度颜色样式的边框盒子背景颜色和边框的合理搭配 1) 指定盒子的宽度和高度 2) 给盒子的上边指定 3px 的橙色边框 3) 给盒子的下边指定 1px 的灰色边框 4) 给盒子指定浅灰色的背景颜色新建 HMTL 文件, 具体代码如下 : <title> 顶部导航栏 1</title>.topNav{height:40px; width:500px; border-top:3px solid #FF8500; border-bottom:1px solid #EDEEF0; background-color:#fcfcfc;}.topnav a{color:#4c4c4c; text-decoration:none; font-size:14px;} <div class="topnav"> <a href="#"> 网站首页 </a> 1

2 <a href="#"> 学校介绍 </a> <a href="#"> 学员作品 </a> <a href="#"> 留言薄 </a> </div> 保存后, 在火狐浏览器中预览, 效果如图 4-1 所示图 4-1 顶部导航栏 1 效果 1 实际工作中, 经常使用边框的复合属性 2 思考一下 : 这个案例中, 内部的链接文本没有在盒子中垂直居中如何使内部的链接在盒子中垂直居中呢? 案例 4-2 顶部导航栏 2 1 考核知识点元素类型的转换盒子模型的内边距属性掌握元素的分类及元素类型的转换熟练使用盒子模型的内边距属性熟悉一行文本在一个盒子中垂直居中的方法复习链接伪类 3 需求分析导航栏是网页的重要组成部分, 各个栏目之间的水平距离相同, 并且栏目内容在导航栏中垂直居中链接文本默认为灰黑色, 当鼠标移上时, 链接文本变为橙色 1) 在例 4-1 的基础上继续拓展 2

3 2) 因为超链接 (a) 是行内元素, 把它转换为行内块元素后就可以对其设置宽度和高度 3) 设置超链接的内边距, 让它们之间的水平距离相等 4) 利用行高等于盒子高度的方法, 让一行文本垂直居中显示对案例 4-1 进行修改, 具体代码如下 : <title> 顶部导航栏 2</title>.topNav{height:40px; width:500px; border-top:3px solid #FF8500; border-bottom:1px solid #EDEEF0; background-color:#fcfcfc;}.topnav a{color:#4c4c4c; text-decoration:none; font-size:14px; display:inline-block; height:40px; padding:0 20px; line-height:40px;}.topnav a:hover{color:#ff8500;} <div class="topnav"> <a href="#"> 网站首页 </a> <a href="#"> 学校介绍 </a> <a href="#"> 学员作品 </a> <a href="#"> 留言薄 </a> </div> 保存后, 在火狐浏览器中预览, 效果如图 4-2 所示图 4-2 顶部导航栏 2 效果 3

4 注意 : 留言簿的橙色是当鼠标经过时显示的颜色 1 首先用 display:inline-block; 将行内元素转换为行内块元素 2 不需要给超链接指定宽度, 使用内边距 (padding) 可以使元素间的水平距离相同 3 行高 (line-height) 和盒子的高度 (height) 相等时, 可以使其中的一行文本垂直居中案例 4-3 鼠标经过图标切换效果 1 考核知识点背景图像的复合属性及背景图像的位置掌握行内元素和块元素的转换熟悉为元素指定背景图像的方法掌握背景图像位置的设置方法, 以做出更精美的效果 3 需求分析根据前面学过的链接伪类, 做出以下效果 : 当鼠标经过时, 该链接的背景图像由一个购物车变为登录按钮 1) 必须为该链接指定宽度和高度, 所以需要将超链接 (a) 转换为块元素 2) 给超链接定义宽高和背景图像当鼠标经过时, 背景图像的位置上移, 超链接显示的是背景图像的下半部分新建 HTML 页面, 具体代码如下 : <title> 鼠标经过图标切换效果 </title> a{display:block; width:67px; height:32px; background:url(images/ico.png) no-repeat;} a:hover{background-position:bottom;} 4

<a href="#"></a> 保存后, 在火狐浏览器中预览, 效果如图 4-3 所示当鼠标经过时, 背景图像更换, 如图 4-4 所示图 4-3 链接正常时候的状态图 4-4 鼠标经过的状态某些情况下, 更换盒子的背景图像可以提供更好的用户体验更换背景图像的关键是合理地设置背景图像的位置 (background-position)

5 <a href="#"></a> 保存后, 在火狐浏览器中预览, 效果如图 4-3 所示当鼠标经过时, 背景图像更换, 如图 4-4 所示图 4-3 链接正常时候的状态图 4-4 鼠标经过的状态某些情况下, 更换盒子的背景图像可以提供更好的用户体验更换背景图像的关键是合理地设置背景图像的位置 (background-position) 在上面的案例中需要注意以下两点 : 1 超链接(a) 是行内元素, 不能直接定义宽度和高度, 所以需要使用 display:block; 将其转换为块元素 2 背景图像默认相对于盒子的左上角对齐当鼠标经过时, 需要将背景图像相对于盒子的底部对齐, 即使用 background-position:bottom; 案例 4-4 背景对联效果 - 恭贺新禧 1 考核知识点背景的复合属性 5

6 熟悉盒子的嵌套使用掌握调整背景图像位置的方法锻炼同学们的发散思维 3 需求分析一个页面, 左右两边为对联的上联和下联图像, 顶部为对联的横批图像, 中间为一张福字图像这样就需要定义四个不同的背景图像 1) 需要定义 4 个盒子, 它们层层嵌套 2) 新建一个大盒子, 背景为上联图像, 不平铺, 居左对齐 3) 在大盒子里嵌套一个同样大小的盒子 ( 第二个盒子 ), 背景为下联图像, 居右对齐, 不平铺 4) 在第二个盒子里嵌套一个同样大小的盒子 ( 第三个盒子 ), 背景图像为横批, 水平居中垂直居上对齐, 不平铺 5) 在第三个盒子里嵌套一个同样大小的盒子 ( 第四个盒子 ), 背景为福字图像, 居中显示新建 HTML 页面, 代码如下 : <title> 背景对联效果 - 恭贺新禧 </title>.box-big{height:927px; background:url(images/left.jpg) top left no-repeat;}.box-two{height:927px; background:url(images/right.jpg) top right no-repeat;}.box-three{height:927px; background:url(images/top.jpg) top center no-repeat;}.box-four{height:927px; background:url(images/bottom.jpg) center center no-repeat;} <div class="box-big"> <div class="box-two"> <div class="box-three"> <div class="box-four"> </div> </div> </div> </div> 6

保存后, 在火狐浏览器中预览, 效果如图 4-5 所示图 4-5 恭贺新禧效果 1 一个盒子只能添加一个背景图像, 要实现本例的效果则需要 4 个盒子 2 可以设置背景图像的平铺方式, 这里使用 no-repeat 定义背景图像不平铺 3 设置背景时通常使用其复合属性 4 经常需要使用 background-position 属性改变背景图像的位置案例

7 保存后, 在火狐浏览器中预览, 效果如图 4-5 所示图 4-5 恭贺新禧效果 1 一个盒子只能添加一个背景图像, 要实现本例的效果则需要 4 个盒子 2 可以设置背景图像的平铺方式, 这里使用 no-repeat 定义背景图像不平铺 3 设置背景时通常使用其复合属性 4 经常需要使用 background-position 属性改变背景图像的位置案例 4-5 教程模块 1 考核知识点盒子模型属性的综合运用掌握盒子模型的边框属性内边距属性外边距属性熟悉链接伪类的使用 3 需求分析教程模块包含标题和内容两部分, 其中内容部分为带有超链接功能的列表, 链接文本默认为黑色, 当鼠标经过时显示为橙色 1) 给最外层的大盒子指定宽高, 并为其设置 3px 的边框, 其中上边框为橙色, 其他 3 个方向的边框均为灰色 7

8 2) 盒子的上部为标题, 其字号为 14px, 有 20px 的左内边距 3) 盒子的下部为内容, 由带有超链接功能的列表项组成, 其字号大小为 12px, 有 20px 的左内边距当鼠标经过的时候, 超链接中的文本颜色变为橙色新建 HTML 页面, 代码如下 : <title> 教程模块 </title> body,div,h2,ul,li{margin:0; padding:0;} ul{list-style:none;}.box{width:300px; height:250px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; margin:50px;}.box h2{height:40px; font-size:14px; line-height:40px; border-bottom:1px solid #D9E0EE; padding-left:20px;}.box ul{margin-left:20px;}.box ul li{margin:15px 0;}.box ul a{font-size:12px; color:#000; text-decoration:none;}.box ul a:hover{color:#ff8400; text-decoration:underline;} <div class="box"> <h2> 教程 </h2> <ul> <li><a href="#"> 张鹏老师带你一周 hold 住 html+css 视频教程 </a></li> <li><a href="#"> 轻松学习网页设计系列视频教程 </a></li> <li><a href="#"> 张鹏 _ 带你轻松学习 Flash 动画制作 </a></li> <li><a href="#"> 韩奇峰带你 jq 快速入门到掌握核心技术 </a></li> <li><a href="#"> 韩奇峰 _JavaScrip 网页特效精华制作 </a></li> </ul> </div> 保存后, 在火狐浏览器中预览, 效果如图 4-6 所示 8

9 图 4-6 教程模块效果给大盒子定义边框时, 一定要先使用复合属性设置 4 个边框的样式, 再单独控制上边框的样式, 二者的顺序不能颠倒, 因为要考虑到 CSS 样式的层叠性案例 4-6 鼠标经过更换盒子边框颜色 1 考核知识点盒子的边框属性盒子的内边距属性掌握边框的复合属性理解为盒子设置内边距时, 盒子的实际大小变大熟悉链接伪类的一些应用技巧 3 需求分析一张图像, 边框为灰色, 且边框和图像之间有 3px 的距离当鼠标经过时, 图像的边框变为黑色, 边框和图像之间的距离不变 1) 使用超链接环绕图像, 超链接的宽高等于图像的宽高使用复合属性 border 设置超链接的边框样式 9

2) 由于图像与盒子 ( 超链接 ) 的边框之间有 3px 的距离, 所以需要给盒子设置 3px 的内边距 (padding) 3) 鼠标经过时, 使用链接的伪类更换盒子边框的颜色新建 HTML 页面, 代码如下 : <title> 鼠标经过更换盒子边框颜色 </title> a{border:1px solid #ccc; padding:3px;

10 2) 由于图像与盒子 ( 超链接 ) 的边框之间有 3px 的距离, 所以需要给盒子设置 3px 的内边距 (padding) 3) 鼠标经过时, 使用链接的伪类更换盒子边框的颜色新建 HTML 页面, 代码如下 : <title> 鼠标经过更换盒子边框颜色 </title> a{border:1px solid #ccc; padding:3px; display:block; width:297px; height:216px;} a:hover{border:1px solid #000;} <a href="#"><img src="images/tp.jpg" /></a> 保存后, 在火狐浏览器中预览, 效果如图 4-7 所示图 4-7 正常情况下图片的边框当鼠标经过时, 盒子边框的颜色发生改变, 如图 4-8 所示 10

11 图 4-8 鼠标经过时图片的边框变色 1 思考一下 : 图像外面的盒子与图像的上下左右都有 3px 的距离, 是不是需要加大盒子的宽度和高度呢? 其实, 只需给盒子设置 3px 的内边距即可设置内边距 padding 后, 盒子的实际大小自然会增加 2 由于超链接为行内元素, 要想对其设置宽度和高度, 必须将其转换为块元素或行内块元素案例 4-7 小图标修饰列表标题 1 考核知识点盒子模型的内边距背景的复合属性熟练使用内边距控制盒子内容的位置掌握背景图像位置的调整 3 需求分析浏览网页时, 经常会看到带有小图标的列表项, 这些小图标不仅可以美化网页, 还能提供更好的用户体验虽然无序列表和有序列表都有自带的列表项目符号, 但是, 它们在不同浏览器中显示的效果不同因此, 在实际工作中, 经常通过给列表项定义背景图像来设置列表项目符号 1) 先清除无序列表的自带列表样式 2) 指定列表项 (li) 的高度, 使其文本垂直居中同时, 为列表项 (li) 添加背景图像, 背景图像不平铺, 水平居左垂直居中显示 11

新建 HTML 页面, 代码如下 : <title> 小图标修饰列表标题 </title> body{font-size:14px;} a{color:#000; text-decoration:none;} a:hover{color:#f00; text-decoration:underline;} ul{list-style:none;} ul li{

12 新建 HTML 页面, 代码如下 : <title> 小图标修饰列表标题 </title> body{font-size:14px;} a{color:#000; text-decoration:none;} a:hover{color:#f00; text-decoration:underline;} ul{list-style:none;} ul li{ background:url(images/hhh.jpg) no-repeat left center; height:25px; line-height:25px; padding-left:20px;} <ul> <li><a href="#"> 张鹏老师带你一周 hold 住 html+css 视频教程 </a></li> <li><a href="#"> 轻松学习网页设计系列视频教程 </a></li> <li><a href="#"> 张鹏 _ 带你轻松学习 Flash 动画制作 </a></li> <li><a href="#"> 韩奇峰带你 jq 快速入门到掌握核心技术 </a></li> <li><a href="#"> 韩奇峰 _JavaScrip 网页特效精华制作 </a></li> </ul> 保存后, 在火狐浏览器中预览, 效果如图 4-9 所示图 4-9 小图标修饰列表标题 12

13 1 实际工作中, 我们很少使用列表自带的项目符号, 因为不同浏览器对它们的解析不同通常情况下, 通过给列表项定义背景图像来设置列表项目符号 2 在列表项对应的盒子中, 背景图像一定不能平铺, 而且需要使用背景图像的复合属性控制小图像的位置 3 思考一下: 背景图像默认在文字的下面, 也就是说文字将压住背景图片, 怎么办? 此时, 需要对文字设置一些缩进, 这里用首行缩进不是很合适, 通常给盒子设置一定的左内边距 (padding-left) 案例 3-8 CSS 美化表单 1 考核知识点盒子模型的边框属性熟悉边框对表单样式的影响了解表单的默认样式熟悉清除表单默认样式的方法 3 需求分析在各种网页元素中, 表单很重要, 也比较特殊, 不同浏览器对它们的解析会有差异因此, 在实际网页制作过程中, 通常使用 CSS 为表单设置统一的样式 1) 表单元素比较特殊, 首先需要清除其默认边框内边距外边距 2) 将表单的下边框设置为红色虚线新建 HTML 页面, 代码如下 : <title>css 设置美化表单 </title> body{font-size:14px;} input{border:0; padding:0; margin:0; border-bottom:1px dashed #F00; font-size:14px;} 13

用户名 :<input type="text" /><br /><br /> 密码 :<input type="password" /> 保存后, 在火狐浏览器中预览, 效果如图 4-10 所示图 4-10 CSS 设置美化表单 1 默认情况下, 表单有边距和边框效果, 并且不同浏览器对表单边框的解析不同因此, 使用 CSS 定义表单样式时, 通常先清除表单的内外边距和边框样式 2

14 用户名 :<input type="text" /><br /><br /> 密码 :<input type="password" /> 保存后, 在火狐浏览器中预览, 效果如图 4-10 所示图 4-10 CSS 设置美化表单 1 默认情况下, 表单有边距和边框效果, 并且不同浏览器对表单边框的解析不同因此, 使用 CSS 定义表单样式时, 通常先清除表单的内外边距和边框样式 2 表单内部的字体样式需要单独控制如果要求严格, 尽量给表单指定合适的宽度和高度案例 3-9 CSS 美化搜索框 1 考核知识点盒子模型的边框属性背景的复合属性理解表单元素的特殊性掌握 CSS 美化表单的技巧熟悉边框和背景样式在表单中的应用 3 需求分析在网页中, 经常需要使用搜索框, 这些搜索框都是通过表单来定义的, 它们具有一定的宽高和边框, 并且常常有小的背景图像 1) 清空表单元素的默认样式 2) 定义表单元素的宽度高度及其边框 3) 为表单元素定义不平铺水平居左垂直居中的背景图像 4) 指定表单元素的左内边距, 避免文字压在背景图像上 14

新建 HTML 页面, 代码如下 : <title>css 设置美化搜索框表单 </title> body{font-size:14px; color:#333;} input{border:0; padding:0; margin:0; border:1px solid #ccc; width:140px; height:20px;

15 新建 HTML 页面, 代码如下 : <title>css 设置美化搜索框表单 </title> body{font-size:14px; color:#333;} input{border:0; padding:0; margin:0; border:1px solid #ccc; width:140px; height:20px; background:url(images/search_03.png) no-repeat 4px center; padding-left:25px; color:#ccc;} 搜索一下 :<input type="text" value=" 请输入搜索内容..." /> 保存后, 在火狐浏览器中预览, 效果如图 4-11 所示图 4-11 CSS 设置美化搜索框表单 1 首先需要清除表单元素的默认样式, 以更好地兼容浏览器 2 定义背景图像时, 常常需要设置背景图像的位置 3 表单内部的文本需要缩进 25px, 用左内边距 (padding-left:25px) 比较合适 4 表单内部的默认文本请输入搜索内容... 是通过表单元素的 value 属性定义的鼠标点击文字消失的效果, 需要使用 javascript 脚本来实现 15

16 案例 3-10 CSS 背景图像之尖角导航 1 考核知识点背景图像的添加掌握链接伪类更换背景图像了解尖角背景或者不规则背景的切图方法熟悉行高对文本位置的影响 3 需求分析制作网页时, 为了让页面更加美观, 有时需要添加一些形状不规则的背景图像, 例如尖角图像圆角图像等当鼠标经过时更换背景图像, 以提升用户体验 1) 将超链接 (a) 转换为行内块元素, 为其指定宽度和高度 2) 定义超链接的背景图像, 当鼠标经过时, 更换背景图像新建 HTML 页面, 代码如下 : <title>css 背景图片之尖角导航 </title> a{display:inline-block; width:90px; height:41px; background:url(images/jian.png) no-repeat; color:#fff; text-decoration:none; text-align:center; line-height:35px; font-size:12px;} a:hover{background-image:url(images/jian1.png);} <a href="#"> 传智播客 </a> <a href="#"> 传智播客 </a> <a href="#"> 传智播客 </a> <a href="#"> 传智播客 </a> 保存后, 在火狐浏览器中预览, 效果如图 4-12 所示 16

17 图 4-12 CSS 背景图片之尖角导航当鼠标经过某一个超链接时, 其背景图像发生改变, 如图 4-13 所示图 4-13 鼠标经过更换背景图像对于一行文本, 当行高小于盒子的高度时, 文本内容垂直偏上, 行高大于盒子的高度时, 文本内容垂直偏下, 如果行高正好等于盒子的高度, 文本内容将垂直居中显示 17

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1 传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1 课题名称第 4 章盒子模型计划学时 6 课时内容分析教学目标及基本要求重点及措施盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征,

第三章 补充案例

第三章补充案例