CSS补充案例之盒子模型_第1页
CSS补充案例之盒子模型_第2页
CSS补充案例之盒子模型_第3页
CSS补充案例之盒子模型_第4页
CSS补充案例之盒子模型_第5页
已阅读5页，还剩19页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第四章补充案例案例4-1顶部导航栏1一、案例描述1、考核知识点边框的复合属性、背景颜色2、练习目标? 掌握边框复合属性的灵活运用? 掌握背景颜色的写法3、需求分析在页面布局中，经常需要给盒子加边框，来修饰美化：通过盒子的四个边框指定不同的粗细、颜色、样式来实现盒子的美化盒子背景颜色和边框的合理搭配4、设计思路（实现原理）1）指定盒子宽度和高度。2）给盒子上边框指定 3像素的橙色边框。3）给盒子的下边框指定 1像素的灰色边框。4）给盒子同样指定一个浅灰色的背景色。二、案例实现<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transition

2、al/ZEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>顶部导航栏 1</title><style type=&quo

3、t;text/css">.topNavheight:40px; width:500px; border-top:3px solid #FF8500; border-bottom:1px solid#EDEEF0; background-color:#FCFCFC;.topNav acolor:#4C4C4C; text-decoration:none; font-size:14px;</style></head><body><div class="topNav"><a href="#"

4、>网站首页 </a><a href="#">学校介绍 </a><a href="#">学员作品 </a><a href="#">留言薄 </a></div></body></html>保存后，在火狐浏览器中预览效果如图4-1所示。图4-1 顶部导航栏1效果三、案例总结1、在盒子模型中，边框是一个很重要的属性。2、实际工作中，经常用到边框复合属性的写法。3、思考一下：这个案例中，内部的链接没有在盒子垂直居中显示。

5、我们应该如何去做?案例4-2 顶部导航栏2一、案例描述1、考核知识点元素类型的转换、盒子模型内边距属性2、练习目标? 掌握元素类型的分类及其元素类型之间的相互转换? 掌握盒子模型中内边距属性的使用? 熟悉一行文本在一个盒子垂直对齐的方法? 复习前面学习链接伪类的使用3、需求分析导航栏是网页的重要组成部分，各个栏目之间有相等的距离，栏目内容在导航栏垂直居中显示。 链接本身是灰黑色，当鼠标放上去的时候，文本的颜色会变成橙色。4、设计思路（实现原理）1）在例4-1的基础上继续拓展。2）因为链接（a）元素是行内显示模式，需要把它转换为行内块元素就可以设置宽和高。3）设置链接元素的内边距，让其之间的距离

6、相等。4）利用行高等于盒子高度的方法，让文本内容在盒子垂直相等。二、案例实现对案例4-1代码进行修改如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-

7、Type" content="text/html; charset=utf-8" /><title> 顶部导航栏 2</title><style type="text/css">.topNavheight:40px; width:500px; border-top:3px solid #FF8500; border-bottom:1px solid#EDEEF0; background-color:#FCFCFC;.topNav acolor:#4C4C4C; text-decoration:none;

8、 font-size:14px; display:inline-block;height:40px; padding:0 20px; line-height:40px;.topNav a:hovercolor:#FF8500;</style></head><body><div class="topNav"><a href="#">网站首页</a><a href="#">学校介绍</a><a href="#">

9、学员作品</a><a href="#">留言薄 </a></div></body></html>保存后，在火狐浏览器中预览效果如图4-2所示。顶邰导航栏2-MsiHa FiEac文件包羯辑查看电历史书答口，工具;口 帚能凶0 1 file:/C:/UstrE U .tScot 尸曾' 财一士的可最名匚新手上踏?二；«lcriilh-2.6.4-fx+.网站首页学校介绍学员作品留言就fil e:/C;/Use rs/1iI y/Desktop/.之第四章盒子模型源文件Z案例4 - 2夜落

10、导航栏2.htm修图4-2顶部导航栏2效果注意：留言簿的橙色是当鼠标经过本身时候的颜色。三、案例总结1、首先用display:inline-block;可以将行内元素转换为行内块元素。2、不要给链接元素指定宽度，而是用内边距（ padding）可以让元素之间的距离相等。3、行高（line-height）和盒子本身的高度（height）相等，可以使其内部的一行文本垂直居中。案例4-3鼠标经过图标切换效果一、案例描述1、考核知识点背景图片复合属性及其背景图片的位置2、练习目标?掌握把行内元素转换为块级元素。?熟悉给元素指定背景图片。?掌握背景图片的位置的变化，以便做出更加好看的效果。?熟悉背景图片

11、合理搭配。3、需求分析根据前面学过的链接伪类，做出以下效果：这个链接正常是一个购物车的小图标，当鼠标经过的 时候，该链接变成一个登录的小图标。4、设计思路（实现原理）1）该链接必须有高和宽，所以，需要将行内元素的链接（ a）转换为块级元素。2）给这个链接指定高、宽和背景图片；当鼠标经过的时候，该链接的背景图片位置上移，链接显 示的是背景图片下半部分。二、案例实现新建页面案例4-3,代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""/TR/xhtm

12、l1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标经过图标切换效果 </title><style type="text/css">adisplay:block; wi

13、dth:67px; height:32px; background:url（images/ico.png） no-repeat;a:hoverbackground-position:bottom;</style></head><body><a href="#"></a></body></html>保存后，在火狐浏览器中预览效果如图4-3所示。图4-3链接正常时候的状态当鼠标经过时：如图 4-4所示。图4-4鼠标经过的状态三、案例总结给一个盒子的背景变换位置，可以得到切换的效果，这是一个很有用

14、的技巧，关键是合理背景图片位置的属性（background-position ）。1、首先注意，因为链接（a）是行内元素不能直接指定宽度和高度，所以我们要用：display:block;将其转换为块级元素。2、背景图片默认是在盒子的左上角对齐的。当鼠标经过的时候，需要将盒子的背景图片靠底边对齐。就用到背景位置是底部，核心语句是：background-position:bottom 。案例4-4 背景对联效果-恭贺新禧、案例描述1、考核知识点背景图片复合属性2、练习目标? 熟悉盒子的嵌套使用。? 掌握盒子背景图片的位置可以根据需求进行调整。? 锻炼同学们的发散思维。3、需求分析一个页面，左右两边

15、各有一张对联图片，页面顶部是一个横批图片，中间一张“福”的图片，需要四个分开的背景图片。但是我们知道，在 CSS2中，一个页面的body只能设置一张背景图片。4、设计思路（实现原理）1）这里需要4个盒子，一层套一层。新建一个大盒子，背景图片为左边对联图片，不平铺，靠 左对齐。2）在大盒子里面放完全一样大小的第二个盒子，背景图片为右边对联图片，靠右对齐不平铺。3）在第二个盒子里面放完全一样大的第三个盒子，背景图片为横批，垂直靠上对齐水平居中不 平铺。4）在第三个盒子里面放完全一样大的第四个盒子，背景图片为“福”，居中显示。、案例实现新建页面案例4-4,代码如下：<!DOCTYPE html

16、 PUBLIC "-W3CDTD XHTML 1.0 Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

17、;背景对联效果-恭贺新禧</title><style type="text/css">.box-bigheight:927px; background:url(images/left.jpg) top left no-repeat;.box-twoheight:927px; background:url(images/right.jpg) top right no-repeat;.box-threeheight:927px; background:url(images/top.jpg) top center no-repeat;.box-fourhe

18、ight:927px; background:url(images/bottom.jpg) center center no-repeat;</style></head><body><div class="box-big"><div class="box-two"><div class="box-three"><div class="box-four"></div></div></div><

19、/div></body></html>保存后，在火狐浏览器中效果如图4-5所示：图4-5恭贺新禧效果三、案例总结1、在CSS2中一个盒子只能添加一个背景图片，如果想要本案例的效果，则需要4个盒子。2、背景图片可以进行平铺效果，也可以不平铺，这里不需要平铺，就需要no-repeato3、背景我们用的更多是复合属性。4、重要的时候，背景图片的位置，我们经常要进行设置的。就要用到background-position属性。案例4-5教程模块、案例描述1、考核知识点盒子模型属性的综合运用2、练习目标? 掌握盒子模型边框属性、内边距属性、外边距属性。? 熟悉链接伪类的使用。

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

21、l PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><titl

22、e> 教程模块 </title><style type="text/css">body,div,h2,ul,limargin:0; padding:0;ullist-style:none;.boxwidth:300px; height:250px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; margin:50px;.box h2height:40px; font-size:14px; line-height:40px; border-bottom:1px solid #D9E

23、0EE; padding-left:20px;.box ulmargin-left:20px;.box ul limargin:15px 0;.box ul afont-size:12px; color:#000; text-decoration:none;.box ul a:hovercolor:#FF8400; text-decoration:underline;</style></head><body><div class="box"><h2> 教程 </h2><ul><li&g

24、t;<a href="#"><li><a href="#"><li><a href="#"><li><a href="#"><li><a href="#"></ul></div></body></html>张鹏老师带你一周 hold 住html+css视频教程</a></li>轻松学习网页设计系列视频教程</a&

25、gt;</li>张鹏带你轻松学习Flash 动画制作</a></li>韩奇峰带你jQ快速入门到掌握核心技术</a></li>韩奇峰_JavaScrip网页特效精华制作</a></li>保存后，在火狐浏览器中效果如图4-6所示:图4-6教程模块效果三、案例总结1、给大盒子指定边框的时候，一定先写4个边框的复合属性，再单写上边框的属性。这两个的顺序不能颠倒，因为要考虑到CSS样式的覆盖性。2、教程 标题部分，用了 h2标题，缩进的部分，给 h2的左内边距(padding-left)最合适。3、内容部分，用无序列表合

26、适，各个项目( li)之间的距离，用外边距就可以。案例4-6鼠标经过更换盒子边框颜色一、案例描述1、考核知识点盒子边框属性、盒子内边距属性2、练习目标? 掌握盒子边框的复合属性?掌握盒子内边距会增大盒子实际大小? 熟悉链接伪类的一些技巧3、需求分析一张图片，本来是灰色的边框。边框和图片有 3像素的距离，当鼠标经过的时候，图片的边框会 变成黑色的边框，距离不变。4、设计思路（实现原理）1）图片外面包一层盒子，和图片一样大小。边框运用复合属性指定粗细、颜色和样式。2）因为图片和盒子边框有3像素的距离，所以这里给盒子指定 3像素的内边距（padding）。3）鼠标经过时，给边框复合属性变换颜色；粗细

27、和样式不变。二、案例实现新建案例4-6,代码如下所示：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="t

28、ext/html; charset=utf-8" /><title>鼠标经过更换盒子边框颜色 </title><style type="text/css">aborder:1px solid #ccc; padding:3px; display:block; width:297px; height:216px;a:hoverborder:1px solid #000;</style></head><body><a href="#"><img src=

29、"images/tp.jpg" /></a></body></html>保存后，在火狐浏览器中效果如图4-7所示：图4-7正常下图片和边框图4-8鼠标经过时候的图片和边框变色三、案例总结1、思考一下：图片外面的盒子比图片宽度和高度都多3像素，是不是要给盒子的高度和宽度都加3像素呢？这里只需要给盒子加3像素的内边距，有了 padding值，盒子的实际大小就会加上padding的值。2、当鼠标经过的时候，盒子的边框只需要变换下颜色就好了，边框的粗细和样式不用改动。案例4-7小图标修饰列表标题一、案例描述1、考核知识点盒子模型的内边距、背

30、景图片复合属性2、练习目标?掌握盒子内边距来控制盒子内部内容? 掌握背景图片位置的调整3、需求分析在实际工作中，很多文章标题前面都会带着相应的小图标，其中无序列表或者有序列表都自带的一些列表样式。但是，在不同浏览器种会存在很大差异，通常我们都是给列表中的项目指定小背景图片。4、设计思路（实现原理）1）先给无序列表去掉自带的样式。2）指定无序列表里面项目（li）的高度，让里面的文本内容垂直居中。同时指定背景图片，背景 图片不要平铺，位置水平靠左而垂直居中显示。二、案例实现新建案例4-7,代码如下所示：<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0

31、 Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>小图标修饰列表标题</title><sty

32、le type="text/css">bodyfont-size:14px;acolor:#000; text-decoration:none;a:hovercolor:#F00; text-decoration:underline;ullist-style:none;ul li background:url（images/hhh.jpg） no-repeat left center; height:25px;line-height:25px; padding-left:20px;</style></head><body><u

33、l><li><a href="#"><li><a href="#"><li><a href="#"><li><a href="#"><li><a href="#"></ul></body></html>张鹏老师带你一周hold 住html+css 视频教程</a></li>轻松学习网页设计系列视频教程</a

34、></li>张鹏带你轻松学习Flash 动画制作</a></li>韩奇峰带你jQ快速入门到掌握核心技术</a></li>韩奇峰_JavaScrip网页特效精华制作</a></li>保存后，在火狐浏览器中效果如图4-9所示:图4-9小图标修饰列表标题三、案例总结1、在实际工作中，我们很少用列表自带的列表项目，因为不同浏览器的差异造成的。大部分情况下， 我们采取的是利用背景图片来做。2、在项目盒子中，修饰的小背景图片一定不能平铺，而且是水平靠左边，垂直居中显示，这些用到 背景图片的复合属性。3、思考一下：因为

35、是背景图片，那么它会在文字的底部显示，文字将会压住背景图片，怎么办？此时，需要将文字缩进一些距离，这里用首行缩进不是很合适。用该盒子的左内边距(padding-left)好一些。案例3-8 CSS设置美化表单一、案例描述1、考核知识点盒子模型边框属性2、练习目标? 掌握给表单设置边框复合属性? 掌握CSS来控制表单? 了解表单默认样式? 熟悉清除表单默认样式方法3、需求分析表单是一个比较特殊的网页元素，不同浏览器也会有一点差异，所以，我们经常统一给表单用CSS进行样式设置，这里需要设置一个美化的CSS表单。4、设计思路（实现原理）1）表单元素比较特殊，首先先把该表单的边框、内边距、外边距都去掉

36、。2）给表单设置底边框为红色虚线就可以了。二、案例实现新建案例4-8,代码如下所示：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"

37、content="text/html; charset=utf-8" /><title>CSS设置美化表单</title><style type="text/css">bodyfont-size:14px;inputborder:0; padding:0; margin:0; border-bottom:1px dashed #F00; font-size:14px;</style></head><body>用户名：<input type="text"

38、 /><br /><br />密 码：<input type="password" /></body></html>保存后，在火狐浏览器中效果如图4-10所示：图4-10 CSS设置美化表单三、案例总结1、表单元素很特殊，默认它是有边距的，而且自带的边框效果不同浏览器也不尽相同，所以首先 我们把边框、内外边距都清零。2、表单内部的字体大小也尽量声明。如果要求严格，也尽量给表单指定合适宽度和高度。案例3-9 CSS设置美化搜索框表单、案例描述1、考核知识点盒子模型边框属性、背景图片复合属性2、练习目标? 掌握表

39、单元素的本身特殊情况。? 掌握CSS美化表单技巧，边框的使用、背景图片的综合运用。3、需求分析网页中经常用到一些搜索框，这些搜索框大部分都是用表单来做，首先表单具有合适的大小，合 适的边框以及小的背景图片来配合使用。4、设计思路（实现原理）1）清空表单默认的一些样式。2）书写表单高度宽度及其边框。3)指定搜索小背景图片给表单，不平铺，水平靠左，垂直居中显示。4)缩进表单文字，指定表单的左侧内边距。二、案例实现新建案例4-9,代码如下所示：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/ZEN""

40、/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS设置美化搜索框表单</title><style type="text/css&qu

41、ot;>bodyfont-size:14px; color:#333;inputborder:0; padding:0; margin:0; border:1px solid #ccc; width:140px; height:20px;background:url(images/search_03.png) no-repeat 4px center; padding-left:25px; color:#ccc;</style></head><body>搜索一下：<input type="text" value="请输入搜索内容."/></body></html>保存后，在火狐浏览器中效果如图4-11所示:图4-11 CSS设置美化搜索框表单三、案例总结1、表单首先的需要清除默认样式，这样可以更好的兼容浏览器。2、背景图片复合属性的综合运用，特别是背景图片的位置( background-positio

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论