任务目的

  • 学习了解 CSS 3 都有哪些新特性，并选取其中一些进行实战小练习

任务描述

  • 实现 示例图（点击查看） 中的几个例子
    • 实现单双行列不同颜色，且前三行特殊表示的表格
    • 实现正常状态和focus状态宽度不一致的input文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现
    • 不使用JavaScript，实现一个Banner图轮流播放的效果，且点击右下角的1，2，3可以切换到对应Banner图片

任务注意事项

  • 本任务只涉及 HTML 及 CSS
  • HTML 及 CSS 代码结构清晰、规范
  • 除了任务中的3个小任务，尽可能多地尝试 CSS 3 的其他新特性

任务完成与总结：

整个任务能够分为三小块，第一块就是表格，难度并不大；

第二块是输入框的变化，需要注意一个问题：

第三块是我薄弱的地方，在这里好好总结下，首先，看下HTML结构 ：

现在一步步来分析CSS代码，首先要把父盒子进行相对定位和溢出内容隐藏，而且父盒子需要设置一个背景色进行伪装，这是必须。接着ul和li都要设置绝对定位，其中ul的绝对定位以父盒子为参考物，而li的绝对定位则以ul为参考物。li的位置要向左偏离百分之百，在事件触发时调用slider-out动画：

有一点要理解的是，在li选择事件触发时，被选择的那个li执行的是slider-in动画，而不是全局的slider-out动画，目的是为了营造一个类似手风琴连贯的效果。

两个动画效果：

为了避免页面刷新和载入时有动画效果，因此设置了ul的动画：

更多详情点击查看效果，具体实现方式请查看源代码

任务十二：学习CSS 3的新特性的更多相关文章

  1. 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高

    第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...

  2. Android群英传笔记——第十二章：Android5.X 新特性详解，Material Design UI的新体验

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

  3. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  4. (十二)学习CSS之box-sizing 属性

    参考:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing 属性 定义和用法 box-sizing 属性允许您以特定的 ...

  5. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

  6. Java学习：JDK8的新特性

    Java学习:JDK8的新特性 一.十大特性 Lambda表达式 Stream函数式操作流元素集合 接口新增:默认方法与静态方法 方法引用,与Lambda表达式联合使用 引入重复注解 类型注解 最新的 ...

  7. C++ 学习笔记（一些新特性总结3）

    C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...

  8. 【Java学习笔记之二十八】深入了解Java8新特性

    前言: Java8 已经发布很久了,很多报道表明java8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with Java 8 ...

  9. 二十七、JDK1.5新特性---Annotation

    上篇文章介绍了反射的一些基础知识以及应用案例,本文将介绍jdk 1.5 出现的新特性——Annotation也就是我们所说的注解,即使用注释的方式加入一些程序的信息. 注解相当于一种标记,在程序中加了 ...

随机推荐

  1. MySQL创建数据库与创建用户以及授权

    1.create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创建数据库 采用create schema和c ...

  2. java解析上传的excel

    file是一个File,是一个excel文件 得到文件流:InputStream in =  file.getInputStream() 需要引入的类 import jxl.Cell;import j ...

  3. git 由http切换成git

    项目中经常会遇到http 的git 协议为了安全切换成ssh 的git 协议. 这个时候,只要使用如下命令变更 remote 字符串就好了. git remote set-url origin git ...

  4. python安装插件包注意事项

    注意!注意!注意!安装以来lib库时强烈建议使用pip安装:原因:nu1:用exe安装会出现各种意想不到让您惊讶的错误!!!nu2:这种错误很难解决且花费无用功!!! 使用pip安装: nu1:使用. ...

  5. RabbitMQ-从基础到实战（1）— Hello RabbitMQ

    转载请注明出处 1.简介 本篇博文介绍了在windows平台下安装RabbitMQ Server端,并用JAVA代码实现收发消息 2.安装RabbitMQ RabbitMQ是用Erlang开发的,所以 ...

  6. spring项目中dubbo相关的配置文件出现红叉的问题

    近来在eclipse中导入了一个web项目,但是发现项目上有红色的叉号. 原来是spring中关于dubbo的配置文件报错了. Multiple annotations found at this l ...

  7. php多进程编程详解

    php多进程编程 前言 php单进程存在的问题: 多核处理器未充分利用,而单处理器通常需要等待其他操作完成之后才能再继续工作. 任何现代操作系统都可在幕后执行多任务,这意味着在很短时间内,计算机可以调 ...

  8. MyBatis解决字段名与实体类属性名不相同的冲突（四）

    一.创建表和表数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no ), order_price FLOA ...

  9. 实验楼-4-Linux文件权限

    $ ls -l /*查看文件权限*/ 每一行格式意思: <文件类型和权限 链接数 所有者 所在用户组 文件大小 上次修改时间 文件名> 文件类型和权限如下图: 解释: 软连接:类似于win ...

  10. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 1)

    『可复用』这个词相信大家都熟悉,通过『可复用』的组件,可以大大提高软件开发效率. 值得注意的事,当我们设计一个可复用的面向对象组件时,需要保证其独立性,也就是我们熟知的『高内聚,低耦合』原则. 组件化 ...