案例1
index.html
<!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>work02</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="wrap">
<nav>
<p>
<span>武汉市</span>
<img src="../img/assets/sanjiao@2x.png" alt="">
</p>
<span>|</span>
<p>登录</p>
<span>|</span>
<p>注册</p>
<p>
<img src="../img/assets/dingdan@2x.png" alt="">
<span>我的订单</span>
</p>
<span>|</span>
<p>
<img src="../img/assets/shouc@2x.png" alt="">
<span>我的收藏</span>
</p>
<p>
<img src="../img/assets/gouwuc@2x.png" alt="">
<span>购物车（0）</span>
</p>
</nav>
<header>
<img class="skirt" src="../img/assets/logo@2x.png" alt="">
<a href="">流行美衣</a>
<a href="">美裙橱窗</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">流行美衣</a>
<a href="">护肤</a>
<div class="search">
<p>白色T恤</p>
<img class="sc" src="../img/assets/ss@2x.png" alt="">
</div>
</header>
<main>
<div class="item">
<div class="item1">
<ul>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>美裙橱窗</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>百搭上衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>流行美衣</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>女包</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
<li>
<span>护肤</span>
<img class="arrpw" src="../img/assets/arrow@2x.png" alt="">
</li>
</ul>
<div class="pics">
<div class="left">
<img class="rowl" src="../img/assets/bigarrowl@2x.png" alt="">
</div>
<div class="right">
<img src="../img/assets/bigarrowrover@2x.png" alt="" class="rowr">
</div>
<div class="dots">
<div class="dot1"></div>
<div style="animation-delay: 2s;" class="dot2"></div>
<div style="animation-delay: 4s;" class="dot3"></div>
</div>
</div>
</div>
<div class="item2">
<div class="tj">
<div>
<span>特价专区</span>
<span>·</span>
<span>深度折扣</span>
<span>每日下午10点更新</span>
<img src="../img/assets/arrow@2x.png" alt="" class="arr">
</div>
<div>
<div class="tp1">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
<div>
<div class="tp2">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
<div>
<div class="tp3">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
</div>
<dic class="rm">
<div>
<span>特价专区</span>
<span>·</span>
<span>深度折扣</span>
<span>每日下午10点更新</span>
<img src="../img/assets/arrow@2x.png" alt="" class="arr">
</div>
<div>
<div class="tp1">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
<div>
<div class="tp2">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
<div>
<div class="tp3">
<p class="zi">满300减120元</p>
</div>
<p>特卖价</p>
<p>￥</p>
<p>3009</p>
</div>
</div>
</div>
<p class="find">发现好货 • 口碑</p>
<div class="cube">
<div class="cube1">
<div class="cub">
<img src="../img/assets/7.jpg" alt="" class="cc">
<p class="content">
<img src="../img/assets/hot@2x.png" alt="" class="hot">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<img src="../img/assets/gouwucolor@2x.png" alt="" class="car">
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/8.jpg" alt="" class="cc">
<p class="content">
<img src="../img/assets/hot@2x.png" alt="" class="hot">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<img src="../img/assets/gouwucolor@2x.png" alt="" class="car">
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/9.jpg" alt="" class="cc">
<p class="content">
<img src="../img/assets/hot@2x.png" alt="" class="hot">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<img src="../img/assets/gouwucolor@2x.png" alt="" class="car">
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/10.jpg" alt="" class="cc">
<p class="content">
<img src="../img/assets/hot@2x.png" alt="" class="hot">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<img src="../img/assets/gouwucolor@2x.png" alt="" class="car">
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/11.jpg" alt="" class="cc">
<p class="content">
<img src="../img/assets/hot@2x.png" alt="" class="hot">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<img src="../img/assets/gouwucolor@2x.png" alt="" class="car">
</p>
</p>
</div>
</div>
</div>
<p class="love">猜你喜欢 • 推荐</p>
<div class="cube3">
<div class="cube1">
<div class="cub">
<img src="../img/assets/12.jpg" alt="" class="cc">
<p class="content">
<span class="word">坏蛋的店Adidas阿迪达斯女鞋2020秋正品三叶草ZX2K女鞋</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/13.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/14.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/15.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/16.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
</div>
</div>
<div class="cube2">
<div class="cube1">
<div class="cub">
<img src="../img/assets/17.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money">
<span class="ll">￥</span>
<span class="cc">99</span>
<span class="rr">7000+人付款</span>
</p>
</p>
</div>
<div class="cub">
<img src="../img/assets/18.jpg" alt="" class="cc">
<p class="content">
<span class="word">古莱登宽松短袖衬衫潮流五分袖衬衣休闲时尚潮流超</span>
<p class="money"
最低0.47元/天 解锁文章
3112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
