教程目录

项目实战

2022年07月27日更新

完成商城前台首页

这里以商城前台首页为例，用前面所学的内容还原设计图样式

创建项目

电脑桌面创建文件夹 mi，里面依次创建 assets/css/common.scss 、 assets/css/index.scss、assets/iconfont、assets/images、mi/index.html

首页 html 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mi-首页</title>
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="assets/iconfont/iconfont.css">
</head>
<body>
<div id="wrapper">
    <div class="page-index">
        <!--搜索区域-->
        <div class="search-box">
            <a href="#">
                <span class="iconfont icon-search"></span>
                <span class="text">搜索商品名称</span>
            </a>
        </div>
        <div class="search-bottom"></div>

        <!--轮播图区域-->
        <div class="banner-box">
            <ul>
                <li>
                    <a href=""><img src="http://i8.mifile.cn/v1/a1/T1_1W_BgVv1RXrhCrK!720x360.jpg"/></a>
                </li>
            </ul>
        </div>

        <!--焦点图区域-->
        <div class="slider-box">
            <div class="slider-item">
                <a href=""><img src="http://i8.mifile.cn/v1/a1/T1lJdgB7hv1RXrhCrK.jpg"/></a>
            </div>
            <div class="slider-item">
                <a href=""><img src="http://i8.mifile.cn/v1/a1/T1a9hgB7_v1RXrhCrK.jpg"/></a>
            </div>
            <div class="slider-item">
                <a href=""><img src="http://i8.mifile.cn/v1/a1/T1F6WgBQYv1RXrhCrK.jpg"/></a>
            </div>
        </div>

        <!--商品列表区域-->
        <div class="product-list">
            <div class="product-item">
                <div class="product-left">
                    <img class="tag" src="http://c1.mifile.cn/f/i/f/mishop/iic/xp.png">
                    <img class="ico" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
                </div>
                <div class="product-right">
                    <div class="product-title">
                        长乐未央手机5
                    </div>
                    <div class="product-desc">
                        骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身
                    </div>
                    <div class="product-price">
                        1999元起
                    </div>
                </div>
            </div>
            <div class="product-item">
                <div class="product-left">
                    <img class="tag" src="http://c1.mifile.cn/f/i/f/mishop/iic/xp.png">
                    <img class="ico" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
                </div>
                <div class="product-right">
                    <div class="product-title">
                        长乐未央手机5
                    </div>
                    <div class="product-desc">
                        骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身
                    </div>
                    <div class="product-price">
                        1999元起
                    </div>
                </div>
            </div>
            <div class="product-item">
                <div class="product-left">
                    <img class="tag" src="http://c1.mifile.cn/f/i/f/mishop/iic/xp.png">
                    <img class="ico" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
                </div>
                <div class="product-right">
                    <div class="product-title">
                        长乐未央手机5
                    </div>
                    <div class="product-desc">
                        骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身
                    </div>
                    <div class="product-price">
                        1999元起
                    </div>
                </div>
            </div>
        </div>

        <!--底部菜单区域-->
        <div class="footer">
            <div class="footer-item">
                <span class="iconfont icon-home"></span>
                <span><a href="">首页</a></span>
            </div>
            <div class="footer-item">
                <span class="iconfont icon-fenlei"></span>
                <span><a href="">分类</a></span>
            </div>
            <div class="footer-item">
                <span class="iconfont icon-cart"></span>
                <span><a href="">购物车</a></span>
            </div>
            <div class="footer-item">
                <span class="iconfont icon-my"></span>
                <span><a href="">服务</a></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在 common.scss 中，准备静态页面所需的公共 css

body {
  margin: 0;
  overflow-x: auto;
  color: #323233;
  font-size: 16px;
  font-family: Arial, Verdana, Sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: #646464;
  outline: 0;
}

ul, p {
  margin: 0;
  padding: 0
}

li {
  list-style-type: none;
}

/*去掉横向滚动条*/
ul::-webkit-scrollbar {
  display: none
}

img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

在 index.scss 中，添加首页所需的 css 

/*首页 css*/
#wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/*搜索区域*/
.search-box > a {
  display: flex;
  padding: 10px 10px 0 10px;
  span {
    align-content: center;
    margin-left: 5px;
  }
  .icon-search {
    color: #CACACA;
    font-size: 22px;
  }
  .text {
    font-size: 15px;
    font-weight: bold;
    color: #9C9C9C;
  }
}

.search-bottom {
  border: 1px solid #E3E3E3;
  margin: 0 10px;
  height: 5px;
  border-top: 0;
}

/*轮播图区域*/
.banner-box ul > li {
  display: flex;
  margin: 5px 0;
}

/*焦点图区域*/
.slider-box {
  display: flex;
  justify-content: space-between;
  background: #F5F5F5;
  height:165px;
  :nth-child(1) {
    margin-right: 6px;
  }
  :nth-child(2) {
    margin-right: 6px;
  }
}

/*商品列表区域*/
.product-list {
  margin-bottom: 40px;
  .product-item {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    border-bottom: 1px solid #F2F2F2;
    .product-left {
      width: 132px;
      height: 75px;
      position: relative;
      .ico {
        max-height: 83px;
      }
      .tag {
        position: absolute;
        width: 62px;
        height: 62px;
        bottom: 0;
        left: 10px;
        opacity: .9 !important;
        z-index: 2;
      }
    }
    .product-right {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-bottom: 10px;
      .product-title {
        font-size: 16px;
        color: #323233;
        align-self: center;
        margin-bottom: 5px;
      }
      .product-desc {
        font-size: 14px;
        color: #969696;
        margin-bottom: 5px;
      }
      .product-price {
        font-size: 16px;
        color: #FE4900;
        align-self: center;
      }
    }
  }
}

/*底部菜单区域*/
.footer {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  z-index: 99;
  border-top: 1px solid #e0e0e0;
  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 3px 0;
    .iconfont {
      font-size: 22px;
      font-weight: bold;
      color: #8f8f8f;
    }
    span > a {
      font-size: 13px;
      color: #8f8f8f;
    }
  }
}

最终效果图如下：

QQ20220615-150357.png

已添加到喜欢了