1-1 learning route

1-2 Introduction to HTML

1-3 Web related concepts

1-4 Common browsers and kernels

1-5 web standards

2-1 Introduction to HTML tags

2-2 HTML syntax specification

2-3 HTML basic structure tags

2-4 VSCode tool creation page

2-5 DOCTYPE and lang and the role of character sets

3-1 tag semantics

3-2 title tag

3-3 Paragraph tags and line break tags

3-4 Sports news case

3-5 text formatting tag

3-6 div and span tags

3-7 Image tags (top)

3-8 Image tags (below)

3-9 Things to note about image tags

4-1 Directory folders and root directories

4-2 Relative path (top)

4-3 Relative path (below)

4-4 absolute path

5-1 Link tag (top)

5-2 Link tags (below)

5-3 anchor link

5-4 Comment tags and special characters

6-1 Comprehensive Case (Part 1)

6-2 Comprehensive Cases (Part 2)

7-1 Introduction to HTML tags (Part 2)

7-2 Basic use of table labels

7-3 Header cell label

7-4 Table related attributes (understand)

7-5 Novel ranking case

7-6 Table structure tag

7-7 Merge Cells

7-8 Table summary

8-1 unordered list

8-2 ordered list

8-3 custom list

8-4 List summary

9-1 Form usage scenarios and classifications

9-2 form fields

9-3 Input type attribute text box and password box

9-4 Input type attribute radio button and check box

9-5 input name and value attributes

9-6 Checked and maxlength attributes of input

9-7 Classroom Questions and Answers on Usage Scenarios of Four Attributes of Input Form Elements

9-8 Input type attribute submit and reset button

9-9 input type attribute ordinary button and file field

9-10 label label

9-11 select drop-down form

9-12 textarea text area label

9-13 Summary of form elements

10-1 Registration page (1)

10-2 Registration page (2)

10-3 Registration page (3)

10-4 Registration page (4)

10-5 Learn to read documents

11-1 Introduction to CSS Cascading Style Sheets

11-2 Introduction to CSS

12-1 Experience CSS syntax specifications

12-2 CSS code style

13-1 The role of css selector

13-2 tag selector

13-3 class selector

13-4 Draw boxes using class selectors

13-5 Special use of class selector - multiple class names

13-6 id selector

13-7 wildcard selector

14-1 font-family sets the font family

14-2 font-size font size

14-3 font-weight font thickness

14-4 font-style font style

14-5 How to write font composite attribute

14-6 Summary of font attributes

15-1 text colorcolor

15-2 Text alignment text-align

15-3 text-decoration text-decoration

15-4 text-indent text-indent

15-5 Line spacing line-height

15-6 Summary of css text properties

16-1 internal style sheet

16-2 inline style sheet

16-3 external style sheet

16-4 Summary of css introduction methods

17-1 news page

17-2 Modify style (1)

17-3 Modify style (2)

17-4 Modify style (3)

17-5 Use of chrome debugging tools

18-1 css second day guide

18-2 emmet syntax generates html tags

18-3 emmet syntax to quickly generate css styles

18-4 Quickly format code

19-1 Introduction to compound selectors

19-2 descendant selector

19-3 Child element selector

19-4 Class exercises

19-5 Union selector

19-6 Link pseudo-class selector (Part 1)

19-7 Link pseudo-class selector (below)

19-8 focus pseudo-class selector

19-9 Compound selector summary

20-1 What is element display mode

20-2 block element

20-3 inline elements

20-4 inline block element

20-5 Summary of element display modes

20-6 Display mode conversion

21-1 The use of a small tool snipaste

21-2 Simple version of Xiaomi sidebar case

21-3 The principle of vertical centering of single line text

21-4 background color

21-5 Background picture

21-6 background tiling

21-7 Background position-orientation noun

21-8 Background location case one

21-9 Background location case 2-King of Glory background picture

21-10 Background position - precise units

21-11 Background Position - Mixed Units

21-12 background fixed

21-13 Composite writing method of background attribute

21-14 background color translucent

21-15 Background summary

21-16 Comprehensive Case Five-Color Navigation (Part 1)

21-17 Comprehensive Case Five-Cai Navigation (2)

22-1 Stackability

22-2 inheritance

22-3 row height inheritance

22-4 priority

22-5 Priority issues

22-6 Overlay of CSS weights

22-7 Two exercises on weights

23-1 Introduction to the box model

23-2 Understand the essence of web page layout

23-3 Box model components

23-4 box model border

23-5 Composite writing of borders

23-6 table thin line border

23-7 Borders affect the actual size of the box

23-8 Box model inner margin padding

23-9 padding compound property

23-10 padding will affect the actual size of the box

23-11 padding application-Sina Navigation Bar (Part 1)

23-12 padding application-Sina Navigation (Part 2)

23-13 Xiaomi sidebar modification

23-14 The padding will not hold the box open

23-15 Box model margin

23-16 Typical application of margins--block-level boxes are aligned horizontally and centrally

23-17 Inline elements and inline-block elements are horizontally centered

23-18 Margin merging - vertical margins of adjacent block elements

23-19 Margin merging - nested block elements collapse

23-20 clear inner and outer margins

24-1 Basic operations of ps

24-2 Comprehensive case-product module layout analysis

24-3 Comprehensive case-box layout

24-4 Comprehensive case-picture and paragraph production

24-5 Comprehensive case-evaluation and detail production

24-6 Comprehensive case-vertical line details production

24-7 Teacher explains

24-8 Express module layout analysis

24-9 Express module header production

24-10 Express module list creation

25-1 Rounded border principle

25-2 Use of rounded corners

26-1 box shadow

26-2 text shadow

27-1 Floating guide

27-2 Three ways of traditional web page layout

27-3 Why float is needed

27-4 what is float

27-5 Float Characteristics-Off-Standard

27-6 Floating properties-floating elements are displayed in one line

27-7 Float properties - Floated elements have inline block properties

27-8 Floated elements are often paired with standard flow parent elements

27-9 Floating Layout Exercise-1

27-10 Floating Layout Exercise-2

27-11 Floating Exercise-Mobile Phone Module (Part 1)

27-12 Floating Exercise-Mobile Phone Module (Part 2)

27-13 Common web page layouts

27-14 Two points to note about floating

28-1 Why clear float

28-2 Clear floating nature and extra label method

28-3 Clear the overflow of the floating parent element

28-4 Clear floating after pseudo-element

28-5 Clear floating double pseudo elements

28-6 clear float

29-1 Common image formats

29-2 Layer cutting (top)

29-3 Layer cutout (below)

29-4 slice tool

29-5 cutterman installation

29-6 Tips for using cutterman

30-1 Preparation

30-2 css attribute writing order (important)

30-3 Overall idea of ​​page layout

30-4 Header area creation

30-5 Logo area production

30-6 Navigation bar nav area production (Part 1)

30-7 Navigation bar nav area production (middle)

30-8 Navigation bar nav area production (Part 2)

30-9 Search search module input production

30-10 Search search module button production

30-11 User module production

30-12 Banner module production

30-13 Subnav module production (Part 1)

30-14 Subnav module production (Part 2)

30-15 Course module production (Part 1)

30-16 course module production (medium)

30-17 Course module production (Part 2)

30-18 Premium recommendation module (Part 1)

30-19 Premium recommendation module (medium)

30-20 Premium recommendation module (Part 2)

30-21 box-hd module production

30-22 box-bd module production

30-23 box module completed

30-24 footer module production

30-25 copyright module production

30-26 links module production

31-1 Positioning guide

31-2 Why positioning is needed

31-3 Positioning composition

31-4 relative positioning

31-5 Absolute positioning - no parent or no parent positioning

31-6 Absolute positioning - the parent has positioning status

31-7 Absolute positioning that is out of standard does not occupy its original position.

31-8 The origin of the son’s relationship with his father

31-9 The case of son’s absolute father-hot module

31-10 Fixed positioning

31-11 Tips for fixed positioning - fix to the right side of the center of the page

31-12 Sticky Positioning (Understand)

31-13 Positioning summary

31-14 Positioning stacking order

31-15 Absolutely positioned box centering algorithm

31-16 Special features of positioning

31-17 Floating elements will not suppress the text positioning of the standard flow.

32-1 layout analysis

32-2 big box production

32-3 Left arrow button production

32-4 Right arrow button production

32-5 ul box module production

32-6 li small dot module production

32-7 Web page layout summary

33-1 display shows hidden elements

33-2 visibilityshow hidden elements

33-3 overflow show hide

33-4 Potato Case (Part 1)

33-5 Potato case (Part 2)

34-1 Introduction

34-2 Why elf technology is needed

34-3 Use of sprite charts (principle)

34-4 Sprite diagram usage (code)

34-5 Sprite example - spell out your name

34-6 Font Icon Generation and Advantages

34-7 Font icon download

34-8 Use of font icons

34-9 Principle of appending and loading font icons

34-10 How to use CSS triangle

34-11 CSS triangle application-Jingdong effect

34-12 User Interface - Mouse Style

34-13 User Interface - De-outline form and prevent dragging of text fields

34-14 vertical-align implements vertical center alignment of inline blocks and text

34-15 Solution to the blank gap at the bottom of the picture

34-16 Single line text overflows ellipsis display

34-17 Multi-line text overflows ellipsis display

34-18 Layout skills - clever use of negative margins (Part 1)

34-19 Layout skills - clever use of negative margins (Part 2)

34-20 Layout techniques - clever use of text around floating elements

34-21 Layout techniques - clever use of inline blocks

34-22 Layout skills - clever use of CSS triangle (Part 1)

34-23 Layout skills - clever use of CSS triangle (Part 2)

34-24 CSS initialization

35-1 HTML5CSS3 improves navigation

35-2 Add semantic tags

35-3 Add video tag

35-4 Add audio tag

35-5 Add input form

35-6 Add new form properties

36-1 Attribute selector (top)

36-2 Attribute selector (below)

36-3 Structural pseudo-class selector - selects the nth element

36-4 nth-child selector (top)

36-5 nth-child selector (below)

36-6 The difference between nth-child and nth-of-type

36-7 Usage scenarios and origins of pseudo-element selectors

36-8 Basic use of pseudo-element selectors

36-9 Pseudo element selector usage scenarios-matching font icons

36-10 Pseudo element usage scenario-imitation potato effect

36-11 Pseudo-element selector - Pseudo-element clears floating nature

36-12 CSS3 box model border-box

36-13 CSS3 image blur processing

36-14 Calculate box width calc function

36-15 CSS3 new attribute transition (Part 1)

36-16 CSS3 new attribute transition (Part 2)

36-17 CSS3 transition exercises

36-18 Generalized H5 (understand)

37-1 Introduction

37-2 Website production process

37-3 Pinyougou project planning

37-4 Pinyougou project construction

37-5 Pinyougou Project-Modular Development of Styles

37-6 Pinyougou project-favicon icon production

37-7 Pinyougou project-TDK three major label SEO optimization

37-8 Pinyougou homepage-quick navigation shortcut structure construction

37-9 Pinyougou Homepage-Quick Navigation Left Side Production

37-10 Pinyougou homepage-quick navigation built on the right side

37-11 Pinyougou homepage - font icon on the right side of quick navigation

37-12 Pinyougou homepage-header module construction

37-13 Pinyougou homepage-logoSEO optimization (Part 1)

37-14 Pinyougou homepage-logoSEO optimization (Part 2)

37-15 Pinyougou homepage-search search module (Part 1)

37-16 Pinyougou homepage-search search module (Part 2)

37-17 Pinyougou homepage-hotwords module

37-18 Pinyougou homepage-shopcar module production

37-19 Pinyougou homepage-count shopping cart statistics module

37-20 Pinyougou homepage-nav navigation module construction

37-21 Pinyougou homepage-dropdown module production

37-22 Pinyougou homepage-Navigation detailed classification production (Part 1)

37-23 Pinyougou homepage-Navigation detailed classification production (Part 2)

37-24 Pinyougou homepage-navitems module production

37-25 Pinyougou homepage-footer bottom module construction

37-26 Pinyougou homepage-mod-servecie module production (Part 1)

37-27 Pinyougou homepage-mod-servecie module production (Part 2)

37-28 Pinyougou homepage-mod_help module production

37-29 Pinyougou homepage-mod_copyright module production

37-30 Pinyougou homepage-main main box construction

37-31 Pinyougou homepage-newsflash module

37-32 Pinyougou homepage-news-hd module production

37-33 Pinyougou homepage-new-bd module production

37-34 Pinyougou homepage-lifeservice production (Part 1)

37-35 Pinyougou homepage-lifeservice production (Part 2)

37-36 Pinyougou homepage-recommended module recom (Part 1)

37-37 Pinyougou homepage-recommended module recom (Part 2)

37-38 Pinyougou Home Page-Household Appliance Module Construction

37-39 Pinyougou Home Page-Household Appliance Module Head Production

37-40 Tab bar tab principle layout requirements

37-41 Pinyougou homepage-tab_list-item layout (Part 1)

37-42 Pinyougou homepage-tab_list-item layout (middle)

37-43 Pinyougou homepage-tab_list-item layout (Part 2)

37-44 Product Purchase List-Structure Construction

37-45 Pinyougo list page-flash sale module production

37-46 Pinyougou list page-navigation module modification

37-47 Pinyougou list page-a small problem

37-48 Pinyougou list page-end

37-49 Pinyougou registration page-header production

37-50 Pinyougo list page - registration main module header production

37-51 Pinyougou registration page - registration subject production (Part 1)

37-52 Pinyougou registration page - registration subject production (Part 2)

37-53 Pinyougou registration page-security module

37-54 Pinyougo registration page-agree module and complete registration module

37-55 Pinyougou project pages jump to each other and work arrangements

37-56 what is server

37-57 Apply for free space and website upload