Next Section: 右侧商品上半部分详情介绍的布局搭建637 plays

5 秒后自动播放下一节
  Watch Again

Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

Introduction >
ChapterCourseware
Chapter1Page Layout

Project Description

05 minutes15 seconds

Login registration layout construction

16 minutes17 seconds

List layout construction

07 minutes14 seconds

logo and search box

07 minutes14 seconds

Product category navigation layout

07 minutes19 seconds

Path navigation layout

07 minutes33 seconds

Dynamic rendering of path navigation data

14 minutes49 seconds
Chapter2magnifying glass effect

Magnifying glass layout construction on the left

13 minutes27 seconds

Magnifying glass mouse move in and out effect

13 minutes41 seconds

Move the magnifying glass mouse to realize the dragging effect of mask elements

16 minutes11 seconds

Boundary control for mask element movement

06 minutes53 seconds

Moving the magnifying glass achieves the effect of moving large picture elements in equal proportions

13 minutes33 seconds

Magnifying glass thumbnail layout construction effect

12 minutes50 seconds

Dynamic rendering of magnifying glass thumbnail data

09 minutes06 seconds

Click on the thumbnail to change the image to a smaller or larger image.

19 minutes15 seconds

Analysis on the principle of image carousel effect by clicking the left and right arrows on thumbnails

08 minutes09 seconds

Calculate the distance of each picture movement and the distance of ul movement

17 minutes28 seconds
Chapter3Products on the right

The layout of the detailed introduction of the upper part of the product on the right

24 minutes04 seconds

Detailed explanation of the upper part of the product on the right introduces dynamic rendering of data

15 minutes00 seconds

Product parameter layout construction for the lower half of the product on the right

10 minutes12 seconds

Dynamic rendering of product parameter data in the lower half of the product on the right

17 minutes04 seconds
Chapter4Product parameters

Click on the text color of the first row of product parameters for exclusive effects

16 minutes22 seconds

Use closure functions to solve variable problems in events in loops

18 minutes28 seconds

Implement layout construction of selection results

04 minutes25 seconds

Click on the product parameters to dynamically add corresponding results.

18 minutes38 seconds

Click the delete button to delete the corresponding parameter data

19 minutes36 seconds

Package price change function

17 minutes32 seconds
Chapter5center left tab

Shopping cart and purchase price layout construction

08 minutes57 seconds

The overall structural layout of the middle left tab

13 minutes12 seconds

Construction of the specific content layout of the middle left tab

10 minutes05 seconds
Chapter6center right tab

Choose the overall structural layout to match on the right side of the middle

16 minutes54 seconds

Select the package price linkage effect when the check box is selected in the collocation

15 minutes57 seconds

Building the middle right tab layout

13 minutes27 seconds
Chapter7Right navigation bar

Encapsulate a public tab function and call

18 minutes38 seconds

Construction of the work part of the right navigation bar

09 minutes56 seconds

Construction of the middle layout of the right navigation bar

15 minutes39 seconds

Implementation of switching status by clicking on the right navigation bar

11 minutes15 seconds
  • CancelreplySending
  • Cancelpost a noteSending