HTML5跨平台开发基础与实战 王寅峰电子任务4 使用CSS设计绚彩输入框和按钮.ppt

《HTML5跨平台开发基础与实战 王寅峰电子任务4 使用CSS设计绚彩输入框和按钮.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、跨平台HTML5实战软件学院王寅峰任务4使用CSS设计绚彩输入框和按钮学习目标【知识目标】掌握CSS伪类选择器；掌握CSS边距设置；掌握CSS过渡属性。【技能目标】使用CSS伪类选择器和过渡实现页面元素外观变化。引例描述实现输入框和按钮不同状态下的颜色改变任务陈述输入框和按钮是网页常用的元素，在不同状态（如鼠标滑过）时的色彩变幻可以带给用户愉悦的用户体验。使用CSS3可以实现丰富的外观变化。1CSS边距设置2CSS伪类选择器3CSS过渡的基本结构知识准备1CSS边距设置CSS边距设置CSSm

2、argin属性用于设置外边距（即元素间的距离），margin属性接受任何长度单位，可以是像素、英寸、毫米或em。下面的例子为设置所有元素的四个边的外边距，所使用的长度单位是像素(px)：*{margin:0px0px0px0px;}CSS边距设置与内边距的设置相同，这些值的顺序是从上外边距(top)开始围着元素顺时针旋转的：margin:top（上）right（右）bottom（下）left（左）还可以通过margin-top/margin-right/margin-bottom/margin-le

3、ft来单独设置每个边的外边距。另外，还可以为margin设置一个百分比数值：p{margin:10%;}百分数是相对于父元素的width计算的。上述p元素设置的外边距是其父元素的width的10%。CSS边距设置外边距合并（叠加）CSS边距设置外边距合并（叠加）CSS中padding的用法CSS中padding的用法padding属性是css用于在一个声明中设置所有内边距的属性。padding属性包含了paddingleft：左补距离（设置距左内边距）；paddingtop：头顶补距离（设置距顶部内

4、边距）；paddingright：右补距离（设置距右内边距）；paddingbottom：底补距离（设置距低内边距）。padding的用法与margin相同。CSS的float属性CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示。在HTML中的所有对象，默认分为两种：块元素(blockelement)、内联元素(inlineelement)。CSS的float属性，作用就是改变块元素(blockelement)对象的默认显示方式。block对象设置了float属性之后

5、，它将不再独自占据一行。可以浮动到左侧或右侧。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。示例综合使用已学CSS属性，将右图所示没有样式的列表页面修改为下图所示效果。实现添加列表的HTML源码实现实现实现实现2CSS伪类选择器CSS伪类选择器CSS伪类用于向某些选择器添加特殊的效果。伪类的语法：selector:pseudo-class{property:value}选择器伪类属性CSS伪类选择器1动态伪类这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才

6、能体现出来，动态伪类包含两种：（1）链接中常看到的锚点伪类如“:link”,“:visited”;（2）用户行为伪类如“:hover”,":active"和":focus"CSS伪类选择器.demoa:link{color:gray;}/*链接没有被访问时前景色为灰色*/.demoa:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demoa:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demoa:active{color:blue;

7、}/*鼠标点中激活链接那一下前景色为蓝色*/CSS伪类选择器#confirmBtn:hover{background:#00de00;color:mediumvioletred;}#confirmBtn:active{background:#2b5880;}:hover用于当用户把鼠标移动到元素上面时的效果；:active用于用户点击元素那一下的效果（正发生在点击过程，松开鼠标左键此动作完成）:focus用于元素成为焦点，常用在表单元素上。CSS3伪类选择器:nth选择器CSS3选择器最新部分，使开

8、发者能选择某一对象中符合特定条件的元素进行渲染。1.:fist-child选择某个元素的第一个子元素；2.:last-child选择某个元素的最后一个子元素；3.:nth-child()选择某个元素的一个或多个特定的子元素；4.:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；5.:nth-of-type()选择指定的元素；CSS3伪类选择器:nth选择器1、:first-child:first-child是用来