一.PC端布局解决方案

头部，主体，脚部，按照垂直排列
主体三列布局，做水平居中
logo放左边，与其它栏目拉开距离，不给鼠标悬停效果
登录放右边
脚部居中
注意都要转为弹性盒子

如下图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>pc端布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a {
      color: #666;
      text-decoration: none;
    }
    body {
      min-width: 680;
      display: flex;
      /* 主轴垂直方向，不换行 */
      flex-flow: column nowrap;
    }
    header,
    footer {
      height: 50px;
      border: 1px solid#000;
    }
    /* 把页眉转为弹性盒子 */
    header {
      display: flex;
      /* 所有栏目在交叉轴上居中 */
      align-items: center;
    }
    header > a {
      flex: 0 1 100px;
      /* 文本在当前a标签的栏目上居中 */
      text-align: center;
    }
    /* logo是当前第一个，把它和栏目稍拉开些距离 */
    header > a:first-of-type {
      margin-right: 50px;
    }
    /* 登录要放最右边去，它是最后一个 */
    header > a:last-of-type {
      margin-left: auto;
    }
    /* 鼠标悬停效果,排除logo */
    header > a:hover:not(:first-of-type) {
      color: coral;
    }
    /* 把主体变成水平排列 */
    .container {
      min-height: 800px;
      /* 居中起来，给个边框 */
      margin: 10px auto;
      display: flex;
      justify-content: center;
    }
    .container > aside,
    .container > main {
      border: 1px solid #000;
      padding: 10px;
    }
    .container > aside {
      flex: 0 0 200px;
    }
    .container > main {
      flex: 0 0 600px;
      margin: 0 10px;
    }
    footer {
      display: flex;
      flex-flow: column nowrap;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 页眉 -->
  <header>
    <a href="">LOGO</a>
    <a href="">首页</a>
    <a href="">产品</a>
    <a href="">新闻</a>
    <a href="">我们</a>
    <a href="">登录</a>
  </header>
  <!-- 主体 -->
  <div class="container">
    <aside>左边栏</aside>
    <main>主体内容</main>
    <aside>右边栏</aside>
  </div>
  <!-- 页脚 -->
  <footer>
    <p>
      php中文网©版权所有 （2018-2020）| 备案号：
      <a href="">皖ICP123456**</a>
    </p>
    <p>
      合肥市政务新区999号 | 电话：0551-12345***
    </p>
  </footer>
</body>
</html>

二.移动端小商城

左上角一般放logo,右上角是下拉导航
轮播图
分类导航，小图片+文字，上下排列
热销商品推荐，图片+商品名称+价格+购物车，上下排列
商品列表，商品标题及相关描述，左右排列
脚部：首页，分类，购物车，登录，阿里图标+文字，上下排列

如下图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="static/css/font-icon.css" />
  <title>移动端小商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a {
      /* a链接下划线去掉 */
      text-decoration: none;
      color: #666;
    }
    html {
      /* vw当前可视区宽度 */
      /* vh当前可视区宽度 */
      width: 100vw;
      height: 100vh;
      font-size: 14px;
      color: #666;
    }
    body {
      min-width: 360px;
      background-color: #fff;
      display: flex;
      /* 主轴方向，列为主 */
      flex-flow: column nowrap;
    }
    /* 头部样式 */
    body > header {
      color: white;
      background-color: #333;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      width: 100vw;
      padding: 0 15px;
    }
    /* 轮播图 */
    body > .slider {
      height: 180px;
    }
    body > .slider > img {
      height: 100%;
    }
    /* 导航区 */
    nav {
      height: 200px;
      margin-bottom: 10px;
      display: flex;
      /* 水平排列要换行 */
      flex-flow: row wrap;
      align-content: space-around;
    }
    nav > div {
      width: 25vw;
      display: flex;
      /* 图片加文字垂直排 */
      flex-flow: column nowrap;
      align-items: center;
    }
    /* 导航区图片变小居中处理 */
    nav > div > a:first-of-type {
      text-align: center;
    }
    nav > div img {
      width: 50%;
    }
    /* 每个区域的标题样式 */
    .title {
      margin-top: 10px;
      font-size: 1.2rem;
      font-weight: normal;
      text-align: center;
    }
    /* 热销商品区 */
    .hot-goods {
      border-top: 1px solid #cdcdcd;
      margin-top: 10px;
      font-size: 0.8rem;
      display: flex;
      /* 水平多行容器 */
      flex-flow: row wrap;
    }
    .hot-goods img {
      width: 100%;
    }
    .hot-goods > .goods-img {
      /* 内边距并重置大小 */
      padding: 10px;
      box-sizing: border-box;
      /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
      flex: 1 0 30vw;
      /* 再将每个商品描述转为flex */
      display: flex;
      /* 主轴垂直且不允许换行 */
      flex-flow: column nowrap;
      justify-content: center;
    }
    /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
    .hot-goods > .goods-img > div {
      display: flex;
      /* 分散对齐 */
      justify-content: space-around;
    }
    /* 热销样式 */
    .hot {
      color: coral;
    }
    /* 商品列表区 */
    .list-goods {
      padding: 10px;
      border-top: 1px solid #cdcdcd;
      margin-top: 10px;
      font-size: 0.8rem;
      display: flex;
      /* 主轴必须是垂直 */
      flex-flow: column nowrap;
    }
    /* 每个项目也转为flex */
    .list-goods > .goods-desc {
      margin: 10px 0;
      display: flex;
    }
    /* 列表中每个项目的样式,加些间距 */
    .list-goods > .goods-desc > a {
      padding: 10px;
      box-sizing: border-box;
    }
    .list-goods > .goods-desc > a:last-of-type:hover {
      color: lightseagreen;
    }
    /* 图片全部适应项目空间 */
    .list-goods img {
      width: 100%;
    }
    body > footer {
      color: #666;
      background-color: #efefef;
      border-top: 1px solid #ccc;
      height: 55px;
      position: fixed;
      bottom: 0;
      width: 100vw;
      display: flex;
      justify-content: space-evenly;
    }
    body > footer a {
      margin-top: 10px;
      font-size: 0.8rem;
      display: flex;
      /* 垂直排列不换行 */
      flex-flow: column nowrap;
      /* 交叉轴项目居中显示 */
      align-items: center;
    }
    body > footer a > span:first-of-type {
      /* 图标字体应该大一些 */
      font-size: 1.6rem;
    }
    /* 使用九宫格来演示: grid布局实现 */
    .container {
      width: 100px;
      height: 100px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    .item {
      width: 118px;
      height: 118px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <!-- 页眉 -->
  <header>
    <a href="">LOGO</a>
    <span class="iconfont"></span>
  </header>
  <!-- 轮播图 -->
  <div class="slider">
    <img src="static/images/banner.jpg" alt="" />
  </div>
  <!-- 主导航 -->
  <nav>
    <div>
      <a herf=""><img src="static/images/link1.webp"</a>
      <a href="">京东超市</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link2.webp"</a>
      <a href="">服装百货</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link3.webp"</a>
      <a href="">数码精品</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link4.webp"</a>
      <a href="">优惠劵</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link1.webp"</a>
      <a href="">超市精选</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link2.webp"</a>
      <a href="">服装百货</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link3.webp"</a>
      <a href="">数码精品</a>
    </div>
    <div>
      <a herf=""><img src="static/images/link4.webp"</a>
      <a href="">优惠劵</a>
    </div>
  </nav>
  <!-- 热销商品 -->
  <h2>
      热销商品<span class="iconfont hot" style="color: coral;"
      ></span
    >
  </h2>
  <!-- 商品 -->
  <div class="hot-goods">
    <div class="goods-img">
      <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
      <p>Apple iPhone 11 128G</p>
      <div>
        <span>6299 元</span>
        <span class="iconfont hot"></span>
      </div>
    </div>
    <div class="goods-img">
      <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
      <p>Apple iPhone X 512G</p>
      <div>
        <span>8299 元</span>
        <span class="iconfont hot"></span>
      </div>
    </div>
    <div class="goods-img">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>华为笔记本电脑</p>
      <div>
        <span>5699 元</span>
        <span class="iconfont hot"></span>
      </div>
    </div>
    <div class="goods-img">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>小米笔记本电脑</p>
      <div>
        <span>3999 元</span>
        <span class="iconfont hot"></span>
      </div>
    </div>
    <div class="goods-img">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>联想笔记本电脑</p>
      <div>
        <span>4399 元</span>
        <span class="iconfont hot"></span>
      </div>
    </div>
  </div>
  <!-- 商品列表区 -->
  <h2 class="title">
    商品列表<span class="iconfont hot" style="color: coral;"></span>
  </h2>
  <div class="container">
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </div>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
    <span class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    </span>
  </div>
  <!-- 页脚 -->
  <footer>
    <a href="">
      <span class="iconfont hot"></span>
      <span>首页</span>
    </a>
    <a href="">
      <span class="iconfont hot"></span>
      <span>导航</span>
    </a>
    <a href="">
      <span class="iconfont hot"></span>
      <span>购物车</span>
    </a>
    <a href="">
      <span class="iconfont hot"></span>
      <span>登录</span>
    </a>
  </footer>
</body>
</html>

备注：九宫格插入商品的图片，标题，描述，价格等，还不会如何实现，继续学习中

2020.7.2 补上九宫格商品区，demo.html代码如下：

  <h2>
    商品列表
  </h2>
  <div class="container">
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
    <div class="item">
      <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
      <p>惠普笔记本电脑-256G-16寸</p>
      <span>价格：8000元</span>
    </div>
  </div>

九宫格demo.css代码如下：

    .container {
      width: 350px;
      height: 350px;
      margin: auto;
      background-color: rgb(241, 238, 238);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    .item {
      width: 100%;
      height: 100%;
      background-color: rgb(246, 252, 252);
      display: grid;
      justify-content: center;
      align-items: center;
    }
    .container > .item img {
      width: 100%;
      height: 100%;
    }
    .container > .item p {
      font-size: 10px;
      margin-left: 5px;
    }
    .container > .item span {
      font-size: 10px;
      margin-left: 5px;
      margin: auto;
    }

效果图如下：

Correcting teacher：

Guanhui

Correction status：qualified

Teacher's comments：写的很好！

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

vscode、phpstudy、浏览器、markdown、服务器、web开发术语-前端12期第一课6.10

2020-06-11 13:17:30