一。今日所学内容
css项目实战的商品详情页面
<body>
<!-- 头部公共模块 -->
<!-- 顶部导航栏 -->
<div class="nav">
<div class="w">
<!-- 登录 -->
<div class="nav-left">
优购商城欢迎您！
<a href="">登录</a>
<a href="">注册</a>
</div>
<!-- 右侧分类 -->
<div class="nav-right">
<a href="#">我的订单</a><span>|</span>
<a href="#">我的优购</a><span>|</span>
</div>
</div>
</div>
<!-- 顶部导航栏结束 -->
<div class="head">
<!-- logo,搜索，购物车 start-->
<div class="header w">
<!-- logo部分 -->
<div class="logo">
<a href="#"></a>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" placeholder="口红">
<button>
<span class="iconfont icon-seach"></span>
</button>
</div>
<!-- 热词 -->
<div class="hotwords">
<a href="#" class="first">新款连衣裙</a>
<a href="#">四件套</a>
</div>
<!-- 购物车 -->
<div class="shop-car">
<i class="iconfont icon-gouwuchekong"></i> 我的购物车
<span class="count">18</span>
</div>
</div>
<!-- logo,搜索，购物车 end-->
<!-- 顶部下沿导航栏 start-->
<div class="nav-list w">
<a href="#" class="nav-list-first">全部商品分类</a>
<a href="#">潮流服饰</a>
<a href="#">美妆馆</a>>
</div>
<!-- 顶部下沿导航栏 end-->
</div>
<!-- 头部公共结束 -->
<!-- 商品详情 -->
<div class="detail clearfix">
<div class="detail-head w">
<a href="">手机、数码、通讯</a> >
<a href="">手机</a> >
<a href="">华为 mate 系列</a> >
<a href="">HUAWEI Mate X2</a>
</div>
<div class="detail-table w clearfix">
<div class="left fl">
<div class="big-img">
<img src="./images/goods/1.webp" alt="">
</div>
<div class="left-down">
<div class="left-icon fl">
<span class="iconfont icon-a-huaban1fuben44"></span>
</div>
<div class="img-list fl">
<img src="images/goods/1-small.png" alt="">
</div>
<div class="right-icon fl">
<span class="iconfont icon-a-huaban1fuben45"></span>
</div>
</div>
</div>
<div class="right fr">
<h1 class="title">HUAWEI Mate X2 5G 全网通 8GB+256GB(釉白色)</h1>
<div class="huodong-box">
<div>
<span class="price">价  格</span>
<span class="yuanjia">￥17999.00</span>
<span class="jiangjia">降价通知</span>
</div>
<div class="cuoxiao">
<span class="price">促  销</span>
<span class="fenqi">分期免息</span>
<span>银联、花呗、掌上生活、工行分期支付可享免息（免息活动适用于单款免息商品订单，含...</span>
</div>
<div class="jifen">
<span class="price">    </span>
<span class="fenqi">赠送积分</span>
<span>购买即赠商城积分，积分可抵现~</span>
</div>
</div>
<div class="taocan">
<div class="selector">
<span>选择颜色：</span>
<a href="#" title="釉白">釉白</a>
<a href="#" title="玫瑰金">玫瑰金</a>
</div>
<div class="selector">
<span>选择版本：</span>
<a href="#" title="4G+128G">4G+128G</a>
<a href="#" title="4G+256G">4G+256G</a>
</div>
<div class="selector">
<span>套  餐：</span>
<a href="#" title="官方标配">官方标配</a>
</div>
</div>
<div class="cart">
<div class="count fl">
<input type="text" value="1">
<a href="" class="add">+</a><br>
<a href="" class="reduce">-</a>
</div>
<div class="add-cart fl">
加入购物车
</div>
</div>
</div>
</div>
<!-- 商品详情部分 -->
<div class="detail-list w">
<div class="detail-left fl">
<div class="detail-title">
<span class="jingpin fl">人气精品</span>
<span class="new fl">店铺上新</span>
</div>
<ul>
<li>
<img src="images/11.jpg" alt="">
<p>￥358.00</p>
<p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
</li>
</ul>
</div>
<div class="detail-right fr">
</div>
</div>
</div>
<!-- 脚部 -->
<div class="footer">
<div class="w">
<!-- 上方服务 -->
<div class="footer-service">
<ul>
<li>
<a href="#">
<span class="iconfont icon-liwu">预约维修服务</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-liwu">七天无理由退货</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-liwu">15天免费退货</span>
</a>
</li>
<li>
<a href="#">
<span class="iconfont icon-liwu">满99包邮</span>
</a>
</li>
<li class="last-service">
<a href="#">
<span class="iconfont icon-liwu">680家售后网点</span>
</a>
</li>
</ul>
</div>
<!-- 售后 -->
<div class="footer-help">
<dl>
<dt>帮助中心</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<div class="app-download">
<h3>帮助中心</h3>
<img src="./images/erweima.jpg" alt="">
<p>APP下载</p>
</div>
</div>
<!-- 版权 -->
<div class="footer-banquan">
<p class="banquan-link">
<a href="">关于我们</a><span>|</span>
</p>
</div>
</div>
</div>
|
