电子商务设计实务.pptVIP

* * * * * * * * * * * * * * * * * * * * * * 四、关于CSS3和HTML5 CSS3的新功能 连字符 CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级结点的所有兄弟级别元素。比如，给某个特定的div同级的图片添加一个灰色的边框（div和图片应该有同一个父级结点），在样式表中定义下面的样式就足够了：div~img { border: 1px solid #ccc; } 第三十页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 伪类 或许在CSS3中增加最多的就是新的伪类了，以下介绍一些比较有用的伪类： :nth-child(n)：基于元素在父结点的子元素的列表位置来指定元素。可以是用数字、数字表达式或odd 和even 关键词（对斑马样式的列表很完美）。 :last-child：匹配一个父结点下的最后一个子元素，等同于:nth-last-child(1)。 :checked：匹配选择的元素，比如复选框。 :empty：匹配空元素（没有子元素）。 第三十一页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 伪元素 在CSS3中唯一引入的伪元素是::selection，它可以让你指定被用户高亮（选中）的元素。 第三十二页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 RGBA和透明度 RGBA让设计者不仅可以设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBA前面设定其他浏览器支持的没有透明的颜色属性。当设定一个RGBA 色彩的时候，必须依次设定红、蓝和绿色的值，可以是0～255或百分数。 第三十三页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 多栏布局 新的CSS3 选择器可以不用使用多个div标签就能实现多栏布局。下面是CSS3的多栏布局例子： .index #content div { -webkit-column-count : 4; -webkit-column-gap : 20px; -moz-column-count : 4; -moz-column-gap : 20px;} 第三十四页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 可以通过这个选择器定义三件事情：栏数（column-count）、栏宽（column-width）和各栏之间的空白/间距（column-gap）。如果column-count未设定，浏览器会在允许的宽度内设置尽可能多的栏目。 为了在各栏目之间添加一个数值的分隔，可以使用column-rule 属性，其功能和border 属性类似： div { column-rule: 1px solid #00000; } 第三十五页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 多背景图 CSS3允许使用多个属性比如background-image、background-repeat、background-size、background-position、background-originand、background-clip等在一个元素上添加多层背景图片。 在一个元素上添加多背景的最简单的方法是使用简写代码，可以指定上面的所有属性到一条声明中，最常用的是image、position和repeat属性： 第三十六页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 div { background: url(example.jpg) top left no-repeat, url(example2.jpg) bottom left no-repeat, url(example3.jpg) center center repeat-y; } 第三十七页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 自动换行 word-wrap（自动换行）属性用来防止太长的字符串溢出。可以用两个属性值normal 和break-word。normal值（默认的）只在允许的断点截断文字，如连字符。如果使用了break-word，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。 第三十八页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 文字阴影 尽管在CSS2中就已经存在，text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。 第三十九页，共五十页。 四、关于CSS3和HTML5 CSS3的新功能 @f