跳至主要內容
CSS

CSS介绍

  • cascacing style sheet层叠样式表
  • 用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
  • 样式：给HTML标签添加需要显示的效果，通常存储在样式表中
  • 层叠：使用不同的添加方式給同一个HTML标签添加样式，最后所有的样式叠在一起共同作用于该标签

CSS使用

3.png
3.png
HeChuangJun大约 26 分钟前端CSS
立体呈现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立体呈现</title>
    <style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        transform-style: preserve-3d;
        /* 旋转与案例效果无关，用来看前后移动的效果 */
        /* transform: rotateY(89deg); */
      }
      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }
      .front {
        background-color: orange;
        transform: translateZ(100px);
      }
      .back {
        background-color: green;
        transform: translateZ(-100px);
      }
      .cube:hover {
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>
  </body>
</html>
HeChuangJun小于 1 分钟前端CSS
3D导航
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D导航</title>
    <style>
      ul { margin: 0; padding: 0; list-style: none; }
      .nav { width: 300px;height: 40px;margin: 50px auto;}
      .nav ul { display: flex;}
      .nav li {
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;
        transform-style: preserve-3d;
        /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
        /* transform: rotateX(-20deg) rotateY(30deg); */
      }
      .nav li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }
      /* 立方体每个面都有独立的坐标轴，互不影响 */
      .nav li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }
      .nav li a:last-child {
        background-color: orange;
        transform: rotateX(90deg) translateZ(20px);
      }
      .nav li:hover { transform: rotateX(-90deg); }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登录</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注册</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </body>
</html>
HeChuangJun小于 1 分钟前端CSS
按钮缩放

按钮缩放

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮缩放</title>
    <style>
      * { margin: 0; padding: 0; }
      li { list-style: none; }
      img { width: 100%; }
      .box { width: 249px; height: 210px; margin: 50px auto; }
      .box p { color: #3b3b3b;padding: 10px 10px 0 10px;}
      /* 1. 摆放播放按钮：图片区域的中间 */
      .box li { overflow: hidden; }
      .pic { position: relative; }
      .pic::after {
        position: absolute;
        left: 50%;
        top: 50%;

        content: '';
        width: 58px;
        height: 58px;
        background-image: url(./images/play.png);
        /* margin-left: -29px; margin-top: -29px; */
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
        transition: all .5s;
      }
      /* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */
      .box li:hover .pic::after {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <div class="pic">
            <img src="./images/party.jpeg" alt="" />
          </div>
          <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
        </li>
      </ul>
    </div>
  </body>
</html>
HeChuangJun小于 1 分钟前端CSS
轮播图

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }
    /* 定位轮播图位置 */
    .banner {
      position: relative;/*子绝父相 */
      margin: 100px auto;
      width: 564px;
      height: 315px;
      /* background-color: pink; */
      overflow: hidden;/* 本来是横着3个图变为1个 */
    }

    /* 图片:去掉基线对齐使之居中 */
    .banner img {
      width: 564px;
      border-radius: 12px;
      vertical-align: middle;
    }

    .banner ul {
      display: flex;/* 3个图3行变一行 */
    }

    /* 箭头 */
    .banner .prev,
    .banner .next {
      /* 隐藏 */
      display: none;
      position: absolute;/*子绝父相 */
      top: 50%;/* 内容距离顶部50% */
      transform: translateY(-50%);/* 内容上移动50%，不影响布局 */

      width: 20px;
      height: 30px;
      background-color: rgba(0,0,0, 0.3);

      text-decoration: none;
      color: #fff;
      line-height: 30px;
    }

    /* 鼠标滑到banner区域，箭头要显示 display:block */
    .banner:hover .prev,
    .banner:hover .next {
      display: block;
    }
    /* 左右>< 分别设置 */
    .banner .prev {
      left: 0;
      border-radius: 0 15px 15px 0;
    }

    .banner .next {
      right: 0;
      border-radius: 15px 0 0 15px;
      text-align: center;
    }

    /* 圆点 */
    .banner ol {
      position: absolute;/*子绝父相 */
      bottom: 20px;
      left: 50%;/* 底部居中 */
      transform: translateX(-50%);
      height: 13px;
      background-color: rgba(255,255,255,0.3);

      display: flex;/* 一行多个点 */

      border-radius: 10px;
    }

    .banner ol li {
      margin: 3px;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    /* 橙色的li */
    .banner ol .active {
      background-color: #ff5000;
    }
  </style>
</head>
<body>
  <div class="banner">
    <!-- 图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>
    <!-- 箭头 -->
    <!-- 上一张 prev -->
    <a href="#" class="prev">
      <i class="iconfont icon-zuoce"></i>
    </a>
    <!-- 下一张 next -->
    <a href="#" class="next">
      <i class="iconfont icon-youce"></i>
    </a>
    <!-- 圆点 -->
    <ol>
      <li></li>
      <li class="active"></li>
      <li></li>
    </ol>
  </div>
</body>
</html>
HeChuangJun大约 1 分钟前端CSS
时钟

时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 原理：将圆分成6分，6条“直径”分别转不同角度，中间用白色遮罩盖住 */
      .clock {
        width: 250px;
        height: 250px;
        border: 8px solid #000;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
      }
      
      .line {
        /* 1.定位 */
        position: absolute;
        width: 4px;
        height: 250px;
        background-color: #999;
        left: 50%;
        transform: translate(-50%);
      }

      /* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 */
      /* 一圈是360度, 等分成  xx 份 */
      .line:nth-child(2) { transform: translate(-50%) rotate(30deg); }
      .line:nth-child(3) { transform: translate(-50%) rotate(60deg); }
      .line:nth-child(4) { transform: translate(-50%) rotate(90deg); }
      .line:nth-child(5) { transform: translate(-50%) rotate(120deg); }
      .line:nth-child(6) { transform: translate(-50%) rotate(150deg); }

      /* 第一根和第四跟宽度大一些 */
      .line:nth-child(1),
      .line:nth-child(4) {
        width: 5px;
      }

      /* 遮罩圆形 参考定位居中*/
      .cover {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #fff;
        border-radius: 50%;
      }

      /* 表针 */
      /* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */
      .hour,
      .minute,
      .second {
        position: absolute;
        left: 50%;
        /* 盒子底部在盒子中间 */
        bottom: 50%;
      }

      .hour {
        width: 6px;
        height: 50px;
        background-color: #333;
        margin-left: -3px;
        transform: rotate(15deg);
        transform-origin: center bottom;
      }

      .minute {
        width: 5px;
        height: 65px;
        background-color: #333;
        margin-left: -3px;
        transform: rotate(90deg);
        transform-origin: center bottom;
      }

      .second {
        width: 4px;
        height: 80px;
        background-color: red;
        margin-left: -2px;
        transform: rotate(240deg);
        transform-origin: center bottom;
      }

      /* 螺丝 */
      .dotted {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <!-- 刻度线 -->
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>

      <!-- 遮罩圆形 -->
      <div class="cover"></div>
      <!-- 表针 -->
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>

      <!-- 螺丝 -->
      <div class="dotted"></div>
    </div>
  </body>
</html>
HeChuangJun大约 1 分钟前端CSS
双开门

双开门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门</title>
    <style>
        * { margin: 0; padding: 0;}
        /* 1. 布局：父子结构，父级是大图，子级是左右小图 */
        .father {
            display: flex;
            margin: 0 auto;
            width: 1366px; height: 600px;
            background-image: url(./images/bg.jpg);

            overflow: hidden;
        }
        .father .left,
        .father .right {
            width: 50%; height: 600px;
            background-image: url(./images/fm.jpg);

            transition: all .5s;
        }
        .father .right {
            /* right 表示的取到精灵图右面的图片 */
            background-position: right 0;
        }
        /* 2. 鼠标悬停的效果：左右移动 */
        .father:hover .left { transform: translate(-100%); }
        .father:hover .right { transform: translateX(100%); }
    </style>
</head>
<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
HeChuangJun小于 1 分钟前端CSS
兔儿鲜

兔儿鲜

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta:desc -->
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <!-- meta:kw -->
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <!-- link:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 购物车 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>

  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 -->
      <ul class="pic">
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
      </ul>
      <!-- 侧导航 ul -->
      <div class="subnav">
        <ul>
          <li>
            <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          
        </ul>
      </div>
      <!-- 圆点指示器 -->
      <ol>
        <li class="current"><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ol>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>新鲜好物</h3>
        <p>新鲜出炉 品质靠谱</p>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h4>KN95级莫兰迪色防护口罩</h4>
              <p>¥<span>79</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods2.png" alt=""></div>
            <div class="txt">
              <h4>紫檀外独板三层普洱茶盒</h4>
              <p>¥<span>566</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods3.png" alt=""></div>
            <div class="txt">
              <h4>法拉蒙高颜值记事本可定制</h4>
              <p>¥<span>58</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods4.png" alt=""></div>
            <div class="txt">
              <h4>科技布布艺沙发</h4>
              <p>¥<span>3579</span></p>
            </div>
          </a>
        </li>
        
      </ul>
    </div>
  </div>

  <!-- 人气推荐 -->
  <div class="recommend wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>人气推荐</h3>
        <p>人气爆款 不容错过</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend1.png" alt=""></div>
            <div class="txt">
              <h4>特惠推荐</h4>
              <p>我猜得到 你的需要</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend2.png" alt=""></div>
            <div class="txt">
              <h4>爆款推荐</h4>
              <p>人气好物推荐</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend3.png" alt=""></div>
            <div class="txt">
              <h4>节日礼品一站买全</h4>
              <p>编辑尽心整理推荐</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend4.png" alt=""></div>
            <div class="txt">
              <h4>鲜花园艺</h4>
              <p>给生活增加仪式感</p>
            </div>
          </a>
        </li>
        
      </ul>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="brand">
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">
        <div class="left">
          <h3>热门品牌</h3>
          <p>国际经典 品质认证</p>
        </div>

        <div class="button">
          <a href="#" class="prev">
            <i class="iconfont icon-arrow-left-bold"></i>
          </a>
          <a href="#" class="next">
            <i class="iconfont icon-arrow-right-bold"></i>
          </a>
        </div>
      </div>
      <!-- 内容 -->
      <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>
    </div>
  </div>

  <!-- 生鲜 -->
  <div class="fresh wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>生鲜</h3>
      </div>
      <div class="right">
        <ul>
          <li><a href="#" class="active">热门</a></li>
          <li><a href="#">蔬菜</a></li>
          <li><a href="#">肉禽蛋</a></li>
          <li><a href="#">水果</a></li>
          <li><a href="#">海鲜</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">饮料</a></li>
        </ul>
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="left">
        <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>双味千层，手抓饼烤肉组合</h4>
                  <p>240g/袋 4片装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">¥<span>89.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>云南甘蔗慢熬红糖馒头</h4>
                  <p>220g/袋 5个装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">¥<span>9.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>日式风味小圆饼</h4>
                  <p>圆形【海盐味】</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">¥<span>588.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>全麦奶油浓香小面包</h4>
                  <p>50g*12袋</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>69.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>秘制外皮五福摩提大福点心</h4>
                  <p>150g/盒</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>39.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>水果面膜韩国蜂蜜柚子茶</h4>
                  <p>560g/瓶</p>
                  <p>冲调饮品</p>
                </div>
                <p class="price">¥<span>39.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>浓情比利时巧克力礼盒装</h4>
                  <p>205克/盒</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">¥<span>120.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>抹茶奶油小蛋糕礼盒装</h4>
                  <p>220克/盒</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>60.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 最新专题 -->
  <div class="topic wrapper">
    <div class="title">
      <div class="left">
        <h3>最新专题</h3>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <div class="topic-bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic1.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic2.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic3.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <div class="wrapper">
      <!-- 服务 -->
      <div class="service">
        <ul>
          <li>
            <h5></h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5></h5>
            <p>物流快捷</p>
          </li>
          <li>
            <h5></h5>
            <p>品质新鲜</p>
          </li>
          <li>
            <h5></h5>
            <p>售后无忧</p>
          </li>
          
        </ul>
      </div>
      <!-- 帮助中心 -->
      <div class="help">
        <div class="left">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>配送方式</dt>
            <dd><a href="#">配送运费</a></dd>
            <dd><a href="#">配送范围</a></dd>
            <dd><a href="#">配送时间</a></dd>
          </dl>
          <dl>
            <dt>关于我们</dt>
            <dd><a href="#">平台规则</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">问题反馈</a></dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd><a href="#">售后政策</a></dd>
            <dd><a href="#">退款说明</a></dd>
            <dd><a href="#">取消订单</a></dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
            <dd><a href="#">客服电话 400-0000-000</a></dd>
            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
          </dl>
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="pic"><img src="./images/wechat.png" alt=""></div>
              <p>微信公众号</p>
            </li>
            <li>
              <div class="pic"><img src="./images/app.png" alt=""></div>
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 版权 -->
      <div class="copyright">
        <p>
          <a href="#">关于我们</a>|
          <a href="#">帮助中心</a>|
          <a href="#">售后服务</a>|
          <a href="#">配送与验收</a>|
          <a href="#">商务合作</a>|
          <a href="#">搜索推荐</a>|
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜</p>
      </div>
    </div>
  </div>
</body>
</html>
HeChuangJun大约 15 分钟前端CSS
走马灯
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走马灯</title>
    <style>
      * { padding: 0; margin: 0; }
      li { list-style: none;}
      img { display: block; width: 200px;}
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }
      .box ul {
        display: flex;
        animation: move 6s infinite linear;
      }
      /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
      @keyframes move {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-1400px);
        }
      }
      .box:hover ul { animation-play-state: paused; }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 替身：填补显示区域的露白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>
HeChuangJun小于 1 分钟前端CSS