Va href="#">学校介绍v∕a>Va href="#">学员作品v∕a>Va href="#">留言薄v∕a>v∕div> v∕body> v∕html>保存后css盒子模型代码例子，在火狐浏览器中预览效果如图4-1所示。图4-1 顶部导航栏1效果三、案例总结1、在盒子模型中，边框是一个很重要的属性。2、实际工作中，经常用到边框复合属性的写法。3、思考一下：这个案例中，内部的链接没有在盒子垂直居中显示。我们应该如何去做?案例4-2顶部导航栏2一、案例描述1、考核知识点元素类型的转换、盒子模型内边距属性2、练习目标? 掌握元素类型的分类及其元素类型之间的相互转换? 掌握盒子模型中内边距属性的使用? 熟悉一行文本在一个盒子垂直对齐的方法? 复习前面学习链接伪类的使用3、需求分析导航栏是网页的重要组成部分，各个栏目之间有相等的距离，栏目内容在导航栏垂直居中显示。 链接本身是灰黑色，当鼠标放上去的时候，文本的颜色会变成橙色。4、设计思路（实现原理）1）在例4-1的基础上继续拓展。2）因为链接（a）元素是行内显示模式css盒子模型代码例子，需要把它转换为行内块元素就可以设置宽和高。3）设置链接元素的内边距，让其之间的距离相等。4）利用行高等于盒子高度的方法，让文本内容在盒子垂直相等。、案例实现对案例4-1代码进行修改如下：

  TOC o "1-5" h z 留言薄

  保存后，在火狐浏览器中预览效果如图4-2所示。图4-2顶部导航栏2效果注意:留言簿的橙色是当鼠标经过本身时候的颜色。三、案例总结1、首先用display:inline-block;可以将行内元素转换为行内块元素。2、 不要给链接元素指定宽度，而是用内边距(Paddi ng)可以让元素之间的距离相等。3、行高(Iine-height)和盒子本身的高度(height)相等，可以使其内部的一行文本垂直居中。案例4-3鼠标经过图标切换效果、案例描述1、考核知识点背景图片复合属性及其背景图片的位置2、练习目标? 掌握把行内元素转换为块级元素。? 熟悉给元素指定背景图片。? 掌握背景图片的位置的变化，以便做出更加好看的效果。? 熟悉背景图片合理搭配。3、需求分析根据前面学过的链接伪类，做出以下效果：这个链接正常是一个购物车的小图标，当鼠标经过的 时候，该链接变成一个登录的小图标。4、设计思路（实现原理）1） 该链接必须有高和宽，所以，需要将行内元素的链接（a）转换为块级元素。2）给这个链接指定高、宽和背景图片；当鼠标经过的时候，该链接的背景图片位置上移，链接显 示的是背景图片下半部分。新建页面案例4-3,代码如下：v/a>保存后，在火狐浏览器中预览效果如图4-3所示。

  图4-3链接正常时候的状态 当鼠标经过时：如图 4-4所示。图4-4鼠标经过的状态三、案例总结给一个盒子的背景变换位置，可以得到切换的效果，这是一个很有用的技巧，关键是合理背景图片位 置的属性（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，代码如下:VdiV CIaSS="box-big">VdiV CIaSS="box-two">VdiV CIaSS="box-three">VdiV CIaSS="box-four">v/div>v/diV>v/diV>v/diV>v/body>v/html>保存后，在火狐浏览器中效果如图4-5所示：图4-5恭贺新禧效果三、案例总结1、 在CSS2中一个盒子只能添加一个背景图片，如果想要本案例的效果，则需要4个盒子。2、 背景图片可以进行平铺效果，也可以不平铺，这里不需要平铺，就需要n o-repeat。3、背景我们用的更多是复合属性。4、 重要的时候，背景图片的位置，我们经常要进行设置的。就要用到background-position属性。案例4-5 教程模块一、案例描述1、考核知识点盒子模型属性的综合运用2、练习目标?掌握盒子模型边框属性、内边距属性、外边距属性。

  ?熟悉链接伪类的使用。3、需求分析这里需要一个教程的模块，这个模块需要一个盒子，盒子上半部分是标题部分，下半部分是内容 部分。内容里面放的是文章的题目，链接文本正常的文字是黑色，当鼠标经过的时候是橙色。4、设计思路（实现原理）1） 给最大的盒子指定大小，其中这个盒子上边框是3像素的橙色边框，左右下边框是灰色边框。2） 盒子里面分为上下两部分，上部分是标题部分，文本为14像素大小，缩进20像素的距离。3） 盒子下部分为内容部分，也要缩进20像素的距离，为文章的题目，有链接，正常为黑色文本,当鼠标经过的时候，文本颜色会变成橙色。字体大小都是12像素。二、案例实现新建案例4-5,代码如下所示：

  教程

  v∕body>韩奇峰_JaVaSCriP网页特效精华制作 v∕a>v∕li>保存后，在火狐浏览器中效果如图4-6所示:图4-6教程模块效果三、案例总结1、 给大盒子指定边框的时候，一定先写4个边框的复合属性，再单写上边框的属性。这两个的顺序不能颠倒，因为要考虑到CSS样式的覆盖性。2、 教程 标题部分，用了 h2标题，缩进的部分，给h2的左内边距(Padding-left)最合适。3、内容部分，用无序列表合适，各个项目( Ii)之间的距离，用外边距就可以。案例4-6鼠标经过更换盒子边框颜色一、案例描述1、考核知识点盒子边框属性、盒子内边距属性2、练习目标? 掌握盒子边框的复合属性? 掌握盒子内边距会增大盒子实际大小? 熟悉链接伪类的一些技巧3、需求分析一张图片，本来是灰色的边框。边框和图片有3像素的距离，当鼠标经过的时候，图片的边框会变成黑色的边框，距离不变。4、设计思路（实现原理）1）图片外面包一层盒子，和图片一样大小。边框运用复合属性指定粗细、颜色和样式。2） 因为图片和盒子边框有 3像素的距离，所以这里给盒子指定3像素的内边距（Padding ）。3）鼠标经过时，给边框复合属性变换颜色；粗细和样式不变。

  二、案例实现新建案例4-6,代码如下所示：保存后，在火狐浏览器中效果如图4-7所示:图4-7正常下图片和边框图4-8鼠标经过时候的图片和边框变色三、案例总结1、 思考一下：图片外面的盒子比图片宽度和高度都多3像素，是不是要给盒子的高度和宽度都加3像素呢？这里只需要给盒子加3像素的内边距，有了 Padding值，盒子的实际大小就会加上Padding的值。2、当鼠标经过的时候，盒子的边框只需要变换下颜色就好了，边框的粗细和样式不用改动。案例4-7小图标修饰列表标题、案例描述1、考核知识点盒子模型的内边距、背景图片复合属性2、练习目标? 掌握盒子内边距来控制盒子内部内容? 掌握背景图片位置的调整3、需求分析在实际工作中，很多文章标题前面都会带着相应的小图标，其中无序列表或者有序列表都自带的 一些列表样式。但是，在不同浏览器种会存在很大差异，通常我们都是给列表中的项目指定小背景图片。4、设计思路（实现原理）1）先给无序列表去掉自带的样式。2）指定无序列表里面项目（Ii）的高度，让里面的文本内容垂直居中。同时指定背景图片，背景 图片不要平铺，位置水平靠左而垂直居中显示。二、案例实现新建案例4-7,代码如下所示：韩奇峰_JaVaSCriP网页特效精华制作 v∕a>v∕li> v∕html>保存后，在火狐浏览器中效果如图4-9所示:图4-9 小图标修饰列表标题三、案例总结1、在实际工作中，我们很少用列表自带的列表项目，因为不同浏览器的差异造成的。

  大部分情况下， 我们采取的是利用背景图片来做。2、在项目盒子中，修饰的小背景图片一定不能平铺，而且是水平靠左边，垂直居中显示，这些用到 背景图片的复合属性。3、思考一下：因为是背景图片，那么它会在文字的底部显示，文字将会压住背景图片，怎么办？此时，需要将文字缩进一些距离，这里用首行缩进不是很合适。用该盒子的左内边距(Padding-left)好一些。案例3-8 CSS设置美化表单一、案例描述1、考核知识点盒子模型边框属性2、练习目标? 掌握给表单设置边框复合属性? 掌握CSS来控制表单? 了解表单默认样式? 熟悉清除表单默认样式方法3、需求分析表单是一个比较特殊的网页元素，不同浏览器也会有一点差异，所以，我们经常统一给表单用 CSS进行样式设置，这里需要设置一个美化的CSS表单。4、设计思路（实现原理）1）表单元素比较特殊，首先先把该表单的边框、内边距、外边距都去掉。2）给表单设置底边框为红色虚线就可以了。二、案例实现新建案例4-8,代码如下所示：用户名：

  密码：保存后，在火狐浏览器中效果如图4-10所示:图4-10 CSS设置美化表单三、案例总结1、表单元素很特殊，默认它是有边距的，而且自带的边框效果不同浏览器也不尽相同，所以首先 我们把边框、内外边距都清零。2、表单内部的字体大小也尽量声明。如果要求严格，也尽量给表单指定合适宽度和高度。案例3-9 CSS设置美化搜索框表单、案例描述1、考核知识点盒子模型边框属性、背景图片复合属性2、练习目标? 掌握表单元素的本身特殊情况。? 掌握CSS美化表单技巧，边框的使用、背景图片的综合运用。3、需求分析网页中经常用到一些搜索框，这些搜索框大部分都是用表单来做，首先表单具有合适的大小，合 适的边框以及小的背景图片来配合使用。4、设计思路（实现原理）1）清空表单默认的一些样式。2）书写表单高度宽度及其边框。3）指定搜索小背景图片给表单，不平铺，水平靠左，垂直居中显示。4）缩进表单文字，指定表单的左侧内边距。、案例实现新建案例4-9,代码如下所示：搜索一下：保存后，在火狐浏览器中效果如图4-11所示:图4-11 CSS设置美化搜索框表单三、案例总结1、表单首先的需要清除默认样式，这样可以更好的兼容浏览器。2、背景图片复合属性的综合运用，特别是背景图片的位置( background-position),这个地方用到的是水平坐标为5像素，垂直坐标用的是Center。3、 表单内部文本同样要缩进25像素的距离，用左侧内边距(Padding-left:25px )比较合适。同时要注意，表单内部默认自带有“请输入搜索内容…”这几个字并且是灰色，它放在表单属性value里面。如果想要做鼠标点击这几个字会消失的效果，需要用到javascript来帮助实现。案例3-10 CSS背景图片之尖角导航、案例描述1、考核知识点背景图片的添加2、练习目标?掌握链接伪类更换背景图片?了解尖角背景或者不规则背景的切图方法?熟悉关于行高的概念3、需求分析例如圆角。工作中，为了让页面实现更好的看效果，一些图片需要处理成不规则形状，例如尖角,例如圆角。当我们鼠标经过的时候，换成另外一张相对应的图片。4、设计思路（实现原理）1）转换链接行内元素为行内块元素，指定高度和宽度。2） 指定该链接的背景，当鼠标经过的时候，换成另外一个图片背景。、案例实现新建案例4-10,代码如下所示：TOC o "