Front-end actual native layout—(Xiaomi Mall)-Free online video tutorial-php.cn

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Front-end actual native layout—(Xiaomi Mall)

Integrating the layout knowledge learned on the front end, the case will combine JavaScript and jQuery knowledge to help you complete a purely native large-scale website layout practice: Xiaomi Mall homepage, login page, product details page, shopping cart page, my order page, order details page

Elementary

41960 person learning

25class hour

08 hours 45 minutes 24 secondsTotal course duration

2024-05-09update

PHPz

Gold lecturer

A total of 72 courses Student45548 Lecturer rating5.5

学习是最好的投资！More>>

Course Introduction Course Outline Data Download Other Courses

You will learn：

Example of functional layout imitating Xiaomi mall

Front-end actual native layout—(Xiaomi Mall)

Chapter1 Xiaomi Mall homepage layout breakdown
expand retract

Section1 Practical introduction to front-end layout
duration： 05 minutes 49 seconds

Section2 Home page layout breakdown (1)
duration： 12 minutes 12 seconds

Section3 Home page layout breakdown (2)
duration： 14 minutes 31 seconds

Section4 Home page layout breakdown (3)
duration： 18 minutes 05 seconds

Section5 Home page layout breakdown (4)
duration： 24 minutes 00 seconds

Section6 Mall bottom layout (1)
duration： 23 minutes 57 seconds

Section7 Mall bottom layout (2)
duration： 16 minutes 26 seconds
Chapter2 Xiaomi Mall home page navigation breakdown
expand retract

Section1 Mall navigation breakdown (top navigation)
duration： 19 minutes 46 seconds

Section2 Mall navigation breakdown (drop-down menu 1)
duration： 29 minutes 23 seconds

Section3 Mall navigation breakdown (drop-down menu 2)
duration： 23 minutes 52 seconds

Section4 Mall navigation decomposition (sidebar vertical navigation)
duration： 26 minutes 32 seconds

Section5 Page mini navigation
duration： 21 minutes 21 seconds
Chapter3 Detailed explanation of the layout of the main content of the Xiaomi Mall homepage
expand retract

Section1 Detailed explanation of the main content layout of the mall (1)
duration： 22 minutes 53 seconds

Section2 Detailed explanation of the main content layout of the mall (2)
duration： 20 minutes 35 seconds

Section3 Detailed explanation of the main content layout of the mall (3)
duration： 12 minutes 27 seconds
Chapter4 Detailed explanation of Xiaomi Mall login page layout
expand retract

Section1 Xiaomi Mall login page layout (1)
duration： 26 minutes 38 seconds

Section2 Xiaomi Mall login page layout (2)
duration： 23 minutes 58 seconds

Section3 Xiaomi Mall login page (js achieves switching effect)
duration： 09 minutes 44 seconds
Chapter5 Product details page layout and js effect
expand retract

Section1 Product details page layout (1)
duration： 26 minutes 37 seconds

Section2 Product details page layout (2)
duration： 42 minutes 37 seconds

Section3 Product details page (jQuery effect)
duration： 39 minutes 07 seconds
Chapter6 Shopping cart page jQuery function block
expand retract

Section1 Select all items in the shopping cart
duration： 21 minutes 59 seconds

Section2 Realize the addition and subtraction of the quantity of items in the shopping cart and the subtotal of the total price of the items
duration： 16 minutes 43 seconds

Section3 Calculate the total price of all checked items in the shopping cart
duration： 19 minutes 52 seconds
Chapter7 Summarize
expand retract

Section1 Summary of Xiaomi Mall Layout
duration： 06 minutes 20 seconds

Data Name operate
[must see]Front-end practical native layout—(Xiaomi Mall) courseware and source code Download

PHPz Lecturer Other Courses

ElementaryIntroduction to basic parameters of Layer pop-up window

34348
Collection
ElementaryFront-end basic practical course

37554
Collection
ElementaryQuickly master the basics of programming (a must-read for beginners)

17724
Collection
ElementaryWeb Development Basics_HTML+CSS

32229
Collection
ElementaryHTML code example

136214
Collection
ElementaryBuild HTML pages from scratch

136478
Collection
ElementaryFront-end actual native layout—(Xiaomi Mall)

41960
Collection
ElementaryCSS code example

158714
Collection
ElementaryBeautification function of CSS

86399
Collection
IntermediateH5 page design project practice

24423
Collection
IntermediateHTML5 front-end interview questions

20913
Collection
ElementaryBootstrap5-make web development faster

33076
Collection

Start Learning

This course includes：

08 hours 45 minutes 24 seconds Watch videos anytime

1 Download Resources

Popular courses Latest courses

More>

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！