一、今日所学内容
电商网页实战
<body>
<!-- 头部公共样式 start -->
<!-- 顶部导航栏 -->
<div class="shotcut w">
<!-- 左侧的登录、注册内容 -->
<div class="left-login">
优购商城欢迎您！
<a href="#">登录</a>
<a href="#">免费注册</a>
</div>
<!-- 右侧分类链接 -->
<div class="right-classify">
<a href="#">我的订单</a>
<span>|</span>
<a href="#">我的优购</a>
<span>|</span>
<a href="#">会员</a>
<span>|</span>
<a href="#">企业采购</a>
<span>|</span>
<a href="#">客户服务</a>
<span>|</span>
<a href="#">网站导航</a>
</div>
</div>
<!-- logo、搜索框、购物车部分 -->
<div class="h">
<div class="header w">
<!-- logo区域 -->
<div class="logo">
<a href="#"></a>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" value="黑猫警长">
<button class="iconfont icon-seach"></button>
<div class="hot-words">
<a href="#" class="first">新款连衣裙</a>
<a href="#">四件套</a>
<a href="#">潮流体恤</a>
<a href="#">潮流女鞋</a>
<a href="#">短裤</a>
<a href="#">半身裙</a>
<a href="#">男士外套</a>
<a href="#">墙纸</a>
</div>
</div>
<!-- 购物车 -->
<div class="cart">
<i class="iconfont icon-gouwuchekong"></i>
我的购物车
<span class="count">18</span>
</div>
</div>
<!-- 顶部下沿导航栏 -->
<div class="top-nav w">
<a href="#" class="first">全部商品分类</a>
<a href="#">潮流服饰</a>
<a href="#">美妆馆</a>
<a href="#">电玩街</a>
<a href="#">电器城</a>
<a href="#">家世界</a>
<a href="#">母婴区</a>
<a href="#">会员专享</a>
</div>
</div>
<!-- 头部公共样式 end -->
<!-- 商品列表和大图 -->
<div class="master-boot w">
<!-- 左侧商品分类侧边栏 -->
<div class="dropdown">
<ul>
<li>
<a href="#">家用电器 / 大家电</a>
<span>></span>
</li>
<li>
<a href="#">手机 / 数码 / 通信</a>
<span>></span>
</li>
<li>
<a href="#">电脑 / 办公</a>
<span>></span>
</li>
<li>
<a href="#">家居 / 家具 / 家装 / 厨具</a>
<span>></span>
</li>
<li>
<a href="#">男装 / 女装 / 童装 / 内衣</a>
<span>></span>
</li>
<li>
<a href="#">个户化妆 / 清洁用品 / 宠物</a>
<span>></span>
</li>
<li>
<a href="#">鞋靴 / 箱包 / 珠宝 / 奢侈品</a>
<span>></span>
</li>
<li>
<a href="#">运动户外 / 钟表</a>
<span>></span>
</li>
<li>
<a href="#">汽车 / 汽车用品</a>
<span>></span>
</li>
<li>
<a href="#">母婴 / 玩具 / 乐器</a>
<span>></span>
</li>
<li>
<a href="#">食品 / 酒类 / 生鲜 / 特产</a>
<span>></span>
</li>
<li>
<a href="#">医药保健</a>
<span>></span>
</li>
<li>
<a href="#">图书 / 音像 / 电子书</a>
<span>></span>
</li>
<li>
<a href="#">彩票 / 旅行 / 充值 / 票务</a>
<span>></span>
</li>
<li>
<a href="#">理财 / 众筹 / 白条 / 保险</a>
<span>></span>
</li>
</ul>
</div>
<!-- 右侧轮播图 -->
<div class="swiper">
<ul class="slider-circle">
<li class="first"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- 今日推荐部分 -->
<div class="recommond w">
<div class="recommond-icon">
<span class="iconfont icon-shizhong"></span>
<h3>今日推荐</h3>
</div>
<!-- 右侧图片 -->
<div class="recommond-goods">
<ul>
<li><a href="#">
<img src="./upload/recommend/1.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./upload/recommend/2.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./upload/recommend/3.jpeg" alt="">
</a></li>
</ul>
</div>
</div>
<!-- 今日秒杀部分 -->
<div class="miao-kill">
<div class="w">
<!-- 优购秒杀文字 -->
<div class="miao-title">
<h3>优购秒杀</h3>
<span class="iconfont icon-a-huaban1fuben45"></span>
<span class="iconfont icon-a-huaban1fuben44"></span>
</div>
<!-- 秒杀商品栏 -->
<div class="ms-list">
<div class="countdown">
<h3>优购秒杀</h3>
<p>倒计时</p>
<div class="time">
<span>17</span>:
<span>25</span>:
<span>58</span>
</div>
</div>
<ul>
<li>
<a href="#">
<img src="./upload/ms/1.webp" alt="">
<h4>华为mate50 旗舰手机 成功人士首选</h4>
<p>
<span>7600</span>
<del>7800</del>
</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/ms/1.webp" alt="">
<h4>华为mate50 旗舰手机 成功人士首选</h4>
<p>
<span>7600</span>
<del>7800</del>
</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/ms/1.webp" alt="">
<h4>华为mate50 旗舰手机 成功人士首选</h4>
<p>
<span>7600</span>
<del>7800</del>
</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/ms/1.webp" alt="">
<h4>华为mate50 旗舰手机 成功人士首选</h4>
<p>
<span>7600</span>
<del>7800</del>
</p>
</a>
</li>
<!-- 美丽人生 -->
<div class="life">
<div class="w">
<!-- 美丽人生文字 -->
<div class="title">
<h3>美丽人生 FASHION & BEAUTY</h3>
<div class="cat-list">
<a href="#">
<span>彩妆</span>
</a>
<a href="#">
<span>眼霜</span>
</a>
<a href="#">
<span>口红</span>
</a>
<a href="#">
<span>滋养</span>
</a>
</div>
</div>
<!-- 美丽人生图片 -->
<!-- 左侧 -->
<div class="goods-list">
<a href="#">
<img src="./upload/cosmetics/1.png" alt="">
</a>
<!-- 右侧 -->
<ul class="goods-items">
<li>
<a href="#">
<img src="./upload/cosmetics/2.jpg" alt="">
<h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
<p>¥ 780</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
二、今日问题
无
三、解决方案
无
|
