Less and RESET.CSS citation and homepage activity, product recommendation module establishment and Flex layout

Remember in the front?

The greatest hope in life is that you deserve to wait for yourself.

Open the Run project first:

I. Use of less and reset.css

References to 1.less:

Install less and Less-loader (previously added) delivery address: https://www.cnblogs.com/crystral/p/9117161.html

References to 2.reset.css

① go to this website (https://cssreset.com/) to download a reset.css file and copy it to the SRC directory:

(This I did not download down, click No response, so to the teacher there copy a copy, code I put down the face)

Reset.css

/**
* Eric Meyer ' s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
HTML, body, Div, span, applet, object, IFRAME,
H1, H2, H3, H4, H5, H6, p, blockquote, Pre,
A, ABBR, acronym, address, big, cite, code,
Del, DFN, EM, img, INS, KBD, Q, S, Samp,
Small, strike, strong, sub, SUP, TT, VAR,
b, u, I, center,
DL, DT, DD, OL, UL, Li,
FieldSet, form, label, legend,
Table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD,
Article, aside, canvas, details, embed,
Figure, Figcaption, footer, header,
menu, nav, output, ruby, section, summary,
Time, mark, audio, video, input {
margin:0;
padding:0;
border:0;
font-size:100%;
Font-weight:normal;
Vertical-align:baseline;
}

/* HTML5 Display-role reset for older browsers */
Article, aside, details, figcaption, figure,
Footer, header, menu, nav, section {
Display:block;
}

Body {
Line-height:1;
}

BLOCKQUOTE, Q {
Quotes:none;
}

Blockquote:before, Blockquote:after,
Q:before, Q:after {
Content:none;
}

Table {
Border-collapse:collapse;
border-spacing:0;
}

/* Custom */
A
Color: #7e8c8d;
Text-decoration:none;
-webkit-backface-visibility:hidden;
}

Li {
List-style:none;
}

::-webkit-scrollbar {
width:5px;
height:5px;
}

::-webkit-scrollbar-track-piece {
Background-color:rgba (0, 0, 0, 0.2);
-webkit-border-radius:6px;
}

::-webkit-scrollbar-thumb:vertical {
height:5px;
Background-color:rgba (125, 125, 125, 0.7);
-webkit-border-radius:6px;
}

::-webkit-scrollbar-thumb:horizontal {
width:5px;
Background-color:rgba (125, 125, 125, 0.7);
-webkit-border-radius:6px;
}

HTML, Body {
width:100%;
}

Body {
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba (0, 0, 0, 0);
}

② introduced in App.vue:

③ Finally, you can go to the browser to see if the reference is successful, such as H3 block-level elements of the margin value is 0.

Second, new activities, products recommended components

1. Enter the components of the new activity (active), product recommendation (recommend) under the component files

The construction of 2.activity.vue

①template

②style

<style lang= "Less" scoped>
  . activity {
    Background: #eee;
    . title {
      width:100%;
      height:50px;
      line-height:50px;
      Text-align:center;
      Color:gray;
      border-bottom:1px solid #000;
      Background: #fff;
    }
    . Content {
      . content_item {
        Background: #fff;
        margin-bottom:10px;
        IMG {
          width:100%;
          height:150px;
        }
      }
      . name {
        font-size:15px;
        Color: #000;
        margin-bottom:5px;
      }
      . desc {
        font-size:13px;
        Color: #000;
      }
    }
  }
</style>

The construction of 3.recommend.vue

Similar to the structure of Activity.vue, mainly using a flex layout

Here's a link to the flex layout of Ruan da God: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

①template

②style

. recommend {
Background: #eee;
. title {
width:100%;
height:50px;
line-height:50px;
Text-align:center;
Color:gray;
border-bottom:1px solid #000;
Background: #fff;
}
. Content {
Display:flex;
Flex-direction:row;
Flex-wrap:wrap;
Justify-content:space-between;
. content_item {
Background: #fff;
margin-bottom:5px;
width:200px;
IMG {
width:100%;
height:200px;
}
. name {
Padding:0 5px;
font-size:15px;
}
. desc {
Padding:0 5px;
Overflow:hidden;
font-size:13px;
. Price {
color:red;
}
. price_pre {
Color: #8e8e8e;
Text-decoration:line-through;
}
}
}
}
}

After the above, refresh the browser is unresponsive, so looked at, less the previous section of the introduction of the component

Third, look at the effect
This is our homepage of the activity recommendation and product recommendation module

Above, complete ~ ~ ~

Less and RESET.CSS citation and homepage activity, product recommendation module establishment and Flex layout