首页 > 学术百科

CSS补充案例之第四章盒子模型

第四章补充案例

案例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">

华罗庚优选法<head>

<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;}

</style>

</head>

<body>

</div>

</body>

</html>w3c

保存后，在火狐浏览器中预览效果如图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">

<head>

<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;}

董其昌

</style>

</head>

<body>

</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）转换为块级元素。

2）给这个链接指定高、宽和背景图片；当鼠标经过的时候，该链接的背景图片位置上移，链接显示的是背景图片下半部分。

二、案例实现

新建页面案例4-3，代码如下：

本文发布于:2024-09-20 16:52:58，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/715740.html

上一篇：XPATH参考手册

下一篇：HTML中的页码代码

标签：盒子链接元素边框

留言与评论（共有 0 条评论）