Mobile layout: HTML5+CSS3 advanced and enhanced version-Free online video tutorial-php.cn

Community Learn Tools Library Leisure

English

Mobile layout: HTML5+CSS3 advanced and enhanced version

The purpose of this course is to enable everyone to master the mobile layout. The course mainly explains the viewport, double image, drain layout, flex layout, rem layout, responsive layout, and also adds tools such as Mockup.

Elementary

css3

html5

Mobile terminal

Advanced

125963 person learning

161class hour

19 hours 32 minutes 56 secondsTotal course duration

2022-11-25update

王林

Gold lecturer

A total of 180 courses Student180310 Lecturer rating5.2

有朋自远方来，虽远必诛！More>>

Course Introduction Course Outline Data Download Other Courses

You will learn：

The purpose of this course is to enable everyone to master the mobile layout. The course mainly explains the viewport, double image, drain layout, flex layout, rem layout, responsive layout, and also adds tools such as Mockup.

Mobile layout: HTML5+CSS3 advanced and enhanced version

Chapter1 H5C3 strengthened
expand retract

Section1 Introduction to HTML5
duration： 01 minutes 30 seconds

Section2 Basic use of vscode
duration： 15 minutes 21 seconds

Section3 vscode plug-in installation
duration： 11 minutes 30 seconds

Section4 What is HTML5
duration： 04 minutes 53 seconds

Section5 HTML5 new tags
duration： 09 minutes 30 seconds

Section6 Multimedia audio tags
duration： 12 minutes 10 seconds

Section7 Multimedia video tags
duration： 15 minutes 03 seconds

Section8 HTML5 new input tag
duration： 12 minutes 02 seconds

Section9 HTML5 new form attributes
duration： 12 minutes 32 seconds

Section10 HTML5 summary
duration： 06 minutes 52 seconds

Section11 Introduction to CSS3
duration： 02 minutes 39 seconds

Section12 CSS3 attribute selector (top)
duration： 11 minutes 18 seconds

Section13 CSS3 attribute selector (below)
duration： 10 minutes 46 seconds

Section14 CSS3 structural pseudo-class selector (Part 1)
duration： 06 minutes 19 seconds

Section15 nth-child(n)
duration： 12 minutes 47 seconds

Section16 The difference between nth-child and nth-of-type
duration： 10 minutes 22 seconds

Section17 Summary of structural pseudo-class selectors
duration： 02 minutes 02 seconds

Section18 CSS3 pseudo-element selector
duration： 08 minutes 48 seconds

Section19 Pseudo element selector case
duration： 09 minutes 26 seconds

Section20 2D conversion: translate
duration： 13 minutes 07 seconds

Section21 Center a box horizontally and vertically
duration： 09 minutes 18 seconds

Section22 2D conversion rotate
duration： 05 minutes 55 seconds

Section23 CSS3 triangle
duration： 07 minutes 23 seconds

Section24 Set conversion center point
duration： 06 minutes 09 seconds

Section25 Rotation center point case
duration： 06 minutes 56 seconds

Section26 2D conversion scale
duration： 06 minutes 56 seconds

Section27 Picture enlargement case
duration： 11 minutes 07 seconds

Section28 Paging button case
duration： 03 minutes 20 seconds

Section29 Comprehensive writing methods and sequence issues for 2D conversion
duration： 05 minutes 38 seconds

Section30 2D conversion summary
duration： 03 minutes 06 seconds

Section31 Basic usage of CSS3 animation
duration： 08 minutes 56 seconds

Section32 animation sequence
duration： 12 minutes 41 seconds

Section33 CSS3 animation common properties
duration： 16 minutes 08 seconds

Section34 CSS3 animation abbreviation
duration： 07 minutes 17 seconds

Section35 Big data heat map case (Part 1)
duration： 14 minutes 08 seconds

Section36 Big data heat map case (Part 2)
duration： 14 minutes 10 seconds

Section37 The steps of the speed curve
duration： 08 minutes 28 seconds

Section38 Running Bear Big Case
duration： 14 minutes 25 seconds

Section39 Understanding 3D Transformation
duration： 05 minutes 20 seconds

Section40 3D translation translate3d
duration： 07 minutes 57 seconds

Section41 perspectiveperspective
duration： 08 minutes 53 seconds

Section42 translateZ
duration： 09 minutes 23 seconds

Section43 3D rotation rotateX
duration： 09 minutes 43 seconds

Section44 3D rotation rotateY
duration： 03 minutes 55 seconds

Section45 3D rotation rotateZ
duration： 05 minutes 50 seconds

Section46 3D rendering transform-style
duration： 11 minutes 03 seconds

Section47 Two-sided flip box case
duration： 12 minutes 57 seconds

Section48 3D navigation bar (top)
duration： 12 minutes 26 seconds

Section49 3D navigation bar (below)
duration： 10 minutes 48 seconds

Section50 Comprehensive Case-Carousel Case (Part 1)
duration： 08 minutes 40 seconds

Section51 Comprehensive Case-Carousel Case (Part 2)
duration： 08 minutes 34 seconds

Section52 Browser private prefix and summary
duration： 11 minutes 13 seconds
Chapter2 Fluid layout
expand retract

Section1 Introduction to mobile WEB development flow layout
duration： 01 minutes 59 seconds

Section2 Mobile terminal basics
duration： 09 minutes 31 seconds

Section3 Viewport
duration： 09 minutes 02 seconds

Section4 meta viewport tag
duration： 06 minutes 53 seconds

Section5 physical pixel to physical pixel ratio
duration： 08 minutes 45 seconds

Section6 Double chart
duration： 12 minutes 13 seconds

Section7 Background scaling background-size
duration： 10 minutes 46 seconds

Section8 Background double image and multi-image cutout
duration： 05 minutes 38 seconds

Section9 Mobile development options
duration： 04 minutes 32 seconds

Section10 Mobile technology solutions
duration： 10 minutes 29 seconds

Section11 Mobile special styles
duration： 04 minutes 53 seconds

Section12 Mobile technology selection
duration： 03 minutes 40 seconds

Section13 Fluid layout
duration： 10 minutes 32 seconds

Section14 Preparation work for JD.com mobile homepage
duration： 06 minutes 58 seconds

Section15 body settings
duration： 06 minutes 29 seconds

Section16 app layout
duration： 08 minutes 29 seconds

Section17 app content filling
duration： 07 minutes 01 seconds

Section18 Search module layout
duration： 09 minutes 16 seconds

Section19 Search module content production
duration： 08 minutes 44 seconds

Section20 How to make a double sprite chart
duration： 08 minutes 15 seconds

Section21 Focus map production
duration： 06 minutes 45 seconds

Section22 Brand day module production
duration： 07 minutes 28 seconds

Section23 Navigation bar nav module production
duration： 11 minutes 22 seconds

Section24 Newsletter module
duration： 07 minutes 22 seconds

Section25 JD.com mobile home page end 2
duration： 04 minutes 31 seconds
Chapter3 flex
expand retract

Section1 Introduction to flex layout of mobile WEB development
duration： 01 minutes 14 seconds

Section2 Flex layout experience
duration： 07 minutes 02 seconds

Section3 flex layout principle
duration： 04 minutes 16 seconds

Section4 flex sets the spindle direction
duration： 08 minutes 14 seconds

Section5 justify-content sets the main axis sub-element arrangement
duration： 10 minutes 05 seconds

Section6 Whether flex-wrap sub-elements wrap
duration： 04 minutes 57 seconds

Section7 align-items sets the arrangement of cross-axis child elements
duration： 07 minutes 35 seconds

Section8 align-content sets the arrangement of cross-axis child elements
duration： 11 minutes 01 seconds

Section9 flex-flow and summary
duration： 03 minutes 45 seconds

Section10 Use of child flex properties
duration： 14 minutes 31 seconds

Section11 align-self and order
duration： 04 minutes 47 seconds

Section12 Ctrip mobile home page preparation work
duration： 06 minutes 46 seconds

Section13 Home page layout analysis and search module layout
duration： 09 minutes 10 seconds

Section14 Search module made by user
duration： 12 minutes 11 seconds

Section15 Search module production search production
duration： 11 minutes 22 seconds

Section16 Focus map focus module production
duration： 02 minutes 47 seconds

Section17 local-nav layout
duration： 05 minutes 17 seconds

Section18 local-nav content production
duration： 11 minutes 38 seconds

Section19 Use the attribute selector to change the background image
duration： 04 minutes 44 seconds

Section20 nav appearance layout
duration： 08 minutes 50 seconds

Section21 nav content production
duration： 10 minutes 59 seconds

Section22 Background gradient linear-gradient
duration： 06 minutes 14 seconds

Section23 subnav-entry module production
duration：In calculation

Section24 Popular activity module production
duration：In calculation

Section25 More welfare module production
duration：In calculation

Section26 sales-bd module production 3
duration：In calculation
Chapter4 rem layout
expand retract

Section1 Introduction to mobile WEB development rem adaptive layout
duration： 01 minutes 20 seconds

Section2 rem unit
duration： 11 minutes 13 seconds

Section3 Introduction to media query syntax
duration： 09 minutes 58 seconds

Section4 Media Query Case Background Discoloration
duration： 12 minutes 20 seconds

Section5 Media query + rem realizes dynamic size changes of elements
duration： 07 minutes 41 seconds

Section6 Media query introduces resources
duration： 09 minutes 12 seconds

Section7 Disadvantages of CSS
duration： 05 minutes 22 seconds

Section8 Introduction to LESS and using variables
duration： 09 minutes 04 seconds

Section9 less compile easyless plug-in
duration： 08 minutes 56 seconds

Section10 less nesting
duration： 10 minutes 17 seconds

Section11 less operation
duration： 05 minutes 57 seconds

Section12 Principle of rem adaptation scheme
duration： 11 minutes 53 seconds

Section13 rem final adaptation plan
duration： 11 minutes 45 seconds

Section14 Suning homepage common.less production
duration： 04 minutes 43 seconds

Section15 Suning homepage import import style
duration： 04 minutes 03 seconds

Section16 Suning home page body style settings
duration： 07 minutes 28 seconds

Section17 Suning homepage search-content module layout
duration： 09 minutes 02 seconds

Section18 Suning homepage search-content content layout
duration：In calculation

Section19 Suning homepage-search module production
duration：In calculation

Section20 Suning homepage banner and advertising module production
duration：In calculation

Section21 Suning homepage nav part production
duration：In calculation

Section22 rem adaptation solution 2 flexble.js introduction
duration： 04 minutes 27 seconds

Section23 rem adaptation solution 2 Suning home page preliminary preparation work
duration： 03 minutes 29 seconds

Section24 rem adaptation scheme 2body style modification
duration：In calculation

Section25 A magical vscode plug-in cssrem
duration：In calculation

Section26 Modify flexible default html font size
duration：In calculation

Section27 rem adaptation solution 2 search-content content production 1
duration：In calculation

Section28 rem adaptation solution 2 search-content content production 2
duration：In calculation
Chapter5 Responsive layout
expand retract

Section1 Mobile web development responsive introduction
duration： 02 minutes 47 seconds

Section2 Responsive development principles
duration： 03 minutes 01 seconds

Section3 Responsive layout container
duration： 12 minutes 23 seconds

Section4 Responsive navigation case
duration： 06 minutes 11 seconds

Section5 Introduction to Bootstrap
duration： 10 minutes 08 seconds

Section6 Bootstrap usage (Part 1)
duration： 08 minutes 31 seconds

Section7 Bootstrap usage (Part 2)
duration： 05 minutes 17 seconds

Section8 Bootstrap layout container
duration： 03 minutes 51 seconds

Section9 Bootstrap grid system
duration： 04 minutes 58 seconds

Section10 Use of Bootstrap grid system (Part 1)
duration： 12 minutes 38 seconds

Section11 Use of Bootstrap grid system (Part 2)
duration： 06 minutes 28 seconds

Section12 Bootstrap column nesting
duration： 08 minutes 07 seconds

Section13 Bootstrap column offset
duration： 08 minutes 06 seconds

Section14 Bootstrap column sorting
duration： 03 minutes 21 seconds

Section15 Bootstrap responsive tools
duration： 06 minutes 22 seconds

Section16 Alibaba Baixiu demand analysis
duration： 05 minutes 59 seconds

Section17 Preparatory work for Ali Baixiu
duration： 03 minutes 58 seconds

Section18 Modify the maximum width of the container
duration： 03 minutes 50 seconds

Section19 Alibaba Baixiu logo production
duration： 08 minutes 02 seconds

Section20 Alibaba Baixiu nav production introduces font icons
duration： 08 minutes 32 seconds

Section21 Produced by Ali Baixiu News (Part 1)
duration： 12 minutes 20 seconds

Section22 Produced by Ali Baixiu News (Part 2)
duration： 03 minutes 24 seconds

Section23 Alibaba Baixiu publish module production
duration： 11 minutes 50 seconds

Section24 Alibaba Baixiu aside module production
duration：In calculation

Section25 Alibaba Baixiu logo responsive production
duration： 09 minutes 27 seconds

Section26 Alibaba Baixiu nav responsive production
duration： 04 minutes 51 seconds

Section27 Alibaba Baixiu news responsive production
duration： 05 minutes 35 seconds

Section28 Alibaba Baixiu publish responsive production
duration： 05 minutes 04 seconds

Section29 Mobile terminal development summary
duration： 03 minutes 07 seconds

Data Name operate
[must see]Mobile layout: HTML5+CSS3 advanced and enhanced version related courseware Download

王林 Lecturer Other Courses

ElementaryComplete collection of interview questions in front-end disciplines (Season 1)

23865
Collection
ElementaryFlexible box + responsive page layout practice

9106
Collection
ElementaryMake a responsive website from scratch—Grid layout

18073
Collection
ElementaryThe most easy-to-understand HTML+CSS course in 9 days

45389
Collection
ElementaryBasic tutorial for getting started with Web front-end

245451
Collection
ElementaryWeb front-end development-Zero Basic Programming Admission Guide

68191
Collection
ElementaryFront-end basic HTML5+CSS3 from entry to proficiency (full version)

302652
Collection
ElementaryThe latest CSS3 tutorial is quick and easy to understand

22887
Collection
ElementaryCSS3 Flex flexible box model makes layout fly

28910
Collection
ElementaryLearn DIV+CSS layout in one day (five practical exercises)

11204
Collection
ElementaryHTML5+CSS practice project [Hand Knock Onmyoji official website]

11154
Collection
ElementaryMobile layout: HTML5+CSS3 advanced and enhanced version

125963
Collection

Start Learning

This course includes：

19 hours 32 minutes 56 seconds Watch videos anytime

1 Download Resources

Popular courses Latest courses

More>