Programming practice慕课视频播放-HTML5 Mobile Front-end Development Foundation-MOOC慕课视频教程-柠檬大学

Final exam paper

Note: Examination time: 150 minutes, choose one of questions 1 and 2 to answer

1. There is an existing website, part of which is timeline. Please use html+css to complete it. The effect is shown in the renderings.

【Requirement】：

1) You can use the content of html5 and css3

2) Mouse over the title to prompt for detailed information

3) Require the entire content level to be centered

4) Code writing specification

5) The presentation layer is separated from the structure layer

【Renderings】

2. There is an existing website, some of which are the latest activities, please use html+css to complete it, and the realization effect is shown in the renderings

【Requirement】：

1) You can use the content of html5 and css3

2) When the mouse passes through which news, the picture of which news will be enlarged

3) The title only shows one line, and if there are too many words, the ellipsis is displayed

4) Code writing specification

5) The presentation layer is separated from the structure layer

【Renderings】

HTML5 Mobile Front-end Development Foundation课程列表：

Chapter 1 HTML Tags

-Section 1.1 html tags1

--Section 1.1 html tags

--test 1.1

-Section 1.2 html tags2

--Section 1.2 html tags2

--test 1.2

Chapter 2 CSS

-Section 2.1 CSS foundation

--Section 2.1 CSS foundation

--test 2.1

-Section 2.2 CSS- pseudo class-display

--Section 2.2 CSS- pseudo class-display

--test 2.2

-Section 2.3 CSS floating

--Section 2.3 CSS floating

--test 2.3

-Section 2.4 CSS box model

--Section 2.4 CSS box model

--test 2.4

-Section 2.5 CSS font background

--Section 2.5 CSS font background

--test 2.5

-Section 2.6 CSS Positioning

--Section 2.6 CSS Positioning

--test 2.6

Chapter 3 HTML+CSS Cases

-Section 3.1 case1

--Section 3.1 case1

--test 3.1

-Section 3.2 case2

--Section 3.2 case2

--test 3.2

Chapter 4 HTML5+canvas+svg

-Section 4.1 HTML5

--Section 4.1 HTML5

--test 4.1

-Section 4.2 HTML5 audio and video

--Section 4.2 HTML5 audio and video

--test 4.2

-Section 4.3 canvas

--Section 4.3 canvas

--test 4.3

-Section 4.4 svg

--Section 4.4 svg

--test 4.4

Chapter 5 CSS3+Mobile layout

-Section 5.1 CSS3 projection background

--Section 5.1 CSS3 projection background

--test 5.1

-Section 5.2 CSS3 selector pseudo class

--Section 5.2 CSS3 selector pseudo class

--test 5.2

-Section 5.3 CSS3 deformation

--Section 5.3 CSS3 deformation

--test 5.3

-Section 5.4 CSS3 animation

--Section 5.4 CSS3 animation

--test 5.4

-Section 5.5 Mobile layout

--Section 5.5 Mobile layout

--test 5.5

Chapter 6 HTML+CSS3 Cases

-Section 6.1 case1

--Section 6.1 case1

--test 6.1

-Section 6.2 case2

--Section 6.2 case2

--test 6.2

-Section 6.3 case3

--Section 6.3 case3

--test 6.3

--Section 6.3 case3

Chapter 7 Javacript

-Section 7.1 Javascript base fixed navigation

--Section 7.1 Javascript base fixed navigation

--test 7.1

-Section 7.2 Implementation of rotation graph based on Javascript

--Section 7.2 Implementation of rotation graph based on Javascript

--test 7.2

Practice exercise

-Practice exercise

Final examination

-Programming practice