一.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;
    }

效果图如下：

批改老师：

Guanhui

批改状态：合格

老师批语：写的很好！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2020-06-11 13:17:30