第6讲 移动Web界面样式VIP专享VIP免费

HTML5移动Web开发第6讲移动Web界面样式请到240FTP../HTML5移动Web开发下载第6讲文件夹HTML5移动Web开发第2页主要内容1.属性选择器2.伪类选择器3.阴影4.背景5.圆角边框6.MediaQuerise移动设备样式7.把传统网站移植成移动Web网站8.习题HTML5移动Web开发第3页概述•CSS3技术最适合在移动Web开发中使用的特性–增强的选择器–阴影–强大的背景设置–圆角边框HTML5移动Web开发第4页1、属性选择器•属性选择器一共分为4种匹配模式选择器：•完全匹配属性选择器•包含匹配选择器•首字符匹配选择器•尾字符匹配选择器HTML5移动Web开发第5页•下面4个代码见ex6_1HTML5移动Web开发第6页1.1完全匹配属性选择器•其含义就是完全匹配字符串。当div元素的id属性值为test时，利用完全匹配选择器选择任何id值为test的元素都使用该样式。HTML5移动Web开发第7页1.2包含匹配选择器•包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串，元素就使用该样式。•其语法是：[attribute*=value]。其中attribute指的是属性名，value指的是属性值，包含匹配采用“*=”符号。HTML5移动Web开发第8页1.3首字符匹配选择器•首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式。•其语法是：[attribute^=value]。其中attribute指的是属性名，value指的是属性值，首字符匹配采用“^=”符号。HTML5移动Web开发第9页1.4尾字符匹配选择器•尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串，只要结尾字符串符合匹配，则元素使用该样式。•其语法是：[attribute$=value]。其中attribute指的是属性名，value指的是属性值，尾字符匹配采用“$=”符号。HTML5移动Web开发第10页•以上4个代码见ex6_1HTML5移动Web开发第11页2、伪类选择器•伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器。•CSS3增加了非常多的选择器，其中包括:•first-line伪元素选择器•first-letter伪元素选择器•root选择器•not选择器•empty选择器•target选择器HTML5移动Web开发第12页写法•CSS的伪类语法和别的语法有点不一样，其主要有两种语法表达方式1.E:pseudo-class{property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/–示例：a:link{color:red;}2.E.class:pseudo-class{property:value}–示例：a.selected:hover{color:blue;}HTML5移动Web开发第13页我们先来看一下原始demo•例ex6_2_a_demo.htmlHTML5移动Web开发第14页改进例ex6_2_b.html•.demoa:link{color:gray;}/*链接没有被访问时前景色为灰色*/•.demoa:visited{color:yellow;}/*链接被访问过后前景色为黄色*/•.demoa:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/•.demoa:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/HTML5移动Web开发第15页•:hover用于当用户把鼠标移动到元素上面时的效果；•:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）•:focus用于元素成为焦点，这个经常用在表单元素上。HTML5移动Web开发第16页CSS3的:nth选择器•是CSS3选择器最新部分，也称这种选择器为CSS3结构类.•:fist-child选择某个元素的第一个子元素；•:last-child选择某个元素的最后一个子元素；•:nth-child()选择某个元素的一个或多个特定的子元素；•:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；•:nth-of-type()选择指定的元素；•:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；HTML5移动Web开发第17页CSS3的:nth选择器•是CSS3选择器最新部分，也称这种选择器为CSS3结构类.•:first-of-type选择一个上级元素下的第一个同类子元素；•:last-of-type选择一个上级元素的最后一个同类子元素；•:only-child选择的元素是它的父元素的唯一一个了元素；•:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；•:empty选择的元素里面没有任何内容。HTML5移动...