第四章 补充案例
案例4-1  顶部导航栏1
一、案例描述
1、 考核知识点
边框的复合属性、背景颜
2、 练习目标
掌握边框复合属性的灵活运用
掌握背景颜的写法
3、 需求分析
    在页面布局中，经常需要给盒子加边框，来修饰美化：
● 通过盒子的四个边框指定不同的粗细、颜、样式来实现盒子的美化
● 盒子背景颜和边框的合理搭配
4、 设计思路（实现原理）
1）指定盒子宽度和高度。
    2）给盒子上边框指定3像素的橙边框。
    3）给盒子的下边框指定1像素的灰边框。
    4）给盒子同样指定一个浅灰的背景。
 
二、案例实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部导航栏    1</title>
<style type="text/css">
.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;}
</style>
</head>
<body>
<div class="topNav">
<a href="#">网站首页</a>
<a href="#">学校介绍</a>
<a href="#">学员作品</a>
<a href="#">留言薄</a>
</div>
</body>
</html>
保存后，在火狐浏览器中预览效果如图4-1所示。
图4-1 顶部导航栏1效果
三、案例总结
1、在盒子模型中，边框是一个很重要的属性。
2、实际工作中，经常用到边框复合属性的写法。
3、思考一下：这个案例中，内部的链接没有在盒子垂直居中显示。我们应该如何去做？
案例4-2  顶部导航栏2
一、案例描述
1、 考核知识点
元素类型的转换、盒子模型内边距属性
2、 练习目标
掌握元素类型的分类及其元素类型之间的相互转换
掌握盒子模型中内边距属性的使用
熟悉一行文本在一个盒子垂直对齐的方法
复习前面学习链接伪类的使用
3、 需求分析
  导航栏是网页的重要组成部分，各个栏目之间有相等的距离，栏目内容在导航栏垂直居中显示。链接本身是灰黑，当鼠标放上去的时候，文本的颜会变成橙。
4、 设计思路（实现原理）
1）在例4-1的基础上继续拓展。
  2）因为链接（a）元素是行内显示模式，需要把它转换为行内块元素就可以设置宽和高。
  3）设置链接元素的内边距，让其之间的距离相等。
  4）利用行高等于盒子高度的方法，让文本内容在盒子垂直相等。
二、案例实现
对案例4-1代码进行修改如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部导航栏    2</title>
<style type="text/css">
.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;}
</style>
</head>
<body>
<div class="topNav">
<a href="#">网站首页</a>
<a href="#">学校介绍</a>
<a href="#">学员作品</a>
<a href="#">留言薄</a>
</div>
</body>
</html>
保存后，在火狐浏览器中预览效果如图4-2所示。
图4-2 顶部导航栏2效果
注意：
留言簿的橙是当鼠标经过本身时候的颜。
三、案例总结
1、首先用display:inline-block;可以将行内元素转换为行内块元素。
2、不要给链接元素指定宽度，而是用内边距（padding）可以让元素之间的距离相等。
3、行高（line-height） 和盒子本身的高度（height）相等，可以使其内部的一行文本垂直居中。
案例4-3  鼠标经过图标切换效果
一、案例描述
1、 考核知识点
背景图片复合属性及其背景图片的位置
2、 练习目标
掌握把行内元素转换为块级元素。
熟悉给元素指定背景图片。
掌握背景图片的位置的变化，以便做出更加好看的效果。
熟悉背景图片合理搭配。
3、 需求分析
  根据前面学过的链接伪类，做出以下效果：这个链接正常是一个购物车的小图标，当鼠标经过的时候，该链接变成一个登录的小图标。
4、 设计思路（实现原理）
1）该链接必须有高和宽，所以，需要将行内元素的链接（a）转换为块级元素。
borderbox2）给这个链接指定高、宽和背景图片；当鼠标经过的时候，该链接的背景图片位置上移，链接显示的是背景图片下半部分。
二、案例实现
新建页面案例4-3，代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。