Click here for the first article

preface

Most of them are HTML + CSS, and a few use element-UI widgets

As checkboxes check boxes, the carousel graph is done with VUE

2.4 Nav navigation

  • The nav box bar has height and a bottom border
  • Box 1 floats to the left, dropdown
  • Box 2 floats to the right, navItems navigation bar group
  • Box 1 has two parts, including dt and DD boxes

Ul put Li, li put A, A converted to block level element, using pandding to squeeze

2.5 Bottom Module

Start by building an oversized box and giving it a height and a background color

Inside with a type box, prepare three small modules up, middle and down

Give a pandding-top to squeeze the content down

  • The box bar at the bottom of the footer page gives a height and grey background
  • The footer has a big type inside
  • Inside the template is box number 1, mod_service for service module, mod for module
  • The center contains box number 2, mod_help is the help module
  • The template contains box 3, mod_copyright is the copyright module

As shown in the figure:

2.6 Main Module (Main)

What was written before was the common part of modularity.

The main body module is exclusive to index. Note that the new style file index.css is required.

  • The main box is 980 pixels wide and positioned 220px to the left (margin-left)
  • Main contains left box, left float, focus map module
  • Main contains the right box, right float, newsFlash module

I used vUE’s to do the rotation chart

As shown in figure:

// elder-ui 0 <div class="block"> <el-carousel height="455px"> <el-carousel v-for="(img,index) in mainImage" :key="index"> <h3 class="small"><img :src="mainImage[index]" alt=""></h3> </el-carousel-item> </el-carousel> </div> // The images to the vue management mainImage: ['.. / xhshopping/upload / 01. JPG ', '.. / xhshopping/upload / 02. JPG ', '.. / xhshopping/upload / 03. JPG ', '../xhshopping/upload/04.png' ]Copy the code

Newsflash module

  • Box 1 is the news module with a height of 165px
  • Box 2 is the lifeservice lifeservice module with a height of 209px
  • Box 3 is a bargain

New news module

Note: here we have two upper and lower modules, but both modules use div 1 box news-HD news header module, and give a height and lower border box 2 news-BD news topic section, which contains UL and LI and links

Beyond partial hiding techniques:

Separated into three steps

  1. Add out-of-part hidden Overflow: Hidden
  2. White-spce: nowrap; white-spce: nowrap;
  3. Use ellipses instead of text-overflow: ellipsis

2.7 Recommended Modules

  • Large box Recom Recommendation module Recommend contains 2 boxes, can float
  • Box no. 1 RecoM-HD
  • Box no. 2 recom- BD, note the little vertical line inside

2.8 Floor urban production:

Notice the floor, don’t give the height, count as many things as you can

The first floor is home appliance module: it contains two boxes

  • Box NO. 1 box BOX HD, give a height, have a bottom frame, inside divided into two boxes left and right

2.81 box_hd module

  • There are heights that can be floated without clearing
  • Left h3, box floating left
  • Tab-list on the right, float on the right, because TAB toggle effect is used, so inside use UL and LI to do

2.82 box_bd module

Tab bar principle layout requirements

  1. TAB (tab_list)
  2. Content (tab_content2)

2.9 List page making

  1. The list page is a new page and we need to create a new page file, list.html.
  2. Since the top and bottom of the list page are basically the same, we need to copy the top and bottom structure from the home page.
  3. Header and bottom styles are also needed, so common.css is also needed in list.html.
  4. You need a new list.css style file, which is a special style file for the list page.

2.91 Modifying header and NAV

Add new content with location

Because itself is relative positioning, so directly use absolute positioning plus

Nav let me rewrite the row as a float

2.92 List page body SK_container

  • Please give 1200 width, not 1200 height for no.1 sk container
  • Box no. 2, SK_HD, insert the picture
  • Box no.3, SK_BD, contains a lot of UL and LI

I mainly used Flex to complete the layout

Use a traditional layout in the box

3.0 registration page

Add a parent box to the registration form

Then in the middle

All the code

XHshopping: Shopping mall with traditional layout (gitee.com)