一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

前言

书接上次，Flex和Grid布局在实际中应用的还是相当广泛，但是如果要是考虑兼容IE的话还是需要使用其他的替代方案。今天就简单的来使用一下这两种布局，实现一个简单的页面。

Flex

我们要用Flex实现的静态页面是这样的，如下：

线包图分析

目测这个布局分为标题和列表部分，而且标题和列表都在一个容器中；每个列表项目分为上部分图片和下部分的文字描述。所以，我们写的结构可以是这样。

<div class="container">
    <div class="hot-goods">
      <div class="title">Onion13</div>
      <div class="goods-list">
        <div class="img">
          <a href="#"></a><img width="473" height="306" src="./2.jpg" alt="">
        </div>
        <div class="goods-item">
          <div class="item-img">
            <img width="143" src="./1.jpg" alt="">
          </div>
          <div class="goods-desc">
            <h3 class="name">Onion13 Pro</h3>
            <p class="pre-p">永久免息</p>
            <p class="prise">￥00000</p>
            <div class="space"></div>
          </div>
        </div>
        <div class="goods-item">
          <div class="item-img">
            <img width="143" src="./1.jpg" alt="">
          </div>
          <div class="goods-desc">
            <h3 class="name">Onion13 Pro</h3>
            <p class="pre-p">永久免息</p>
            <p class="prise">￥00000</p>
            <div class="space"></div>
          </div>
        </div>
        .................省略......................
        <div class="goods-item">
          <div class="item-img">
            <img width="143" src="./1.jpg" alt="">
          </div>
          <div class="goods-desc">
            <h3 class="name">Onion13 Pro</h3>
            <p class="pre-p">永久免息</p>
            <p class="prise">￥00000</p>
            <div class="space"></div>
          </div>
        </div>
     .................省略......................
      </div>
    </div>
  </div>

样式

  body{
      background-color: rgb(88, 85, 85);
    }
    .goods-list .img {
      bottom: 0;
      margin-top: 12px;
    }
    .hot-goods .title {
      display: flex;
      justify-content: left;
      font-size: 24px;
      line-height: 32px;
      font-weight: bold;
      margin: 24px 0 16px;
    }
    .goods-list .goods-item .item-img {
      display: flex;
      justify-content: center;
      margin: 29px 0;
    }
    .goods-list .goods-item .goods-desc {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .goods-item .goods-desc .name {
      font-size: 14px;
      font-weight: bolder;
      line-height: 19px;
    }
    .goods-item .goods-desc .pre-p {
      font-size: 13px;
      opacity: 0.5;
      margin: 4px 0 0;
      line-height: 18px;
    }
    .goods-item .goods-desc .prise {
      font-size: 16px;
      color: #cf0a2c;
      line-height: 19px;
    }
    .goods-list {
      display: flex;
      flex-wrap: wrap;
    }
    .hot-goods .goods-list .goods-item {
      display: flex;
      flex-direction: column;
      width: 230px;
      height: 306px;
      margin: 12px 0 0 12px;
      background-color: #fff;
      transition: all 0.5s;
      bottom: 0;
    }
    .hot-goods .goods-list .goods-item:nth-child(5) {
      margin-left: 0;
    }
    .hot-goods .goods-list .goods-item:hover,
    .hot-goods .goods-list .img:hover {
      box-shadow: 0 15px 30px rgb(0 0 0 / 30%);
      transform: translateY(-2px);
    }

Grid

我们要实现的效果是这样的，如下：

结构

 <div class="container">
    <!-- 商品列表 -->
    <div class="list">
      <!-- 左侧广告 -->
      <div class="item1">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90"
          alt="">
      </div>
      <!-- 商品项 -->
      <div class="item item2">
        <img width="160px"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90">
        <h3 class="title">黑鲨4S</h3>
        <p class="desc">磁动力升降肩键</p>
        <p class="price"><span>2699元起</span>
          <del></del>
        </p>
      </div>
      <div class="item item3">
       3
      </div>
      <div class="item item4">
       4
      </div>
      <div class="item item5">
       5
      </div>
      <div class="item item6">
        6
      </div>
      <div class="item item7">
       7
      </div>
      <div class="item item8">
        8
      </div>
      <div class="item item9">
        9
      </div>
    </div>
  </div>

样式

    body{
      background-color: #333;
    }
    .list {
      height: 614px;
      margin: 100px 0;
      display: grid;
      grid-template-columns: 234px 234px 234px 234px 234px;
      grid-template-rows: 300px 300px;
      align-content: space-between;
    }
    .item1 {
      grid-row: 1/3;
      grid-column: 1;
    }
    .item {
      height: 300px;
      background: #fff;
      padding: 20px 0;
      text-align: center;
      margin: 0 0 14px 14px;
      bottom: 0px;
      transition: all 0.5s;
    }
    .item img {
      margin: 0 auto 17px;
    }
    .item .title {
      color: #333;
      margin: 0 10px 2px;
      font-size: 14px;
      font-weight: 400;
    }
    .item .desc {
      margin: 0 10px 10px;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
      display: block;
    }
    .item .price {
      margin: 0 10px 14px;
      font-size: 14px;
      display: block;
      color: #b0b0b0;
    }
    .item .price span {
      color: #ff6700;
    }
   .item:hover {
      bottom: 2px;
      box-shadow: 0 15px 30px rgb(0 0 0 / 30%)
    }

总结

• 我们这里写的样式都清除了标签原有的样式，引入了reset.css文件，大家可以百度搜索这个，自己按需求引入。

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, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol , ul  {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* 重置a标签的样式 */
a {
  text-decoration: none;
  color: #333;
}

• 基础样式base.css

/* Float布局清除浮动 */
.clearfix::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}
/* 版心 */
.container {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
*,
*:after,
*:before {
  box-sizing: inherit;
}
html{
  box-sizing: border-box;
}