小米商城的商品详情页的布局

abstract：div class="detail">    <div class="content">        <div class="detail_left">            <b&

div class="detail">

    <div class="content">

        <div class="detail_left">

            <b>小米8</b><span></span><a href="#">小米8 SE</a>

        </div>

        <div class="detail_right">

            <a href="">概述</a><span></span>

            <a href="">图集</a><span></span>

            <a href="">参数</a><span></span>

            <a href="">F码通道</a><span></span>

            <a href="">用户评价</a>

        </div>  

    </div>      

</div> 

<div class="shop_detail">

    <div class="shop_detail_pic">

    </div>

    <div class="shop_detail_menu">

        <h1>红米6A</h1>

        <p>12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>

        <h2>599</h2>

        <div class="detail_map">

             <i class="fa fa-map-marker"></i>

             <span>北京 &nbsp; 北京市 &nbsp;  东城区 &nbsp;  永定门外街道  &nbsp;<a href="" style="color: #ff6700;"> &nbsp; 修改</a>  </span><br>

             <span style="color: #ff6700; margin-left: 12px;">有现货</span>

        </div>

        <div class="shop_detail_much">

                <p>选择版本</p>

                <div class="detail_much_left" style="margin-right: 5px;" >4GB+64GB 全网通 <span data-val="599">599元</span></div>

                <div class="detail_much_left">6GB+64GB 全网通 <span data-val="699">699元</span></div>

        </div>

        <div class="clear"></div>

        <div class="shop_detail_color">

                <p>选择颜色</p>

                <div class="detail_color_left detail_color_left_checked" style="margin-right: 5px;margin-bottom: 5px;"><span style="background:#F6E6D8; "></span>  金色</div>

                <div class="detail_color_left"><span style="background:#3C3F43;"></span>  深灰</div>

                <div class="detail_color_left" style="margin-right: 5px; margin-bottom: 5px;"><span style="background:#D93239;"></span>   亮红</div>

                <div class="detail_color_left"><span style="background:#3871B7;"></span>  亮蓝</div>

        </div>

        <div class="clear"></div>

        <div class="shop_detail_bz">

            <div class="shop_detail_bz0">

                <p>选择小米提供的保障服务</p>

                <a href="#">了解保障服务  ></a>

                <div class="clear"></div>

            </div>

            <div class="shop_detail_bz1" style="border-bottom: none">

                <span class="fa fa-check-circle shop_detail_button"></span>

                <img src="static/images/bz.jpg">

                <div class="shop_detail_1">

                    <p style="font-size: 18px;color: #333;">意外保障服务</p>

                    <p>手机意外摔落/进水/碾压等损坏</p>

                    <b class="fa fa-check-square shop_detail_button"></b>  &nbsp;我已阅读&nbsp;  <a> &nbsp;服务条款&nbsp; </a>|<a> &nbsp;服务条款&nbsp;</a>

                    <span data-val="99">99元</span>

                </div>

            </div>

            <div class="shop_detail_bz1">

                <span class="fa fa-check-circle shop_detail_button"></span>

                <img src="static/images/bz.jpg">

                <div class="shop_detail_1">

                    <p style="font-size: 18px;color: #333;">碎屏保障服务</p>

                    <p>手机意外碎屏</p>

                    <b class="fa fa-check-square shop_detail_button"></b>  &nbsp;我已阅读&nbsp;  <a> &nbsp;服务条款&nbsp; </a>|<a> &nbsp;服务条款&nbsp;</a>

                    <span data-val="179">179元</span>

                </div>

            </div>

            <div class="clear"></div>

            <div class="shop_detail_zj">

                <div>

                    <p>小米8 6GB+64GB 黑色</p><span id="phonePrice">699元</span>

                    <div class="clear"></div>

                </div>

                <p id="totalPrice" style="color:#FF6A00;font-size: 25px;margin-left: 30px;">总计&nbsp;：&nbsp;699元</p>

            </div>

            <div class="shop_detail_cart">加入购物车</div>

            <p><i class="fa fa-check-circle-o"></i>  7天无理由退货  <i class="fa fa-check-circle-o"></i> 15天质量问题换货  <i class="fa fa-check-circle-o"></i> 365天保修 </p>

    </div>

   </div>

</div>

<div class="clear"></div> 

    <div class="detail_content">

        <div class="detail_content_1">

            <p>特别说明</p>

            <img src="static/images/sm.jpg">

            <p>官方微信</p>

            <img src="static/images/2.jpg">

        </div>

    </div>

Correcting teacher：查无此人Correction time：2019-04-26 13:29:52
Teacher's summary：完成的不错，不过上传的代码好像不完整呀。继续加油。