CSS3-a powerful tool to instantly improve the quality of web pages

• Chapter1 css basic syntax and media queries
• 1-1 CSS first experience and element box
• 1-2 Element type and arrangement
• 1-3 Detailed explanation of css element display attribute
• 1-4 Four ways to apply css to elements
• 1-5 Other content in the css document
• 1-6 Principles and implementation of media queries
• Chapter2 Types and application scenarios of css selectors
• 2-1 First experience of the role of css selector
• 2-2 Types and application scenarios of css simple selectors
• 2-3 Types and application scenarios of css context selectors
• 2-4 Types and application scenarios of non-group matching of css pseudo-class selectors (1)
• 2-5 CSS pseudo-class selector non-group matching application scenario (2)
• 2-6 Application scenarios of group matching of css pseudo-class selectors
• Chapter3 Font controls and font icons
• 3-1 css precise control of page text
• 3-2 How to correctly introduce Ali font icons into the project (1)
• 3-3 How to correctly introduce Ali font icons into the project (2)
• 3-4 CSS precise control of font size and style (1)
• 3-5 CSS precise control of font size and style (2)
• 3-6 CSS precise control of font size and style (3)
• 3-7 Text line height and alignment
• Chapter4 Detailed description of css box model
• 4-1 The composition and common properties of the box model
• 4-2 Box model layout and containing blocks
• 4-3 Box model formatted horizontally
• 4-4 Box model margin vertical height collapse problem
• 4-5 Element background control in box model
• 4-6 The effect of element floating and clearing floating
• 4-7 Element positioning methods and application scenarios in the box model
• Chapter5 Flex layout principles and applications
• 5-1 The principle and implementation of flex layout
• 5-2 Flex container settings and features
• 5-3 The main axis direction of the flex container
• 5-4 How flex items wrap on the main axis of the container
• 5-5 flex items are sorted on the main axis of the container
• 5-6 The alignment of flex items on the cross axis
• 5-7 The magnification factor of the flex item on the main axis of the container
• 5-8 Arrangement and alignment of flex items on the main axis of the container
• 5-9 The shrinkage factor of the flex item on the main axis
• 5-10 flex item calculation width and item abbreviation property flex
• Chapter6 Flex layout classic practical cases
• 6-1 Flex layout example-irregular rectangular layout
• 6-2 Application scenarios of flex instance-order attribute
• 6-3 Flex layout example/PC-side universal layout solution (1)
• 6-4 Flex layout example/PC-side universal layout solution (2)
• 6-5 Flex layout example/mobile terminal (mall) layout plan (1)
• 6-6 Flex layout example/mobile terminal (mall) layout plan (2)
• 6-7 Flex layout example/mobile terminal (mall) layout plan (3)
• 6-8 Flex layout example/mobile terminal (mall) layout plan (4)
• Chapter7 Grid layout principles and common attributes
• 7-1 Grid layout ideas and basic terms
• 7-2 Creation of grid container and generation of grid project
• 7-3 Set the number and size of grid items
• 7-4 Grid cell division and item placement
• 7-5 grid named grid lines and named areas
• 7-6 Grid named grid area practical three-column quick layout
• 7-7 Set the alignment of cells in the Grid container
• 7-8 Set the alignment of an item in a cell
• Chapter8 Grid layout practical classic case
• 8-1 Grid practice-quickly implement 12-column grid layout component (1)
• 8-2 Grid practice/-quickly implement 12-column grid layout component (2)
• 8-3 Grid practice/quickly implement three-column layout on PC
• 8-4 Grid practice/responsive online photo album