HTML CSS第十二次笔记（最后）

1.热门品牌

1.1热门品牌头部盒子

<div class="hd">
        <h2>
          热门品牌
          <span>国际经典 品质认证</span>
        </h2>
        <div class="btn">
          <a href="javascript:;" class="btnleft">
            <i class="iconfont icon-arrow-left-bold"></i>
          </a>
          <a href="javascript:;" class="btnright">
            <i class="iconfont icon-arrow-right-bold"></i>
          </a>
        </div>

.brand .btn {
  position: absolute;
  top: 85px;
  right: 0px;
  display: flex;

}

.brand .btn a {
  width: 20px;
  height: 20px;
  background-color: #e2e2e2;
  margin-left: 12px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  margin-left: 12px;
}

.brand .btn a.btnright {
  background-color: var(--lv);
}

结果：

1.2 热门品牌模块

 <div class="bd">
        <ul>
          <li>
            <a href="#">
              <img src="./uploads/hot1.png" alt=""></a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot2.png" alt=""></a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot3.png" alt=""></a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot4.png" alt=""></a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot5.png" alt=""></a>
          </li>

        </ul>
      </div>

.brand .bd li {
  width: 244p;
  height: 306px;
}

结果：

1.3 生鲜模块

1.3.1 鼠标经过生鲜模块，隐藏的小盒子显示并上升

<li>
            <a href="#">
              <!-- 图片 -->
              <div class="pic">
                <img src="./uploads/fresh1.png" alt="">
              </div>
              <!-- 信息 -->
              <div class="info">
                <h5>双味千层，手抓饼烤肉组合</h5>
                <p>240g/袋 4片装</p>
                <p>加热即食</p>
              </div>
              <!-- 价格 -->
              <div class="price">
                ￥<span>99.99</span>
              </div>
            </a>
            <!-- 发现更多宝贝 -->
            <div class="find">
              <h4>找相似</h4>
              <a href="#">
                发现更多宝贝
                <i class="iconfont icon-arrow-right-bold"></i>
              </a>
            </div>
          </li>

实现的css核心代码

.fresh .content .right ul li .find {
  position: absolute;
  left: 0;
  bottom: -85px;
  width: 242px;
  height: 84px;
  background-color: var(--lv);
  padding: 15px 55px 0;
  text-align: center;
  /* 过渡加在find上 */
  transition: all 0.3s;
}

/* 鼠标经过li，但改变的是find */
.fresh .content .right ul li:hover .find {
  bottom: 0;
}

结果：

2.最新专题