任务十二：学习CSS 3的新特性

面向人群：
初学者
难度：
简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

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

任务描述

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

任务注意事项

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

任务协作建议

  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 可以把三个任务或自己另外想实现的CSS 3新特性分工给各个人，每个人完成一个子任务。在完成分到的任务之余可以尝试实现更多的子任务
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

时间： 2025-01-07 13:42:33

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

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

Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 这一章很多,但是很有趣,也是这书的最后一章知识点了,我现在还在考虑要不要写这个拼图和2048的案例,在此之前,我们先来玩玩Android5.X的新特性吧!

37、IFE任务12——学习CSS 3的新特性

0.题目 实现 示例图(点击查看) 中的几个例子 实现单双行列不同颜色,且前三行特殊表示的表格 实现正常状态和focus状态宽度不一致的input文本输入框,且鼠标焦点进入输入框时,宽度的变化以动画呈现 不使用JavaScript,实现一个Banner图轮流播放的效果,且点击右下角的1,2,3可以切换到对应Banner图片 1.解题过程 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&

(十二)学习CSS之display属性

参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell".&qu

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

在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X:link X:visited X:hover X:active 伪类 a:link { color: red; }a:visted { color: purple; } 伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式.三种伪类选择器常用于链接,但不是说只适用于链接

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

C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // Unrestricted access int myPublic; protected: // Defining or derived class only int myProtected; private: // Defining class only int myPrivate; } class

C++ 学习笔记（一些新特性总结 1）

C++ 学习笔记(一些新特性总结 1) 虽然我也用了 C++ 有挺多年了,但是一直本着够用就行的原则,没有特别深入的学习过C++ 的语法,所以好多高级的 C++ 特性都不了解.正好最近从网上找到了本书<C++ 14 Quick Syntax Reference>,挺薄的一本书,只有 100多页,但是覆盖了基本所有 C++ 的特性.这个小短文就是我看这本书时摘抄下来的一些我以前没有注意到的知识点. 文中所有代码都在 gcc version 5.3.0 (Rev1, Built by MSYS2

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

前言: Java8 已经发布很久了,很多报道表明java8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with Java 8 – Lambdas and Concurrency.Java 8 Date Time API Tutorial : LocalDateTime和Abstract Class Versus Interface in the JDK 8 Era.本文还参考了一些其他资料,例如:15 Must Read

从零开始学习html（十二）CSS布局模型——下

五.什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样, 每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧. 但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局. 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作. CSS定义了一组定位(positioning)属性来支持层布局模型. 层模型有三种形式: 1.绝对定位

CSS基础学习十二：CSS样式

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式.我们就目前用到的 CSS样式简单地介绍一下. 下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色