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

传智播客 专注于Java 传智播客 专注于Java、.Net和PhP、网页平面设计工程师的培训 PAGE PAGE # 第1 第1章JaVa开发入门 PAGE PAGE # 第四章补充案例 案例4-1 顶部导航栏1 一、案例描述 1、 考核知识点 边框的复合属性、背景颜色 2、 练习目标 ? 掌握边框复合属性的灵活运用 ? 掌握背景颜色的写法 3、 需求分析 在页面布局中，经常需要给盒子加边框，来修饰美化： 通过盒子的四个边框指定不同的粗细、颜色、样式来实现盒子的美化 盒子背景颜色和边框的合理搭配 4、 设计思路（实现原理） 1） 指定盒子宽度和高度。 2） 给盒子上边框指定 3像素的橙色边框。 3） 给盒子的下边框指定 1像素的灰色边框。 4） 给盒子同样指定一个浅灰色的背景色。 二、案例实现 !DOCTYPE html PUBLlC -//W3C//DTD XHTML 1.0 TranSitionaI//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html XmInS= /1999/xhtml head meta http-equiv=Content-Type COntent=text/html; CharSet=Utf-8 / title 顶部导航栏 1/title style type=text∕css .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 CIaSS=topNav a href=# 网站首页 /a Va href=# 学校介绍v∕a Va href=# 学员作品v∕a Va href=# 留言薄v∕a v∕div v∕body v∕html 保存后，在火狐浏览器中预览效果如图 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 PUBLlC -//W3C//DTD XHTML 1.0 TranSitionaI//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html XmInS= /1999/xhtml head meta http-equiv=Content-Type COntent=text/html; CharSet=Utf-8 / title 顶部导航栏 2∕title style type=text∕css .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 CIaSS=topNav TOC \o 1-5 \h \z a href=#