Article
Topic
Learning
Download
Q&A
Programming Dictionary
Game
Recent Updates
LOGIN
简体中文(ZH-CN)
English(EN)
繁体中文(ZH-TW)
日本語(JA)
한국어(KO)
Melayu(MS)
Français(FR)
Deutsch(DE)
Next Section: Layout techniques - clever use of text around floating elements
(586 plays)
Next Section
Watch Again
ဆ
Chapter
Note
Ask
Courseware
Feedback
Getting started with HTML5+CSS3 for front-end newbies
Chapter1 Course Introduction and Basic Computer Knowledge
1-1 learning route
1-2 Introduction to HTML
1-3 Web related concepts
1-4 Common browsers and kernels
1-5 web standards
Chapter2 HTML basic syntax and structure
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
Chapter3 HTML tags
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
Chapter4 Relative path vs absolute path
4-1 Directory folders and root directories
4-2 Relative path (top)
4-3 Relative path (below)
4-4 absolute path
Chapter5 Links and Anchors
5-1 Link tag (top)
5-2 Link tags (below)
5-3 anchor link
5-4 Comment tags and special characters
Chapter6 Comprehensive case
6-1 Comprehensive Case (Part 1)
6-2 Comprehensive Cases (Part 2)
Chapter7 HTML table
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
Chapter8 HTML list
8-1 unordered list
8-2 ordered list
8-3 custom list
8-4 List summary
Chapter9 HTML form
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
Chapter10 Comprehensive case
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
Chapter11 Introduction to css cascading demo table
11-1 Introduction to CSS Cascading Style Sheets
11-2 Introduction to CSS
Chapter12 css syntax specifications and code style
12-1 Experience CSS syntax specifications
12-2 CSS code style
Chapter13 css selector
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
Chapter14 css font
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
Chapter15 csstext
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
Chapter16 css stylesheet
16-1 internal style sheet
16-2 inline style sheet
16-3 external style sheet
16-4 Summary of css introduction methods
Chapter17 Comprehensive case
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
Chapter18 emmet syntax
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
Chapter19 compound selector
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
Chapter20 Element display mode
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
Chapter21 Sidebar small case
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)
Chapter22 Three major features of CSS
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
Chapter23 box model
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
Chapter24 Comprehensive case
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
Chapter25 rounded border
25-1 Rounded border principle
25-2 Use of rounded corners
Chapter26 shadow
26-1 box shadow
26-2 text shadow
Chapter27 float
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
Chapter28 clear float
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
Chapter29 ps cut picture
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
Chapter30 Xuecheng Online Case
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
Chapter31 position
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.
Chapter32 Taobao focus map
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
Chapter33 Potato case
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)
Chapter34 Advanced CSS Tips
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
Chapter35 HTML5 new
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
Chapter36 New in CSS3
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)
Chapter37 Pinyougou project
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
Previous section
Next Section
Tutorial List
get help
Course Recommendations
Courseware download
Intermediate
Front-end Vue3 actual combat [handwritten vue project]
2857 people are watching
Elementary
APIPOST tutorial [Popularization of technical concepts related to network communication]
1795 people are watching
Intermediate
Issue 22_Comprehensive actual combat
5521 people are watching
Elementary
Issue 22_PHP Programming
5172 people are watching
Elementary
Issue 22_Front-end development
8713 people are watching
Intermediate
Big data (MySQL) video tutorial full version
4525 people are watching
Elementary
Go language tutorial-full of practical information and no nonsense
2794 people are watching
Elementary
GO Language Core Programming Course
2814 people are watching
Intermediate
JS advanced and BootStrap learning
2563 people are watching
Intermediate
SQL optimization and troubleshooting (MySQL version)
3374 people are watching
Intermediate
Redis+MySQL database interview tutorial
2963 people are watching
Elementary
Deliver food or learn programming?
5708 people are watching
HTML5+CSS3 related courseware for front-end beginners with zero basic knowledge
Belongs to chapter:Getting started with HTML5+CSS3 for front-end newbies
Download
Students who have watched this course are also learning
491169 plays
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)
notes
X
About us
Disclaimer
Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!