CSS网页设计标准教程 温谦 第9章圆角设计.pptVIP

9.4.6 实现网页换肤 图9.27 将网页整体“换肤”为“便签簿”效果 图9.28 设计“便签簿”效果所需的图像 图9.29 将网页整体“换肤”为深色边框效果 CSS网页设计标准教程 第2部分 CSS专题技术 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 第 9 章 圆 角 设 计 圆角框的作用 9.1 固定宽度圆角框 9.2 不固定宽度的圆角框 9.3 “5图像”二维滑动门经典圆角框 9.4 在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强项。 使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。 但是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的都只能是单调的矩形方框。 而在网页中，经常需要用到圆角的设计。 本章专门对圆角的设计进行介绍。 9.1 圆角框的作用 图9.1 前沿视频教室网页中的圆角效果 图9.2 Adobe网页中的圆角效果 9.2 固定宽度圆角框 9.2.1 两背景图像法 图9.3 圆角框案例效果 top.gif bottom.gif 图9.4 案例中用到的两个背景图片 9.2.2 使用透明背景图 图9.9 使用透明背景图像 图9.10 两种方案的效果比较 9.3 不固定宽度的圆角框 上述方法都有一个很大的限制，就是必须固定宽度。 如果一个网页如图9.11所示，它需要5种不同宽度的圆角框，就必须分别制作背景图像，这样不但麻烦，而且下载网页文件的字节数也会增多，严重影响显示速度。 图9.11 复杂的页面 9.3.1 不固定宽度圆角框的含义 对于宽度“不固定”这个说法，实际上又分为多种不同的具体方式。 （1）可变：含义是这个圆角框本身在网页上的宽度是固定的，但是在制作网页的时候，只要简单地设定该圆角框的宽度，就能产生正确的效果，而不必重新制作背景图像。 这样如果一个网页上有3种宽度的圆角框，仅使用一套背景图像就都可以完成了。 （2）流动：含义是圆角框的宽度是跟随浏览器窗口宽度的变化而变化的。 例如标准流方式的div的宽度就是自动横向伸展的，它的宽度就会随时改变。 （3）弹性：含义是圆角框的宽度在文字大小不变的情况下，宽度不变，而文字大小发生变化的时候，宽度随之改变。 这里说的文字大小的变化是通过浏览器菜单中的“查看→文字大小”命令来改变的。 利用这3种不同的具体方式来设计“不固定”宽度的圆角框的原理都是一样的，只是在具体处理时对宽度设置方法有所不同。 （1）可变方式：实际上对于网页的访问者来说就是固定宽度，使用绝对单位（如像素）来设置宽度。 （2）流动方式：使用百分比或者auto来设置宽度。 （3）弹性方式：使用相对单位（如em）来设置宽度。 9.3.2 “4图像”单色不固定宽度圆角框 图9.12 案例中用到的背景图像 图9.13 各背景图像与HTML元素的对应关系 图9.14 错误的背景图像位置 9.4 “5图像”二维滑动门经典圆角框 前文介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框，对于带有复杂边框的圆角框就不适用了。 另外，用前文介绍的方法制作的圆角框，尽管可以适应不同宽度，但是它里面的正文段落也承担了设置圆角框布局的任务。 也就是说，圆角框中的正文并不是独立的，正文内容不能自由地设置样式。 这对于通用型的网页来说，局限性很大。 例如，图9.18所示的页面，每个圆角框用于放置不同的栏目，希望达到的目标应该是可以在每个圆角框中放置任何内容，并且可以对这些内容设置样式，还能保证圆角框本身显示正确。 简单地说，就是使圆角框的本身与内容完全分离。 图9.18 使用圆角框的复杂页面