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

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

第四章 补充案例

案例4-1 顶部导航栏1

一、案例描述

1、 考核知识点

边框的复合属性、背景颜色

2、 练习目标

➢ 掌握边框复合属性的灵活运用

➢ 掌握背景颜色的写法

3、 需求分析

在页面布局中，经常需要给盒子加边框，来修饰美化：

 通过盒子的四个边框指定不同的粗细、颜色、样式来实现盒子的美化

 盒子背景颜色和边框的合理搭配

4、 设计思路（实现原理）

1）指定盒子宽度和高度。

2）给盒子上边框指定3像素的橙色边框。

3）给盒子的下边框指定1像素的灰色边框。

4）给盒子同样指定一个浅灰色的背景色。

二、案例实现

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中预览效果如图4-1所示。

图4-1 顶部导航栏1效果

三、案例总结

1、在盒子模型中，边框是一个很重要的属性。

2、实际工作中，经常用到边框复合属性的写法。

3、思考一下：这个案例中，内部的链接没有在盒子垂直居中显示。我们应该如何去做？

案例4-2 顶部导航栏2

一、案例描述

1、

考核知识点

2

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

元素类型的转换、盒子模型内边距属性

2、

练习目标

➢

➢

➢

➢

掌握元素类型的分类及其元素类型之间的相互转换

掌握盒子模型中内边距属性的使用

熟悉一行文本在一个盒子垂直对齐的方法

复习前面学习链接伪类的使用

3、

需求分析

导航栏是网页的重要组成部分，各个栏目之间有相等的距离，栏目内容在导航栏垂直居中显示。链接本身是灰黑色，当鼠标放上去的时候，文本的颜色会变成橙色。

4、

设计思路（实现原理）

1）在例4-1的基础上继续拓展。

2）因为链接（a）元素是行内显示模式，需要把它转换为行内块元素就可以设置宽和高。

3）设置链接元素的内边距，让其之间的距离相等。

4）利用行高等于盒子高度的方法，让文本内容在盒子垂直相等。

二、案例实现

对案例4-1代码进行修改如下：

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中预览效果如图4-2所示。

3

第1章 Java开发入门

图4-2 顶部导航栏2效果

注意：

留言簿的橙色是当鼠标经过本身时候的颜色。

三、案例总结

1、首先用display:inline-block;可以将行内元素转换为行内块元素。

2、不要给链接元素指定宽度，而是用内边距（padding）可以让元素之间的距离相等。

3、行高（line-height） 和盒子本身的高度（height）相等，可以使其内部的一行文本垂直居中。案例4-3 鼠标经过图标切换效果

一、案例描述

1、

考核知识点

背景图片复合属性及其背景图片的位置

2、

练习目标

➢ 掌握把行内元素转换为块级元素。

➢ 熟悉给元素指定背景图片。

➢ 掌握背景图片的位置的变化，以便做出更加好看的效果。

➢ 熟悉背景图片合理搭配。

3、

需求分析

4

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

根据前面学过的链接伪类，做出以下效果：这个链接正常是一个购物车的小图标，当鼠标经过的时候，该链接变成一个登录的小图标。

4、

设计思路（实现原理）

1）该链接必须有高和宽，所以，需要将行内元素的链接（a）转换为块级元素。

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

二、案例实现

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

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中预览效果如图4-3所示。

5

第1章 Java开发入门

图4-3 链接正常时候的状态

4-4所示。

图4-4 鼠标经过的状态

6

当鼠标经过时：如图

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

三、案例总结

给一个盒子的背景变换位置，可以得到切换的效果，这是一个很有用的技巧，关键是合理背景图片位置的属性（background-position）。

1、首先注意，因为链接（a）是行内元素不能直接指定宽度和高度，所以我们要用：display:block;将其转换为块级元素。

2、背景图片默认是在盒子的左上角对齐的。当鼠标经过的时候，需要将盒子的背景图片靠底边对齐。就用到背景位置是底部，核心语句是：background-position:bottom。

案例4-4 背景对联效果 -恭贺新禧

一、案例描述

1、 考核知识点

背景图片复合属性

2、 练习目标

➢ 熟悉盒子的嵌套使用。

➢ 掌握盒子背景图片的位置可以根据需求进行调整。

➢ 锻炼同学们的发散思维。

3、 需求分析

一个页面，左右两边各有一张对联图片，页面顶部是一个横批图片，中间一张“福”的图片，需要四个分开的背景图片。但是我们知道，在CSS2中，一个页面的body只能设置一张背景图片。

4、 设计思路（实现原理）

1）这里需要4个盒子，一层套一层。新建一个大盒子，背景图片为左边对联图片，不平铺，靠左对齐。

2）在大盒子里面放完全一样大小的第二个盒子，背景图片为右边对联图片，靠右对齐不平铺。

3）在第二个盒子里面放完全一样大的第三个盒子，背景图片为横批，垂直靠上对齐水平居中不平铺。

4）在第三个盒子里面放完全一样大的第四个盒子，背景图片为“福”，居中显示。

二、案例实现

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

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中效果如图4-5所示：

图4-5 恭贺新禧效果

三、案例总结

1、在CSS2中一个盒子只能添加一个背景图片，如果想要本案例的效果，则需要4个盒子。

2、背景图片可以进行平铺效果，也可以不平铺，这里不需要平铺，就需要 no-repeat。

3、背景我们用的更多是复合属性。

4、重要的时候，背景图片的位置，我们经常要进行设置的。就要用到background-position属性。

8

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

案例4-5 教程模块

一、案例描述

1、 考核知识点

盒子模型属性的综合运用

2、 练习目标

➢ 掌握盒子模型边框属性、内边距属性、外边距属性。

➢ 熟悉链接伪类的使用。

3、 需求分析

这里需要一个教程的模块，这个模块需要一个盒子，盒子上半部分是标题部分，下半部分是内容部分。内容里面放的是文章的题目，链接文本正常的文字是黑色，当鼠标经过的时候是橙色。

4、 设计思路（实现原理）

1）给最大的盒子指定大小，其中这个盒子上边框是3像素的橙色边框，左右下边框是灰色边框。

2）盒子里面分为上下两部分，上部分是标题部分，文本为14像素大小，缩进20像素的距离。

3）盒子下部分为内容部分，也要缩进20像素的距离，为文章的题目，有链接，正常为黑色文本，当鼠标经过的时候，文本颜色会变成橙色。字体大小都是12像素。

二、案例实现

新建案例4-5，代码如下所示:

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中效果如图4-6所示：

图4-6 教程模块效果

三、案例总结

1、给大盒子指定边框的时候，一定先写4个边框的复合属性，再单写上边框的属性。这两个的顺序不能颠倒，因为要考虑到CSS样式的覆盖性。

2、教程 标题部分，用了h2标题，缩进的部分，给h2的左内边距（padding-left）最合适。

3、内容部分，用无序列表合适，各个项目（li）之间的距离，用外边距就可以。

10

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

案例4-6 鼠标经过更换盒子边框颜色

一、案例描述

1、 考核知识点

盒子边框属性、盒子内边距属性

2、 练习目标

➢ 掌握盒子边框的复合属性

➢ 掌握盒子内边距会增大盒子实际大小

➢ 熟悉链接伪类的一些技巧

3、 需求分析

一张图片，本来是灰色的边框。边框和图片有3像素的距离，当鼠标经过的时候，图片的边框会变成黑色的边框，距离不变。

4、 设计思路（实现原理）

1） 图片外面包一层盒子，和图片一样大小。边框运用复合属性指定粗细、颜色和样式。

2） 因为图片和盒子边框有3像素的距离，所以这里给盒子指定3像素的内边距（padding）。

3） 鼠标经过时，给边框复合属性变换颜色；粗细和样式不变。

二、案例实现

新建案例4-6，代码如下所示:

"/TR/xhtml1/DTD/">

保存后，在火狐浏览器中效果如图4-7所示：

11

第1章 Java开发入门

图4-7 正常下图片和边框

图4-8 鼠标经过时候的图片和边框变色

12

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

三、案例总结

1、思考一下：图片外面的盒子比图片宽度和高度都多3像素，是不是要给盒子的高度和宽度都加3像素呢？这里只需要给盒子加3像素的内边距，有了padding值，盒子的实际大小就会加上padding的值。

2、当鼠标经过的时候，盒子的边框只需要变换下颜色就好了，边框的粗细和样式不用改动。

案例4-7 小图标修饰列表标题

一、案例描述

1、 考核知识点

盒子模型的内边距、背景图片复合属性

2、 练习目标

➢ 掌握盒子内边距来控制盒子内部内容

➢ 掌握背景图片位置的调整

3、 需求分析

在实际工作中，很多文章标题前面都会带着相应的小图标，其中无序列表或者有序列表都自带的一些列表样式。但是，在不同浏览器种会存在很大差异，通常我们都是给列表中的项目指定小背景图片。

4、 设计思路（实现原理）

1） 先给无序列表去掉自带的样式。

2） 指定无序列表里面项目（li）的高度，让里面的文本内容垂直居中。同时指定背景图片，背景图片不要平铺，位置水平靠左而垂直居中显示。

二、案例实现

新建案例4-7，代码如下所示:

"/TR/xhtml1/DTD/">

13

第1章 Java开发入门

• 张鹏老师带你一周hold住html+css视频教程
• 轻松学习网页设计系列视频教程
• 张鹏_带你轻松学习Flash动画制作
• 韩奇峰带你jQ快速入门到掌握核心技术
• 韩奇峰_JavaScrip网页特效精华制作

保存后，在火狐浏览器中效果如图4-9所示：

图4-9 小图标修饰列表标题

三、案例总结

1、在实际工作中，我们很少用列表自带的列表项目，因为不同浏览器的差异造成的。大部分情况下，我们采取的是利用背景图片来做。

2、在项目盒子中，修饰的小背景图片一定不能平铺，而且是水平靠左边，垂直居中显示，这些用到背景图片的复合属性。

3、思考一下：因为是背景图片，那么它会在文字的底部显示，文字将会压住背景图片，怎么办？此时，需要将文字缩进一些距离，这里用首行缩进不是很合适。用该盒子的左内边距（padding-left）好一些。

14

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

案例3-8 CSS设置美化表单

一、案例描述

1、 考核知识点

盒子模型边框属性

2、 练习目标

➢

➢

➢

➢

掌握给表单设置边框复合属性

掌握CSS来控制表单

了解表单默认样式

熟悉清除表单默认样式方法

3、 需求分析

表单是一个比较特殊的网页元素，不同浏览器也会有一点差异，所以，我们经常统一给表单用CSS进行样式设置，这里需要设置一个美化的CSS表单。

4、 设计思路（实现原理）

1） 表单元素比较特殊，首先先把该表单的边框、内边距、外边距都去掉。

2） 给表单设置底边框为红色虚线就可以了。

二、案例实现

新建案例4-8，代码如下所示:

"/TR/xhtml1/DTD/">

用户名：

密 码：

保存后，在火狐浏览器中效果如图4-10所示：

15

第1章 Java开发入门

图4-10 CSS设置美化表单

三、案例总结

1、表单元素很特殊，默认它是有边距的，而且自带的边框效果不同浏览器也不尽相同，所以首先，我们把边框、内外边距都清零。

2、表单内部的字体大小也尽量声明。如果要求严格，也尽量给表单指定合适宽度和高度。

案例3-9 CSS设置美化搜索框表单

一、案例描述

1、 考核知识点

盒子模型边框属性、背景图片复合属性

2、 练习目标

➢ 掌握表单元素的本身特殊情况。

➢ 掌握CSS美化表单技巧，边框的使用、背景图片的综合运用。

3、 需求分析

网页中经常用到一些搜索框，这些搜索框大部分都是用表单来做，首先表单具有合适的大小，合适的边框以及小的背景图片来配合使用。

4、 设计思路（实现原理）

1） 清空表单默认的一些样式。

2） 书写表单高度宽度及其边框。

16

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

3） 指定搜索小背景图片给表单，不平铺，水平靠左，垂直居中显示。

4） 缩进表单文字，指定表单的左侧内边距。

二、案例实现

新建案例4-9，代码如下所示：

"/TR/xhtml1/DTD/">

搜索一下：

保存后，在火狐浏览器中效果如图4-11所示：

17

第1章 Java开发入门

图4-11 CSS设置美化搜索框表单

三、案例总结

1、表单首先的需要清除默认样式，这样可以更好的兼容浏览器。

2、背景图片复合属性的综合运用，特别是背景图片的位置（background-position）,这个地方用到的是水平坐标为5像素，垂直坐标用的是center。

3、表单内部文本同样要缩进25像素的距离，用左侧内边距（padding-left:25px）比较合适。

同时要注意，表单内部默认自带有“请输入搜索内容...”这几个字并且是灰色，它放在表单属性value里面。如果想要做鼠标点击这几个字会消失的效果，需要用到javascript来帮助实现。

案例3-10 CSS背景图片之尖角导航

一、案例描述

1、 考核知识点

背景图片的添加

2、 练习目标

➢ 掌握链接伪类更换背景图片

➢ 了解尖角背景或者不规则背景的切图方法

➢ 熟悉关于行高的概念

3、 需求分析

18

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

工作中，为了让页面实现更好的看效果，一些图片需要处理成不规则形状，例如尖角，例如圆角。当我们鼠标经过的时候，换成另外一张相对应的图片。

1）转换链接行内元素为行内块元素，指定高度和宽度。

2）指定该链接的背景，当鼠标经过的时候， 换成另外一个图片背景。

4、 设计思路（实现原理）

二、案例实现

新建案例4-10，代码如下所示：

"/TR/xhtml1/DTD/">

传智播客

传智播客

传智播客

传智播客

保存后，在火狐浏览器中效果如图4-12所示：

19

第1章 Java开发入门

图4-12 CSS背景图片之尖角导航

三、案例总结

行高小于盒子本身的高度，文本内容垂直偏上，行高大于盒子本身的高度，文本内容垂直偏下，如果行高正好等于盒子本身的高度，文本内容垂直居中显示。

20