博学谷——让IT教学更简单，让IT学习更有效
PAGE 18
第4章 补充案例
【案例4-1】 顶部导航栏1
一、案例描述
考核知识点
边框的复合属性、背景颜色
练习目标
灵活运用边框的复合属性。
掌握背景颜色的定义方法。
需求分析
制作网页时，经常需要给盒子设置边框，以修饰和美化元素的显示样式，常用方法如下：
对盒子的四条边定义不同宽度、颜色、样式的边框
盒子背景颜色和边框的合理搭配
案例分析
效果如图4-1所示。
顶部导航栏1效果
具体实现步骤如下：
指定盒子的宽度和高度。
给盒子的上边指定3px的橙色边框。
给盒子的下边指定1px的灰色边框。
给盒子指定浅灰色的背景颜色。
二、案例实现
新建HMTL文件，具体代码如下：
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
顶部导航栏1
.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;}
网站首页
学校介绍
学员作品
留言薄
保存后，在火狐浏览器中预览，效果如图4-2所示。
顶部导航栏1效果
【案例4-2】 顶部导航栏2
一、案例描述
考核知识点
元素类型的转换、盒子模型的内边距属性
练习目标
掌握元素的分类及元素类型的转换。
熟练使用盒子模型的内边距属性。
熟悉一行文本在一个盒子中垂直居中的方法。
复习链接伪类。
需求分析
导航栏是网页的重要组成部分，各个栏目之间的水平距离相同，并且栏目内容在导航栏中垂直居中。链接文本默认为灰黑色，当鼠标经过时，链接文本变为橙色。
案例分析
在【案例4-1】的基础上拓展，效果如图4-3所示。
顶部导航栏2效果
具体实现步骤如下：
在案例4-1的基础上继续扩展，修改代码。
由于超链接(a)是行内元素，把它转换为行内块元素后就可以对其设置宽度和高度。
设置超链接的内边距，让它们之间的水平距离相等。
利用行高等于盒子高度的方法，让一行文本垂直居中显示。
二、案例实现
对【案例4-1】进行修改，具体代码如下：
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
顶部导航栏2
.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;}
网站首页
学校介绍
学员作品
