品优购综合案例——详情页（html+CSS综合运用）自学系列

最新推荐文章于 2024-06-27 16:51:07 发布

学习前端的一只旺财

最新推荐文章于 2024-06-27 16:51:07 发布

阅读量4k

点赞数 6

分类专栏：自学html+css 黑马案例复习文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46972646/article/details/111601239

版权

自学html+css 同时被 3 个专栏收录

12 篇文章 6 订阅

订阅专栏

黑马案例

11 篇文章 4 订阅

订阅专栏

复习

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>

<!-- 顶部快捷导航 start -->
<div class="shortcut">
            <div class="w">
                <div class="short-l fl">   
                    <ul>
                        <li><a href="#">品优购欢迎您！</a></li> 
                        <li>
                            <a href="#">请登录  </a>
                            <a href="" class="style-red">免费注册</a>
                        </li>
                    </ul>
                 </div>
                <div class="short-r fr">
                    <ul> 
                        <!-- 由于li内字数不一样，不要给宽度 -->
                        <li>
                            <a href="">我的订单</a>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">我的品优购</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li>
                            <a href="">品优购会员</a>
                            <span class="sx">|</span>
                        </li>
                        <li>
                            <a href="">企业采购</a>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">关注品优购</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">客户服务</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">网站导航</a>
                            <i class="icomoon1"></i>
                        </li>
                    </ul>
                </div>
            </div>
</div>
<!-- 顶部快捷导航 end -->
    
<!-- header部分 start -->
<div class="headerwai">
      <div class="w">
            <div class="header">  
                <!-- logo模块 -->
                <div class="logo">
                    <!-- 对logo进行优化 -->
                    <h1> <a href="index.html" title="品优购"><!--  背景图片在这里 -->品优购</a></h1>
                </div>
                
                <!-- search模块 -->
                <div class="search">
                    <input class="fl" type="text" value="请搜索.....">
                   <!--  input与btn1间的缝隙只能通过浮动的方式解决 -->
                    <button class="btn1 fl">搜索</button>
                </div>
    
                <div class="hotwrods">
                    <ul>                  
                        <li>    
                            <a href="#" class="style-red">优惠购首发</a>
                         </li>
                         <li>    
                            <a href="#">亿元优惠</a>
                         </li>
                         <li>    
                            <a href="#">9.9元团购</a>
                         </li>
                         <li>    
                            <a href="#">美满99减30</a>
                         </li>
                         <li>    
                            <a href="#">办公用品</a>
                         </li>
                         <li>    
                            <a href="#">电脑</a>
                         </li>
                         <li>    
                            <a href="#">通信</a>
                         </li>
                    </ul>
                </div>
                <div class="shopcar">
                    <i class="shop-icon1 style-red"></i>
                    <span>我的购物车</span>
                    <i class="shop-icon2"></i>
                    <div class="count">888888</div>
                </div>
            </div> 
       </div>
</div>
<!-- header部分 end -->
    
<!--nav部分 start -->
<div class="nav">
            <div class="dropdown w">
                <div class="nav-left fl">
                    <div class="nav-left-hd">
                        全部商品分类
                    </div>
                    <div class="nav-left-bd" style="display: none;" >
                        <ul>
                            <li>
                                <a href="">家用电器</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">手机、数码、通信</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">电脑、办公</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">家居、家具、家装、厨具</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">男装、女装、童装、内衣</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">个户化妆、清洁用品、宠物</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="list.html">鞋靴、箱包、珠宝、奢侈品</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">运动户外、钟表</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">汽车、汽车用品</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">母婴、玩具乐器</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">食品、酒类、生鲜、特产</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">医药保健</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">图书、音像、电子书</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">彩票、旅行、充值、票务</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                            <li>
                                <a href="">理财、众筹、白条、保险</a>
                                <i class="nav-left-li-icon1"></i>
                            </li>
                        </ul>
                    </div>
                </div>       
                <div class="nav-right fl" >
                    <ul 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>
                    </ul>
                </div>       
            </div>
</div>
<!--nav部分 end -->

<!-- 详情页上大半部分 start -->
<div class="topnav w " >
    <div class="crump-wrap">
        <a href="">手机、数码、通讯</a>
        <span></span>
        <a href="">手机</a>
        <span></span>
        <a href="">Apple苹果</a>
        <span></span>
        <a href="">iphone 6S Plus系类 </a>
    </div>
<!--     这是整体最上方的一号盒子的，下面fl fr为23号盒子 -->
    <div class="topnav-hd fl">
        <img src="upload/iponemax_03.png" alt="" class="img-boder">
        <div class="topnav-items">
           <span class="items-dw1">
                <img src="upload/topnavitems_15.png" alt="">
            </span>
            <ul class="topnav-items-ul">
                <li><a href=""><img src="upload/topnavitems_17.png" alt=""></a></li>
                <li><a href=""><img src="upload/topnavitems_07.png" alt=""></a></li>
                <li><a href=""><img src="upload/topnavitems_08.png" alt=""></a></li>
                <li><a href=""><img src="upload/topnavitems_10.png" alt=""></a></li>
                <li><a href=""><img src="upload/topnavitems_12.png" alt=""></a></li>
            </ul>
            <span class="items-dw2">
                <img src="upload/topnavitems_20.png" alt="">
            </span>
        </div>
        <div class="bianhao">
            <span class="bianhao-span1">商品编号：0468256644</span>
            <span><i class="bianhao-icon1"></i> 分享</span>
            <span><i class="bianhao-icon2"></i> 关注 5000</span>
            <span><i class="bianhao-icon3"></i> 对比</span>
        </div>
    </div>
<!--     左边部分fl，右边部分fr，中间自动留出缝隙，因此不用给maring值，两个fl就会靠左边贴着就待给了 -->
    <div class="topnav-bd fr">
    <!--     到此，空白盒子一建立，给了宽高，两边浮动就出问题，最下方的footer塌了，为总盒子，topnav设置overflow：hidden -->
        <h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
        <div class="bd-wz2">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</div>
        <div class="middle-max">
            <dl class="middle-max-dl1">
                <dd class="fl middle-max-dd1">价格</dd>
                <dt class="fl middle-max-dt1">
                    <div class="dt1-hd fl">
                        <span class="dt1-hd-wz">￥1.000</span>
                        <span class="style-red  dt1-hd-wz2">降价通知</span>
                    </div>
                    <div class="dt1-bd fr">累计评价612188</div>
                </dt>
            </dl>
            <dl class="middle-max-dl2">
                <dd class="fl middle-max-dd1">促销</dd>
                <dt class="fl middle-max-dt2">
                    <div class="dt2-hd fl">
                        <span class="style-red  dt1-hd-wz3">
                            <span class="dt2-hd-wz">加价购</span>
                            满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
                            购热销商品  详情 》</span>
                    </div>
                </dt>
            </dl>
        </div>
        <dl class="middle-max-dl4">
            <dd class="fl middle-max-dd1">支持</dd>
            <dt class="fl middle-max-dt2">
                    <span class="dt1-hd-wz4">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</span>
            </dt>
        </dl>
        <dl class="middle-max-dl5">
            <dd class="fl middle-max-dd2">配送至</dd>
            <dt class="fl middle-max-dt3">
                    <span class="dt1-hd-wz4 ">北京海淀区中关     有货    支持  99元免运费 |货到付款 |211限时达 <i></i>  </span>
                    <div class="dl5-dt2-bottom">
                        由自营发货，并提供售后服务。11:00前完成下单，预计
                       <span>今天（08月10日）送达</span>
                    </div>
            </dt>
        </dl>
        <dl class="middle-max-dl6">
            <dd class="fl middle-max-dd3">选择颜色</dd>
            <dt class="fl middle-max-dt4">
                <a href="javascript:;">金色</a>
                <a href="javascript:;">银色</a>
                <a href="javascript:;" class="xz-border">黑色</a>
                <a href="javascript:;">玫瑰金</a>
            </dt>
        </dl>
        <dl class="middle-max-dl6">
            <dd class="fl middle-max-dd3">选择版本</dd>
            <dt class="fl middle-max-dt4">
                <a href="javascript:;" class="xz-border">公开版</a>
                <a href="javascript:;">移动4g</a>
            </dt>
        </dl>
        <dl class="middle-max-dl6">
            <dd class="fl middle-max-dd3">选择容量</dd>
            <dt class="fl middle-max-dt4">
                <a href="javascript:;">16GB</a>
                <a href="javascript:;">64GB</a>
                <a href="javascript:;" class="xz-border">128GB</a>
            </dt>
        </dl>
        <dl class="middle-max-dl6">
            <dd class="fl middle-max-dd3">购买方式</dd>
            <dt class="fl middle-max-dt4">
                <a href="javascript:;" class="xz-border">官方标配</a>
                <a href="javascript:;">移动优惠购</a>
                <a href="javascript:;">电信优惠购</a>
            </dt>
        </dl>
        <dl class="middle-max-dl6">
            <dd class="fl middle-max-dd3">套装</dd>
            <dt class="fl middle-max-dt4">
                <a href="javascript:;" >保护套装</a>
                <a href="javascript:;" >充电套装</a>
            </dt>
        </dl>      
        <div class="topnav-last-bottom">
            <div class="left fl">
                <div class="topnav-last-hd fl">
                    <input type="text" value="0">
                </div>
                <div class="topnav-last-bd fl">
                    <a href="javascript:;">
                    <span class="jia">+</span>
                    </a>
                    <a href="javascript:;">
                    <span class="jian">-</span>
                    </a>
                </div>
            </div>
            <div class="right fr">
                <a href="javascript:;">加入购物车</a>
            </div>
        </div>
    </div>
</div>
<!-- 详情页上大半部分 end -->

<!-- 详情页下大半部分 start -->
<div class="w">
    <div class="topnav-bd-end">
        <!-- 左浮动+右浮动就留出了中间的缝隙，不需要单独设置 -->
        <div class="topnav-bd-end-hd fl">   <!-- hd左侧大盒子 -->
            <div class="topnav-bd-end-hd-hd1"> <!-- hd-hd1左侧大盒子上大半部分 -->
                <div class="topnav-bd-end-hd-hd1-hd2"><!-- hd-hd1左侧大盒子上大半部分的上半部分 -->
                    <ul>      <!-- current1代表选中的模块 -->
                        <li class="current1">            
                            <a href="javascript:;" >相关分类</a>
                        </li>

                        <li>
                           <a href="">推荐品牌</a> 
                        </li>
                    </ul>
                </div>

                    <div class="topnav-bd-end-hd-hd1-bd2">
                        <ul>     
                            <li>手机</li>
                            <li>手机壳</li>
                            <li>内存卡</li>
                            <li>iphone配件</li>
                            <li>贴膜</li>
                            <li>手机耳机</li>
                            <li>移动电源</li>
                            <li>平板电脑</li>
                            <li>笔记本</li>
                            <li>蓝牙耳机</li>
                        </ul>
                </div>
                <div class="topnav-bd-end-hd-hd1-bd2-wz2">
                    购买了此商品的用户还买了
                </div>
            </div>

            <div class="topnav-bd-end-hd-bd1">
                <img src="upload/hdimg_03.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
            <div class="topnav-bd-end-hd-bd1">
                <img src="upload/list-img_03.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
            <div class="topnav-bd-end-hd-bd1 img-chang">
                <img src="upload/hdimg_06.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
            <div class="topnav-bd-end-hd-bd1">
                <img src="upload/hdimg_03.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
            <div class="topnav-bd-end-hd-bd1">
                <img src="upload/list-img_03.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
            <div class="topnav-bd-end-hd-bd1 img-chang">
                <img src="upload/hdimg_06.png" alt="">
                <div class="topnav-bd-end-hd-bd1-wz1">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                <div class="topnav-bd-end-hd-bd1-wz2">¥49</div>
                <a href="javascript:;"class="topnav-bd-end-hd-bd1-wz3" >加入购物车</a>
                <span class="topnav-bd-end-hd-bd1-wz4"></span>
            </div>
        </div> 
        <div class="topnav-bd-end-bd fr">
            <div class="bd-item1">
                <div class="bd-item1-hd">
                    <a href="">选择搭配</a>
                </div>
                <div class="bd-item1-md">
                    <div class="md-left fl">
                        <div class="bd-item1-md-hd">
                            <ul>                                          
                                <li class="margin-left-li"><a href="javascript:;">精品</a></li>
                                <li><a href="javascript:;">iphone配件</a></li>
                                <li><a href="javascript:;">蓝牙耳机</a></li>
                                <li><a href="javascript:;">自拍杆</a></li>
                                <li><a href="javascript:;">数据线</a></li>
                                <li><a href="javascript:;">其他手机配件</a></li>
                                <li><a href="javascript:;">U盘</a></li>
                            </ul>
                        </div> 
                        <div class="bd-item1-md-bd">
                            <div class="youce-fudong">
                                <span></span>
                            </div>
                            <ul>
                                <li class="bd-item1-frist-li">
                                    <a href=""><img src="upload/abcdefg_03.png" alt="" class="border-img1"></a>
                                    <p>￥5299.00</p>
                                    <span class="jia-fudong">+</span>
                                </li>
                                <li>
                                    <a href=""><img src="upload/abcdefg_06.png" alt="" ></a>
                                    <div class="xin-wz">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                                    <div class="item1-md-bd-bottom">
                                        <span class="icon-check_box_outline_blank"></span>
                                        <span class="qs">￥39.00</span>
                                    </div>
                                </li>
                                <li>
                                    <a href=""><img src="upload/abcdefg_09.png" alt="" ></a>
                                    <div class="xin-wz">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                                    <div class="item1-md-bd-bottom">
                                        <span class="icon-check_box_outline_blank"></span>
                                        <span class="qs">￥76.00</span>
                                    </div>
                                </li>
                                <li>
                                    <a href=""><img src="upload/abcdefg_11.png" alt="" ></a>
                                    <div class="xin-wz">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                                    <div class="item1-md-bd-bottom">
                                        <span class="icon-check_box_outline_blank"></span>
                                        <span class="qs">￥89.00</span>
                                    </div>
                                </li>
                                <li>
                                    <a href=""><img src="upload/abcdefg_13.png" alt=""></a>
                                    <div class="xin-wz">羽博 10000mah 双USB Y7移动不给字的我想揍你</div>
                                    <div class="item1-md-bd-bottom">
                                        <span class="icon-check_box_outline_blank"></span>
                                        <span class="qs">￥1100.00</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="md-right fl">
                        <div class="md-right-wz1">已选够0件搭配</div>
                        <div class="md-right-wz2">套餐价：</div>
                        <div class="md-right-wz3"> 
                            <i>￥</i>
                            <span>5299.00</span>
                        </div>
                        <div class="md-right-wz4">
                           <a href="javascript:;">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bd-item2">
                <div class="bd-item2-hd">
                    <ul>                                        
                        <li  class="item2-hd-current"><a href="">商品介绍</a></li>
                        <li><a href="">规格与包装</a></li>
                        <li><a href="">售后保障</a></li>
                        <li><a href="">商品评价（50000）</a></li>
                        <li><a href="">手机社区</a></li>
                    </ul>
                </div>
                <div class="bd-item2-md">
                    <ul>
                        <li>分辨率：1920*1080(FHD)</li>
                        <li>后置摄像头：1200万像素</li>
                        <li>前置摄像头：500万像素</li>
                        <li>核      数：其他</li>
                        <li>频      率：以官网信息为准</li>
                        <li>品牌： Apple ♥关注</li>
                        <li>商品名称：APPLEiPhone 6s Plus</li>
                        <li>商品编号：1861098</li>
                        <li>商品毛重：0.51kg</li>
                        <li>商品产地：中国大陆</li>
                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                        <li>系统：苹果（IOS）</li>
                        <li>像素：1000-1600万</li>
                        <li>机身内存：64GB</li>
                    </ul>
                    <span>查看更多参数 <i class="item2-md-icon1"></i> </span>
                </div>
            </div>
            <div class="bd-item3">
                <ul>
                    <li><a href=""><img src="upload/item3-img_03.png" alt=""></a></li>
                    <li><a href=""><img src="upload/item3-img_05.png" alt=""></a></li>
                    <li><a href=""><img src="upload/item3-img_06.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 详情页下大半部分 end -->

<!-- 最下方的猜你喜欢部分 start 放到新的模块，不要继续放到tionav-bd-end里面，效果出不来，会在end的最上方显示-->
<div class="w">
    <div class="cnxh">
        <div class="cnxh-hd">
            <span>猜你喜欢</span>
        </div>
        <div class="cnxh-bd">
            <ul>
                <li class="cnxh-bd-frist-li">
                    <img src="upload/end-last-items_03.png" alt="">
                    <div class="comoon-cnxh-wz">
                        DELL 戴尔 Ins 15MR-75<br>
                        28SS 15英寸 银色 笔记
                    </div>
                    <p>¥6699.00</p>
                    <div class="cnxh-last-wz">已有6人评价</div>
                </li>
                <li>
                    <img src="upload/end-last-items_05.png" alt="">
                    <div class="comoon-cnxh-wz">
                        Apple/苹果 iPhone 6s/6<br>
                        s Plus 16G 64G 128G
                    </div>
                    <p>¥4699.00</p>
                    <div class="cnxh-last-wz">已有66人评价</div>
                </li>
                <li>
                    <img src="upload/end-last-items_07.png" alt="">
                    <div class="comoon-cnxh-wz">
                        JBL OnBeat Rumble 无<br>
                        线蓝牙派对节拍多媒体音
                    </div>
                    <p>¥199.99</p>
                    <div class="cnxh-last-wz">已有666人评价</div>
                </li>
                <li>
                    <img src="upload/end-last-items_09.png" alt="">
                    <div class="comoon-cnxh-wz">
                        EXCO宜适酷 全屏钢化玻<br>
                        璃膜For iPhone6s/6Plu
                    </div>
                    <p>¥0.99</p>
                    <div class="cnxh-last-wz">已有6666人评价</div>
                </li>
                <li>
                    <img src="upload/end-last-items_11.png" alt="">
                    <div class="comoon-cnxh-wz">
                        Apple 苹果 iPhone 6（A1<br>
                        586）16G 金色 移动联通
                    </div>
                    <p>¥3799.00</p>
                    <div class="cnxh-last-wz">已有66666人评价</div>
                </li>
                <li>
                    <img src="upload/end-last-items_13.png" alt="">
                    <div class="comoon-cnxh-wz">
                        半岛铁盒移动电源A2200<br>
                        白色 2200mAh
                    </div>
                    <p>¥19.99</p>
                    <div class="cnxh-last-wz">已有666666人评价</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 最下方的猜你喜欢部分 start -->

<!-- footer部分 start -->
<div class="last-bottom">
    <div class="footer-restart" id="footer-restart">
        <div class="w">
            <div class="footer-top">
                <ul>
                    <li class="footer-top-li1">
                        <div class="img-left img-left-icon1 fl"></div>
                        <div class="text-right fl">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <div class="img-left img-left-icon2 fl"></div>
                        <div class="text-right fl">
                            <h4>极速物流</h4>
                            <p>急速物流，极速送达</p>
                        </div>
                    </li>
                    <li>
                        <div class="img-left img-left-icon3 fl"></div>
                        <div class="text-right fl">
                            <h4>无忧售后</h4>
                            <p>7天无理由退还</p>
                        </div>
                    </li>
                    <li>
                        <div class="img-left img-left-icon4 fl"></div>
                        <div class="text-right fl">
                            <h4>特色服务</h4>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <li>
                        <div class="img-left img-left-icon5 fl"></div>
                        <div class="text-right fl">
                            <h4>帮助中心</h4>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                    
                </ul>
            </div>
            <div class="footer-middle">
                <ul class="max-ul">
                    <li class="max-li">
                        <h4>购物指南</h4>
                        <ul class="footer-middle-ul">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电</li>
                            <li>联系客服</li>
                        </ul>
                    </li>
                    <li class="max-li">
                        <h4>配送方式</h4>
                        <ul class="footer-middle-ul">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </li>
                    <li class="max-li">
                        <h4>支付方式</h4>
                        <ul class="footer-middle-ul">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>常见问题</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </li>
                    <li class="max-li">
                        <h4>售后服务</h4>
                        <ul class="footer-middle-ul">                            
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>常见问题</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </li>
                    <li class="max-li">
                        <h4>特色服务</h4>
                        <ul class="footer-middle-ul">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>品优购E卡</li>
                            <li>品优购通信</li>
                        </ul>
                    </li>
                    <li class="max-li max-li-last">
                        <h4>帮助中心</h4>
                        <div class="ewm"></div>
                        <p>品优购客户端</p>
                    </li>
                </ul>
            </div>
           <div class="footer-end">
         <!-- 不要想多了，这个版权部分就是两个p -->
    <p class="end-p1">关于我们   <span class="sx2">|</span>   联系我们  <span class="sx2">|</span>   联系客服  <span class="sx2">|</span>  商家入驻  <span class="sx2">|</span>  营销中心  <span class="sx2">|</span>  手机品优购  <span class="sx2">|</span>  友情链接  <span class="sx2">|</span>  销售联盟  <span class="sx2">|</span>  品优购社区  <span class="sx2">|</span>  品优购公益  <span class="sx2">|</span>  English Site  <span class="sx2">|</span>   Contact U</p>
    <p class="end-p2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
        京ICP备08001421号京公网安备110108007702
        </p>
           </div>
        </div>
    </div>
</div>
<!-- footer部分 end   -->
    
</body>
</html>

detail.css：

.topnav{
    height: 638px;  
    overflow: hidden;
    /*解决右侧盒子bd建立后，footer塌了问题*/
/*     background-color:pink; */
}

.crump-wrap{
    height: 48px;
    line-height:48px;
    padding-top: 10px;
}

.crump-wrap span {
     margin: 0 12px;
     font-family: 'icomoon';
}

.topnav-hd{
    width: 400px;
    height: 588px;
}

.topnav-items-ul{
    width: 320px;
    height: 56px;
    margin: 0 auto;
}

.topnav-items-ul li{
    float: left;
    margin:0 4px;
}


.topnav-items{
    position: relative;
}

.items-dw2,
.items-dw1{
    position: absolute;
    width: 27px;
    height: 56px;
}

.items-dw1{
    left: 0px;
    top: 0px;
}

.items-dw2{
    right: 2px;
    top: 0px;
}

.topnav-items-ul{
    margin-top: 55px;
}

.bianhao{
    height: 18px;
/*     background-color: skyblue; */
    margin-top: 26px;
}

.bianhao span{
    position: relative;
    color: #666666;
    font-size: 12px;
    padding-left: 16px;
    margin-left: 22px;
}

.bianhao .bianhao-span1{
    padding-left: 5px;
    margin-left: 13px;
    /*单独调整第一个span，第一个padding值不需要那么大，调整margin，每个span间的距离，padding，一个span内距离内部左边的距离*/
}

.bianhao i {
    display: inline-block;/*行内块元素*/
    width: 15px;
    height: 15px;
/*     background-color: pink; */
}

.bianhao .bianhao-icon1{
    position: absolute;
    left: -3px;
    top: 2px;
    background:url("../upload/icon-img_03.png") no-repeat;
    /* background-size: 15px 15px; 就一张图，写不写宽高都行，效果都一样*/
}

.bianhao .bianhao-icon2{
    position: absolute;
    left: -3px;
    top: 2px;
    background:url("../upload/icon-img_05.png") no-repeat;
   /*  background-size: 15px 15px;  */
}

.bianhao .bianhao-icon3{
    position: absolute;
    left: -3px;
    top: 2px;
    background:url("../upload/icon-img_07.png") no-repeat;
   /*  background-size: 15px 15px; */
}



.topnav-hd .img-boder{
    border: 1px solid #ededed;
    border-top: none;/*图片截的上面有边框，没截好*/
}


.topnav-bd{
    height: 580px;/*638-58=580*/
    width: 720px;
}

.topnav-bd h4{
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    height: 33px;
    /*直接给其固定高度，就不用调整上下margin了*/
}


.bd-wz2{
    font-size: 12px;
    height: 33px;
    color:#e12228;
}


.middle-max{
    width: 720px;
    height: 103px;
    background-color: #fee9eb;
}

.dt1-hd-wz{
    color: #e12228;
    font-size: 24px;
}

.middle-max-dl1{
    height: 44px;
    line-height:44px;
}

.middle-max-dt1{
    width: 636px;/*随时调整宽度来调整 “累计评价xxx所在位置”，由于调整了padding .middle-max-dd1（“价格”）的padding值，要重新调整宽度*/
}

.middle-max-dd1{
    width: 60px;
    /*通过调整左边部分文字，使得右侧浮动到最右方*/
    padding-left:8px;
}

.dt1-hd-wz2{
    line-height:50px;
}

.dt1-hd{
    position: relative;
    width: 167px;
    /*为其设置宽度，让定位可以到最右方，通过调整盒子宽度调整定位位置*/
}

.dt1-hd-wz2{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.dt1-hd-wz3{
    display: inline-block;
    width: 547px;
}

.dt2-hd-wz{
    display: inline-block;
    width: 40px;
    height: 22px;
    color: #ffffff;
    background-color: #c81623;
    text-align: center;
    line-height:22px;
}

.middle-max-dl3{
    height: 43px;
    width: 270px;
}

.middle-max-dl2{
    height: 69px
}

.middle-max-dl4{
    height: 34px;
    line-height:33px;/*调整各板块间的高度来控制其模块间的距离*/
    /* background-color: skyblue; */
}

.dt1-hd-wz4{
    color:#999999;
    font-family: 'icomoon';
}
.dt1-hd-wz4 i{
    font-size: 16px;
} 

.middle-max-dl5{
    width:545px;
    height: 50px;
    border-bottom: 1px solid #ededed;
}

.dl5-dt2-bottom{
    margin-top: 4px;
    color:#999999;
}

.dl5-dt2-bottom span{
    font-weight: 700;
}

.middle-max-dd2{
    width: 60px;
    height: 49px;
    line-height:49px;
    padding-left: 8px;
}

.middle-max-dl6{
    position: relative;
    width:426px;
    height:50px;
    line-height:57px;
    padding-left: 8px;
}

.middle-max-dt4{
    position: absolute;
    height: 65px;
/*     line-height:65px; */
    top: 1px;
    left: 70px;
}

.middle-max-dt4 a{
    display: inline-block;
    width: 84px;
    height: 40px;
    line-height:40px;
    /*a中的文字垂直水平居中*/
    text-align: center;
    border: 1px solid #ededed;
    background-color: #f7f7f7;

}

.middle-max-dd3{
    text-align: center;
    position: absolute;
    left: 0px;
    /*不开定位都跑偏了，因为右侧兄弟元素已经根据middle-max-dl6盒子开启定位了*/
    width: 65px;
    height: 66px;
}


.middle-max-dl6  .middle-max-dt4 .xz-border{
    /*.middle-max-dl6  .middle-max-dt4相当于两个公共样式，提权配送至（能选的部分都是这个模板样式）！*/
    border-color:#c81623;
}

.topnav-last-bottom{
    margin-top: 12px;
    width: 220px;/*加了margin要修改宽度，否则宽度不够的部分就会被挤下去去了*/
    height: 48px;
    padding-left: 70px;
/*     background-color: #f1f1f1; */
}

.topnav-last-bottom input{
    width: 35px;
    height: 47px;
    border: 1px solid #cccccc;
    /*不算到盒子里，加上边框后应该是45，现在正常是47px的基础上加上边框，即内部高度45，上下1px边框，合适*/
    box-sizing: border-box;
    text-align: center;
    border-right: none;

}

.topnav-last-bd{
    position: relative;
    width: 20px;
    height: 44px;
/*     background-color: skyblue; */
}

.topnav-last-bd span{
    position: absolute;
    right: 0px;
    width: 20px;
    height: 24px;
    line-height:24px;
    text-align: center;
    background-color: #f1f1f1;
    box-sizing: border-box;
}

.topnav-last-bd .jia{
    top: 0px;
    border: 1px solid #cccccc;
}

.topnav-last-bd .jian{
    bottom: -3px;/*边框的影响*/
    border: 1px solid #cccccc;
    cursor: not-allowed;
    /*件数是1，用css实现jian模块禁止单击效果*/
}

.topnav-last-bd input{
    outline: none;
    border:none
}

.topnav-last-bottom .left{
    width: 62px;
    height: 48px;
}

.topnav-last-bottom .right{
    display: block;
    width: 142px;
    height: 48px;
    line-height:48px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background-color: #c81623;
    margin-left: 10px;
}

.topnav-last-bottom .right a{
    color: #ffffff;
}

.topnav-bd-end{
/*     height: 1000px; */
    /*等会回来删*/
    margin-top: 10px;
}

.topnav-bd-end-hd{
    width: 208px;
   /*  height: 1000px; */
    /*等会回来删，左侧图片多了之后长度就变化了，因此把长度去掉，一开始是看效果，现在能撑开了就不用长度了*/
    /*删完发现问题，下面的footer盒子塌了，父元素内的两个子两个浮动，都没有高度，因此为父topnav-bd-end添加overflowhidden*/   
    border: 1px solid #dddddd;
    padding-bottom: 680px;/*挤出下面的空白高度，将边框挤下去，否则边框就在上面了*/
}
/* .topnav-bd-end-hd {} */
   
.topnav-bd-end{
    overflow: hidden;
}
.topnav-bd-end-bd{
        width: 980px;
        
/*         height: 1000px; 这里高度限制下面图片了，去掉*/
        /*等会回来删*/
/*         background-color: blue; */
}


.topnav-bd-end-hd-hd1-hd2 li{
    float: left;
    width: 102px;/*字数一样，给一个一致的宽就行了，字数不一样不能给宽！*/
    /*本是104，减去左右2px边框为102*/
    height: 31px;
    line-height: 31px;/*文字垂直居中*/
    /*本是33，减去上下2px边框为31*/
    background-color: #f1f1f1;
    border: 1px solid #dddddd;
    color: #333333;
}


.topnav-bd-end-hd-hd1-hd2 li{
    text-align: center;
}

.topnav-bd-end-hd-hd1-hd2 .current1{
    /* border: none; 注意不是none，否则高度变了*/
    border-color:transparent;
    background-color: #fff;

}

.topnav-bd-end-hd-hd1-hd2 .current1  a{
    color:#c81623;
}

.topnav-bd-end-hd-hd1-bd2{
    width: 186px;/*减去padding，因为如果整体下方有边框的化，不减宽度，盒子的边框位置就不对了，宽度就多了这12px*/
    /*186合适掉不下去*/
    height: 160px;
    padding-left: 12px;
}

.topnav-bd-end-hd-hd1 .topnav-bd-end-hd-hd1-bd2 li{
    float: left;
    width: 93px;/*中间的缝隙直接用宽度填满，因为最右侧有缝隙*/
    height: 28px;
    line-height: 28px;
    border-bottom: 1px dashed #ededed;
    /* text-align: center;只垂直居中就行，不需要水平居中对齐 */
}

.topnav-bd-end-hd-hd1-hd2{
    height: 40px;
}

.topnav-bd-end-hd-hd1-bd2-wz2{
    /*padding-left: 10px;没给宽度，随便挤padding*/
    /* width: 175px; */
    /*本来不想给padding好挤padding，但下面有不是满的边框，因此要给边框一样大的宽度，并减去padding 185-10=175，若效果不好再调整宽度即可*/
    border-bottom: 1px solid #ededed;
    /*发现边框依然是padding之前的，明白了，因此这里不能给padding，给margin即可，给margin不用改宽度，即变动*/
    width: 186px;
    padding-bottom: 8px;/*通过padding调整文字与边框的距离，通过marign调整边框与外部盒子的距离*/
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
}


.topnav-bd-end-hd-bd1{
    width: 208px;
/*     height: 217px; 这个高度撑开就行了，不用单独设置*/
}

.topnav-bd-end-hd-bd1-wz1{
    padding-left: 10px;
    font-size: 13px;
    height: 28px;
    /*实现一行显示文字，多出的部分用...显示效果*/
    overflow: hidden;       /*溢出隐藏*/
    text-overflow: ellipsis;/*显示切除的文字部分*/
    white-space: nowrap;/*文字强制一行显示*/
    margin-bottom: 10px;
}

.topnav-bd-end-hd-bd1-wz2{
    padding-left: 10px;
    font-weight: 600;
    height: 14px;
/*border-bottom: 1px solid #e5e5e5;*/
    
}

.topnav-bd-end-hd-bd1-wz3{
    /*块级元素，margin 0 auto就居中了*/
    margin: 0 auto;
    display: block;
    width: 88px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #dddddd;
    color:#333333;
}

.topnav-bd-end-hd-bd1-wz4{
    display: block;
    width: 190px;
    height: 25px;
    margin-left: 10px;
    margin-right: 10px;
    /*调整边距距离左右盒子的距离*/
    border-bottom: 1px solid #ededed;
}

.bd-item1-hd{
    height: 37px;
    background-color:#f1f1f1;
    border: 1px solid #dddddd;
}

.bd-item1-hd a{
    width: 87px;
    height: 39px;
    line-height: 39px;
    display: block;
    text-align: center;
    background-color: #c81623;
    color: #fff;
}

/* .topnav-bd-end-hd-bd1 img{
    width: 200px;
    height: 124px;
} */


.img-chang img{
    margin-bottom: 18px;
}


.bd-item1-md{
    height: 259px;
}

.md-left{
    width: 807px;
    height: 260px;
}

.md-right{
    /*经测试，为极限，因为外面大盒子宽度高度限定，高大1px吐出去，宽大1px right整体挤下去了*/
    width: 172px;
    height: 258px;
    border: 1px solid #dddddd;
    border-top:none;
    border-left:none;
}

.bd-item1-md-hd{
    height: 52px;
}

.bd-item1-md-hd li{
    float: left;
    margin: 13px 22px;
    /*普通的是一格44，左右/2为22*/
}

.margin-left-li{
margin-left: 18px;
}

.bd-item1-md-hd li a{
    color:#999999;
}


.bd-item1-md-bd li{
    float: left;
    margin:0 10px;
}

.bd-item1-md-bd .bd-item1-frist-li{
    position: relative;
    margin-left: 17px;
    margin-right: 32px;
}

.bd-item1-md-bd p{
    font-size:14px;
    color:#e12228;
    margin-top:8px;
    padding-left: 30px;
}


.bd-item1-md-bd li img{
    width: 132px;
    height: 132px;
}
.border-img1{
    border: 1px solid #c81623;
}

.bd-item1-md-bd li .xin-wz{
    /*不给宽度，强制一行没有效果，下面三行代码就失效*/
    /*因此要设置宽度到正好显示小数点的位置*/
    width: 125px;
    /*直接给高度就不用给margin了,发现不行，他是靠底边显示的，不是靠顶部*/
    margin-top: 10px;
    white-space: nowrap;/*强制一行显示*/
    overflow: hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*溢出文字部分。。。显示*/
}

.icon-check_box_outline_blank{
    /* font-family: 'icomoon'; */
    /*上面有字的，不要给font-family，将其类名改为对应类名即可*/
    font-size: 16px;
    display: inline-block;
    width: 12px;
    height: 11px;
    color: #dddddd;
}

.qs{
    color: #e12228;
}

.item1-md-bd-bottom{
    height: 14px;
}


.jia-fudong{
    font-size: 30px;
    position: absolute;
    top: 45px;
    left: 150px;
/*     width: 11px; 在这个+里面，宽高不好使，不加背景颜色的话没影响，而且看不出来效果，大小由这个font-size控制
    height: 11px; */
}

.md-left {
position: relative;
width: 805px;
height: 258px;
/*加了边框，重新修改宽高*/
border: 1px solid #dddddd;
border-top: none;
}

.youce-fudong{
    position: absolute;
    right: 0;
    top: 104px;
    /*top算法，先走整个.md-left 宽度一半，再走自己宽/高度的一半即为top，258/2=129，再往上走自己高度的一半50/2=25，即129-25=104，在垂直居中位置*/
    width: 20px;
    height: 50px;
    line-height: 50px;/*让字体图标垂直居中*/
    background-color: #dddddd;
    font-family: 'icomoon';
    font-size: 22px;
/*     text-align: center; 通过定位调整，不需要这个*/
    font-weight: 700;
    color: #fff;
    /*发现里面的字体文字的位置总是调不好，干脆就用定位，*/
}

.youce-fudong span{
    /*发现不好调整字体文字，直接用定位，简单完成，通过父绝子绝  实现效果 */
    position: absolute;
    right: 2px;
    top: 0;
}



.md-right-wz1{
    margin-top: 46px;
}

.md-right-wz2{
    font-weight: 700;
    font-size: 12px;
   /* height: 30px;都是靠底边对其，因此不能通过高度拉出缝隙，如果是靠顶部对其就可以了*/
   margin-top: 19px;
}

.md-right-wz3{
    margin-top: 10px;
}

.md-right-wz3 span{
    font-size: 24px;
    color: #e12228;
}

.md-right-wz3 i{
    font-size: 16px;
    color: #e12228;
}


.md-right-wz1,
.md-right-wz2,
.md-right-wz3{
    padding-left: 14px;
    /*单个随便挤，因为123都是字没有宽度，随便撑开，不需要再改宽度*/
    /* 可以单个挤，但不能整体挤，会掉下去 */
}


/*  .md-right{
     padding-left: 14px;
     overflow: hidden;解决不了问题
 } */

 .md-right-wz4{
    display: block;
    width: 142px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background-color: #c81623;
    margin-top:35px;
    margin-left: 14px;
    /*唯一一个不能通过padding挤的部分，会使整个红框宽度越来越大，因此这个要用margin，实现效果*/
 }

 .md-right-wz4 a{
    color: #fff;
    cursor: pointer;/*放上去出现小手*/
 }
/* 
 width: 87px;
 height: 39px;
 line-height: 39px;
 display: block;
 text-align: center;
 background-color: #c81623;
 color: #fff; */

 .bd-item2-hd li{
    float: left;
    margin: 0 16px;/*不给宽度，让字体撑开即可，给margin让li分开 ,本来20，,16效果更好*/
 }

 .bd-item2-hd{
     background-color: #f1f1f1;
     margin-top:20px;
     width: 978px;
     height: 39px;
     line-height: 39px;
     text-align: center;
     border: 1px solid #dddddd;
 }

 .bd-item2-hd .item2-hd-current{
     /* 提权 */
    background-color: #c81623;
    /*这个有背景颜色，单独给其li设置宽高好给背景颜色*/
    width: 87px;
    height: 39px;
    margin-left: 0px;
 }

 .bd-item2-hd .item2-hd-current a{
    color: #fff;   
 }


 .bd-item2-md{
    position: relative;
    margin-top: 16px;
    width: 966px;/*980-padding的14=966，设置了padding对宽度进行调整*/
    height: 313px;/*为了留出高度的缝隙不要减去高度*/
/*     background-color: pink; */
    padding-left: 14px;
    padding-bottom: 18px;/*为最下方与border留出距离，这个时候就不要减去高度了，否则高度留不出来缝隙*/
    border-bottom: 1px solid #dddddd;
 }

 .bd-item2 .bd-item2-md li{
    /*  float: left;一定不要浮动，这个就是li垂直摆下来的，没有在一行内 */
     height: 22px;
 }


 .bd-item2-md span{
    position: absolute;
    right: 0;
    bottom: 12px;
    color:#333333;
    font-weight: 700;
}

 .item2-md-icon1 {
    font-family: 'icomoon';
 }

 .cnxh-hd{
     height: 39px;
     line-height: 39px;
/*      text-align: center; 就一个span，到最中间去了，效果不一样*/
     background-color: #f1f1f1;
     border: 1px solid #dddddd;
 }

 .cnxh{
     height: 335px;
/*      background-color: skyblue; */
     margin-bottom: 20px;
 }

 .cnxh-hd span{
     font-size: 16px;
     color: #333333;
     margin: 12px;/*通过调整margin来控制span距离盒子的距离*/
 }

 .cnxh-bd{
     padding-top: 35px;
     height: 262px;
     border: 1px solid #dddddd;
     border-top: none;
     /*297-35=262,加了padding后对高度进行调整*/
 }

 .comoon-cnxh-wz{
     margin-top: 12px;
     height: 34px;
     line-height: 20px;
 }

 
 .cnxh .cnxh-bd li p{
     font-size: 16px;
     color:#cc0000;
     margin-top: 12px;
 }


 .cnxh-last-wz{
    margin-top:25px;
    /*原本应该是34px，25px效果好一点*/
 }

 .cnxh-bd li{
     float: left;
     margin: 0 20px;
 }

 .cnxh-bd .cnxh-bd-frist-li{
     /*提权*/
     margin-left: 65px;/*原本69px，65效果好一点*/
 }

在这里插入图片描述

学习前端的一只旺财

关注

6
点赞
踩
54

收藏

觉得还不错? 一键收藏
1
评论
品优购综合案例——详情页（html+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> <link rel="stylesheet" href="css/base
复制链接

扫一扫

专栏目录