Task 12: Learn the new features of CSS 3

For the crowd:

Beginners

Difficulty:

Simple

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

• Learn what the new features of CSS 3 are, and choose some of them for a practical little exercise

Task description

• Some examples of implementing the example diagram (click to view)
• A table that implements a single-double row of different colors and a special representation of the first three rows
• Input text entry box that implements normal and focus state widths, and changes the width to animate when the mouse focus enters the input box
• Do not use JavaScript, to achieve a banner chart rotation effect, and click on the lower right corner of the banner can switch to the corresponding picture

Task considerations

• This task involves only HTML and CSS
• HTML and CSS code structure clear, specification
• Try as many other new features of CSS 3 as possible in addition to the 3 small tasks in the task

Task Collaboration recommendations

• Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
• You can assign three tasks or other CSS 3 new features that you want to implement to each person, each of whom completes a subtask. Try to achieve more subtasks while completing the tasks you have assigned
• Cross-review other people's code, suggesting that everyone see at least one team member's code
• Discuss each other and finally synthesize a copy of the best code within the group to submit

Online learning Resources

• "Graphic CSS3"
• W3school CSS3 Tutorials
• MDN CSS 3

Task 12: Learn the new features of CSS 3