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

• Chapter1 Page Layout
• 1-1 Project Description
• 1-2 Login registration layout construction
• 1-3 List layout construction
• 1-4 logo and search box
• 1-5 Product category navigation layout
• 1-6 Path navigation layout
• 1-7 Dynamic rendering of path navigation data
• Chapter2 magnifying glass effect
• 2-1 Magnifying glass layout construction on the left
• 2-2 Magnifying glass mouse move in and out effect
• 2-3 Move the magnifying glass mouse to realize the dragging effect of mask elements
• 2-4 Boundary control for mask element movement
• 2-5 Moving the magnifying glass achieves the effect of moving large picture elements in equal proportions
• 2-6 Magnifying glass thumbnail layout construction effect
• 2-7 Dynamic rendering of magnifying glass thumbnail data
• 2-8 Click on the thumbnail to change the image to a smaller or larger image.
• 2-9 Analysis on the principle of image carousel effect by clicking the left and right arrows on thumbnails
• 2-10 Calculate the distance of each picture movement and the distance of ul movement
• Chapter3 Products on the right
• 3-1 The layout of the detailed introduction of the upper part of the product on the right
• 3-2 Detailed explanation of the upper part of the product on the right introduces dynamic rendering of data
• 3-3 Product parameter layout construction for the lower half of the product on the right
• 3-4 Dynamic rendering of product parameter data in the lower half of the product on the right
• Chapter4 Product parameters
• 4-1 Click on the text color of the first row of product parameters for exclusive effects
• 4-2 Use closure functions to solve variable problems in events in loops
• 4-3 Implement layout construction of selection results
• 4-4 Click on the product parameters to dynamically add corresponding results.
• 4-5 Click the delete button to delete the corresponding parameter data
• 4-6 Package price change function
• Chapter5 center left tab
• 5-1 Shopping cart and purchase price layout construction
• 5-2 The overall structural layout of the middle left tab
• 5-3 Construction of the specific content layout of the middle left tab
• Chapter6 center right tab
• 6-1 Choose the overall structural layout to match on the right side of the middle
• 6-2 Select the package price linkage effect when the check box is selected in the collocation
• 6-3 Building the middle right tab layout
• Chapter7 Right navigation bar
• 7-1 Encapsulate a public tab function and call
• 7-2 Construction of the work part of the right navigation bar
• 7-3 Construction of the middle layout of the right navigation bar
• 7-4 Implementation of switching status by clicking on the right navigation bar