css盒子模型输出对联,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_补充案例.doc...

博学谷——让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;}