任务4 使用CSS设计绚彩输入框和按钮.pptVIP

3 CSS过渡 跨平台HTML5实战 软件学院 王寅峰 任务4 使用CSS设计绚彩输入框和按钮 学习目标 【知识目标】 ? 掌握CSS伪类选择器； ? 掌握CSS边距设置； ? 掌握CSS过渡属性。 【技能目标】 ? 使用CSS伪类选择器和过渡实现页面元素外观变化。 引例描述 实现输入框和按钮不同状态下的颜色改变 任务陈述 输入框和按钮是网页常用的元素，在不同状态（如鼠标滑过）时的色彩变幻可以带给用户愉悦的用户体验。使用CSS3可以实现丰富的外观变化。 1 CSS边距设置 2 CSS伪类选择器 3 CSS过渡 的基本结构 知识准备 1 CSS边距设置 CSS边距设置 CSS margin 属性 用于设置外边距（即元素间的距离），margin 属性接受任何长度单位， 可以是像素、英寸、毫米或em。 下面的例子为设置所有元素的四个边的外边距，所使用的长度单位是像素 (px)： *{margin : 0px 0px 0px 0px;} CSS边距设置 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的： margin: top（上） right（右） bottom（下） left（左） 还可以通过margin-top/margin-right/margin-bottom/margin-left 来单独设置每个边的外边距。另