Pilot video: Make your first web page

Practical operation: analysis of song list recommendation module

Knowledge point: three style sheets

Practical operation: introduction of style sheet (div and title tag)

Practical operation: Title implementation (selector + CSS common styles)

Practice: List Analysis

Knowledge point: list tags

Knowledge point: img

Knowledge points: relative and absolute paths

Knowledge point: Hyperlink a tag

Practical operation: Partial implementation of list layout

Knowledge point: Floating

Knowledge point: box model-margin boundary

Knowledge point: box model-padding inner filling

Knowledge point: line height

Practical operation: song list recommendation-list implementation

Practical operation: New song debut-implementation of title and navigation

Practical operation: new song debut-the first small box in the list

Knowledge point: border

Practical operation: new song debut-list implementation

Practical operation: Implementation of wonderful recommendation module

Practical operation: Ranking list-title implementation

Knowledge points: background (color, picture, repetition)

Knowledge point: background (positioning, scrolling)

Practical operation: Ranking list-list layout implementation

Practical operation: Ranking list-list style implementation

Knowledge point: label type

Practical operation: Bottom-download client

Practical Operation: Bottom-Featured Products

Practical operation: Bottom-cooperation link

Practical Operation: Bottom-Open Platform and TME Group Official Website

Practical operation: bottom-copyright

Practical operation: head-logo

Knowledge point: positioning (relative, absolute positioning)

Knowledge point: Fixed positioning_HD

Practical operation: Head-navigation implementation

Knowledge point: form elements (reset and re-record)

Knowledge point: rounded corners

Practical operation: Head-search box implementation

Practical operation: Head - login, activate VIP, recharge

Knowledge points: border triangles, pseudo elements

Practical operation: Head - add triangles for VIP activation and recharge

Practical operation: Head-secondary navigation