网页设计技术-北京邮电大学世纪学院.PPT

4.2.3盒子溢出内容处理 在CSS2.1规范中，就已经有处理溢出的overflow属性，该属性定义当盒子的内容超出盒子边界时的处理方法 CSS3新增的overflow-x和overflow-y属性，是对overflow属性的补充，分别表示水平方向上的溢出处理和垂直方向上的溢出处理。 参数说明 overflow-x ： visible | auto | hidden | scroll|no-display|no-content; overflow-y ： visible | auto | hidden | scrol l|no-display|no-content; visible： 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto： 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden： 不显示超过对象尺寸的内容 scroll： 纵向显示滚动条 no-display：当盒子溢出时，不显示元素。该属性值是新增的。 no-content：当盒子溢出时，不显示内容。该属性值是新增的。 4.2.3盒子溢出内容处理 2.示例介绍 4.2.4设计网站服务条款页面 案例介绍 一个主体区域，将把该主体区域设计成凸起效果，然后在这个凸起的区域里放置内容； 由于条款内容较长，还需要处理内容的溢出。 4.3增强的用户界面设计 CSS3在用户界面的设计方面有很大的改进，主要有一下几个方面： 改变原始尺寸 定义外轮廓线 让元素变身 给元素添加内容等 4.3.1允许用户改变尺寸 如果你在使用Firefox或Chrome，那么你肯定注意到了textarea标签元素的右下角默认有个小的手柄，它可以让你调整它们的大小，CSS3新增的resize属性，可以把其他元素也应用同样的效果。 1.参数说明 resize ： none | both | horizontal | vertical | inherit none：没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。 both：提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。 horizontal：提供单向水平尺寸调整机制，让用户可以调节元素的宽度。 vertical：提供单向垂直尺寸调整机制，让用户可以调节元素的高度。 inherit： 默认继承。 4.3.1允许用户改变尺寸 2.示例介绍 resize:both; overflow:auto; 提示：resize属性需要和溢出处理属性overflow或overflow-x或overflow-y一起使用，才能把元素定义成可以调整大小的，且溢出属性值不能为visible. 可以调整大小的div元素 4.3.2定义外轮廓线 outline属性可以定义一个元素的外轮廓线，以突出显示该元素。 1.参数说明 outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit outline-color： 指定轮廓边框颜色。 outline-style： 指定轮廓边框轮廓。 outline-width： 指定轮廓边框宽度。 outline-offset： 指定轮廓边框偏移位置的数值。 inherit： 默认。表示继承父元素轮廓样式。 4.3.2定义外轮廓线 2.示例介绍 outline:2px solid #fc6; 4.3.3伪装的元素 CSS新增的appearance属性，可以方便的把元素伪装成其他类型的元素，给界面设计带来极大的灵活性。 1.参数说明 appearance:normal|icon|window|button|menu|field; normal:正常的修饰元素； icon:把元素修饰的像一个图标； window把元素修饰的像一个视窗； button：把元素修饰的像一个按钮； menu:把元素修饰的像菜单； field:把元素修饰的像一个输入框。 4.3.3伪装元素 2.示例介绍 div,a,input{ -webkit-appearance:button; -moz-appearance:button; appearance:button; } div、a和input均修饰为按钮风格 4.3.4为元素添加内容 如果给元素插入内容，很少有人会想到使用CSS样式表来实现。在CSS中，可以使用content属性为元素添加内容，这已然替代了部分JavaScript的功能。 1.参数说明 content ： none|normal |string | counter(