利用弹性盒实现移动端商品列表

 

 

HTML部分：

  <div class="wrap">
        <ul class="cosmeticnav">
            <li><a href="#cosmeticlist">热门推荐</a></li>
            <li><a href="#cosmeticlist">发现好货</a></li>
            <li><a href="#cosmeticlist">只看专场</a></li>
            <li><a href="#cosmeticlist">只看商品</a></li>
        </ul>

        <div class="cosmeticlist" id = "cosmeticlist">
            <a class="cosmetic" href="./html/detail.html">
                <!-- left -->
                <div class="cosmeticimg">
                    <img src="./images/index/shop_4.jpg" alt="cosmetic" class = "first">
                </div>
                <!-- right -->
                <div class="cosmeticdesc">
                    <h3>雅诗兰黛胶原霜 修护抗皱</h3>
                    <p class="price"><b>￥</b>123.00</p>
                    <p class="sell">已售800件</p>
                    <button>立即抢购</button>
                </div>
            </a>
            <a class="cosmetic" href="./html/detail.html">
                <!-- left -->
                <div class="cosmeticimg">
                    <img src="./images/index/shop_6.jpg" alt="cosmetic" class = "second">
                </div>
                <!-- right -->
                <div class="cosmeticdesc">
                    <h3>雅丽 滋润面膜乳霜 护肤</h3>
                    <p class="price"><b>￥</b>332.00</p>
                    <p class="sell">已售900件</p>
                    <button>立即抢购</button>
                </div>
            </a>
            <a class="cosmetic" href="./html/detail.html">
                <!-- left -->
                <div class="cosmeticimg">
                    <img src="./images/index/shopCart.jpg" alt="cosmetic" class="first">
                </div>
                <!-- right -->
                <div class="cosmeticdesc">
                    <h3>透蜜水漾 美肤素颜霜</h3>
                    <p class="price"><b>￥</b>88.90</p>
                    <p class="sell">已售1000件</p>
                    <button>立即抢购</button>
                </div>
            </a>
        </div>
    </div>

CSS部分

.wrap .cosmeticnav {
  margin: 0.2rem 0;
  width: 100%;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.wrap .cosmeticnav li {
  width: 25%;
  height: 100%;
  line-height: 0.8rem;
  border: 1px solid #ebebeb;
  text-align: center;
}
.wrap .cosmeticnav li:hover {
  background-color: #f26b11;
}
.wrap .cosmeticnav li:hover a {
  color: #ffffff;
}
.wrap .cosmeticnav li a {
  color: #3c3c3c;
  font: 0.3rem/1 "微软雅黑";
}
.wrap .cosmeticnav li:nth-last-of-type(-n+3) {
  border-left-style: none;
}
.wrap .cosmeticlist .cosmetic {
  width: 100%;
  height: 3rem;
  box-shadow: 0 0 0.2rem #eeeeee;
  border: 1px solid #ebebeb;
  display: flex;
  margin-bottom: 0.34rem;
}
.wrap .cosmeticlist .cosmetic:hover .cosmeticdesc h3 {
  color: #ef6b16;
  text-decoration: underline;
}
.wrap .cosmeticlist .cosmetic .cosmeticimg {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.wrap .cosmeticlist .cosmetic .cosmeticimg .first {
  width: 2.16rem;
  height: 2.2rem;
}
.wrap .cosmeticlist .cosmetic .cosmeticimg .second {
  width: 2.18rem;
  height: 2.98rem;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc h3 {
  font: 0.3rem/1 "微软雅黑";
  color: #2e2e2e;
  margin-top: 0.42rem;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc .price {
  font-size: 0.28rem;
  color: #db3c39;
  margin-top: 0.2rem;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc .price b {
  font-size: 0.21rem;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc .sell {
  margin-top: 0.3rem;
  font-size: 0.2rem;
  color: #bebebe;
}
.wrap .cosmeticlist .cosmetic .cosmeticdesc button {
  margin-top: 0.32rem;
  width: 1.64rem;
  height: 0.52rem;
  border-radius: 0.05rem;
  background-color: #f26b11;
  color: #f1f1f1;
  font-size: 0.23rem;
  cursor: pointer;
}