基于Web标准的网页设计-精选版.pptVIP

2. 制作可变宽度圆角 制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框，而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法 网页中插入图像的两种方法 用HTML标记： img src=“hua.jpg” 用CSS背景属性插入图像 background:url(hua.jpg) no-repeat; 所有装饰性的图像建议都用CSS背景方式插入 背景属性 设置背景颜色：background-color background-image: 设置背景图片或渐变 background-repeat:设置背景图片的平铺方式 background-attachment :设置背景图片是否随内容滚动 background-position：设置背景图片显示的起始位置 缩写： background: background-color | background-image | background-repeat | background-attachment | background-position 背景图片 背景颜色 背景定位 背景不平铺 background-repeat属性 background-repeat:  repeat（默认）、repeat-x、repeat-y、no-repeat background-position属性 background:url(hua.gif) no-repeat 50% 33%; background-attachment属性 background-attachment ：scroll（默认）、fixed fixed：背景在网页中的位置是固定的，不随容器的移动而移动。（案例：/） 用背景图片做列表项图标 ul{ list-style-type:none; } li{ background:url(arrow.gif) no-repeat 0px 3px; /*距左边0px，距上边3px*/ padding-left:20px; } 有了背景的精确定位能力，完全可以使列表项目图片符号出现在li元素中的任意位置上。 背景图案的翻转－控制背景的显示区域 通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分 例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，从而只用一幅图片就能实现背景图案的切换。 通过背景图片位置控制实现图片翻转 #nav li a{ color:#FFFFFF; text-decoration:none; padding-top:7px; display:block; width:97px; height:19px; text-align:center; background:url(img/nav.gif); margin-left:2px; } #nav li a:hover{ background:url(img/nav.gif); background-position:0px -26px;/* background-position:left center;*/ color:#FFFFFF; } 将滑动门技术和背景图片翻转结合的例子 a:hover { background-position:100% -42px; } a:hover b{ background-position:0 -42px; color: red; } 多个元素背景的叠加 当两个元素是嵌套关系时，那么里面元素的盒子背景将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。 下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 圆角的设计 固定宽圆角 可变宽圆角 4图像可变宽度圆角栏目框 div id=round h3 p span div id=round h3这是圆角矩形的标题/h3 pspan……/span/p /div 4.5.3滑动门技术－背景的高级运用 图片阴影，自适用宽度圆角导航条 1. 图像阴影 阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处理软件很容易给图像增添阴影。但是，可以使用CSS产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即不管图像是大是小都能为它添加阴影效果。 滑动门制作图片阴影原理图 透 明 图 像 图 像 图 像 图 像 ① ② ④ ③ ⑤ ⑥ 2. 自适应宽度圆角导航条 原理：背景图片比盒子长一些 背