Community
Learn
Tools Library
AI Tools
Leisure
search
English

2019-09-27 小米商城详情页

Original 2019-09-27 16:15:01 1718
abstract：在线预览地址：http://www.pursuer.top/xiaomi1/detail.htmlHTML部分：<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>小米商城</title>  <link

在线预览地址：http://www.pursuer.top/xiaomi1/detail.html

HTML部分：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>小米商城</title>

  <link rel="shortcut icon"  type="image/x-icon" href="static/images/footlogo.png">

  <!-- <link rel="stylesheet" href="static/layui/css/layui.css"> -->

  <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="static/css/detail.css">

  <script src="static/js/jq_3.3.1_mi.js"></script>

  <script src="static/js/detail.js"></script>

</head>

<body>

  <!-- 头部 -->

  <div>

    <div>

      <div>

        <a href="">小米商城</a><span>|</span>

        <a href="">MIUI</a><span>|</span>

        <a href="">IOT</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><span>|</span>

        <a href="">SelectRegion</a>

      </div>

      <div>

        <a href="login.html">登录</a><span>|</span>

        <a href="login.html">注册</a><span>|</span>

        <a href="">我的订单</a>

        <li>

          <a ><i class="fa fa-shopping-cart"></i>购物车(0)</a>

          <div>购物车中还没有商品，赶紧选购吧！</div>

        </li>

      </div>

    </div>

  </div>

  <div></div>


  <!-- 主体 -->

  <div>

    <div>

      <!-- 导航 -->

      <div>

        <div>

          <img src="static/images/footlogo.png" alt="" style="margin:5px 0;margin-right:10px;">

          <img src="static/images/logoAD.gif" alt="">

        </div>

        <div>

          <li>

            <a href="#">小米手机</a>

            <div>

              <div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone1.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone2.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone3.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone4.jpg" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone5.jpg" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone7.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

              </div>

            </div>

          </li>

          <li>

            <a href="#">红米</a>

            <div>

              <div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone8.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone9.jpg" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone10.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone11.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone13.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

                <div></div>

                <div>

                  <div>新品</div>

                  <img src="static/images/phone/phone14.png" alt="">

                  <a href="#">小米2s</a>

                  <span>3299元</span>

                </div>

              </div>

            </div>

          </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>

          <li><a href="#">社区</a></li>

          <div></div>

        </div>

        <div>

          <input type="text">

          <div>

            <a href="#">电视新品</a>

            <a href="#">618预热</a>

          </div>

          <div><i class="fa fa-search"></i></div>

        </div>

      </div>

      <div></div>


      <!-- 商品详情 -->

      <div>

        <div>

            <div>

                <div>

                    <div>

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

                    </div>

                    <div>

                        <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></div>


            <div>

                

            </div>

            <div>

                <div>

                    <h2>红米6A</h2>

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

                    <span>599</span>

                </div>

                <div>

                    <p><i class="fa fa-map-marker"></i>北京&nbsp;&nbsp;北京市&nbsp;&nbsp;东城区&nbsp;&nbsp;永定门外街道&nbsp;&nbsp;&nbsp;&nbsp;

                    <a href="#">修改</a></p>

                    <span>有现货</span>

                </div>

                <div>

                    <h2>选择版本</h2>

                    <div class="short_kuang active" data-tit="4GB+64GB 全网通"  data-val="599">

                        <p>4GB+64GB 全网通</p>

                        <span>599元</span>

                    </div>

                    <div  data-tit="6GB+64GB 全网通"  data-val="699">

                        <p>6GB+64GB 全网通</p>

                        <span>699元</span>

                    </div>

                </div>

                <div></div>

                <div>

                    <h2>选择颜色</h2>

                    <div class="color_kuang active"  data-val="金色">

                        <div><span></span>金色</div>

                    </div>

                    <div data-val="深灰">

                        <div><span style="background:#3c3f43;"></span>深灰</div>

                    </div>

                    <div data-val="亮红">

                        <div><span  style="background:#d93239;"></span>亮红</div>

                    </div>

                    <div data-val="亮蓝">

                        <div><span  style="background:#3871b7;"></span>亮蓝</div>

                    </div>

                </div>

                <div></div>

                <div>

                    <div>

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

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

                    </div>

                    <div></div>

                    <div style="border-bottom: none;">

                        <div>

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

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

                        </div>

                        <div>

                            <div>意外保障服务</div>

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

                            <p><div class="fa fa-check-square"></div><h5>我已阅读</h5><b>服务条款</b><span>|</span><b>服务条款</b></p>

                            <div val='99'>99元</div>

                        </div>

                    </div>

                    <div>

                        <div>

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

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

                        </div>

                        <div>

                            <div>碎屏保障服务</div>

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

                            <p><div class="fa fa-check-square"></div><h5>我已阅读</h5><b>服务条款</b><span>|</span><b>服务条款</b></p>

                            <div  val="179">179元</div>

                        </div>

                    </div>

                </div>

                <div></div>

                <div>

                    <div id="phoneName">小米8&nbsp;&nbsp;4GB+64GB&nbsp;全网通&nbsp;&nbsp;金色</div>

                    <div id="phonePrice">599元</div>

                    <div></div>

                    <div id="totalPrice">总计：599元</div>

                </div>

                <div></div>

                <button onclick="location.href='index.html'">加入购物车</button>

                <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>

      </div>      

      <!-- 商品详情 end--> 

    </div>

  </div>

  <div></div>

  <!-- 其他信息 -->

       <div>

          <div>

            <p>特别说明</p>

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

          </div>          

          <div>

            <p>官方微信</p>

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

          </div>

      </div>

      <div></div>

  <!-- 其他信息 end -->

  <!-- 底部 -->

  <div>

    <div>

      <div>

        <a href=""><i class="fa fa-wrench"></i>预约维修服务</a><span>|</span>

        <a href=""><i class="fa fa-rotate-right"></i>7天无理由退货</a><span>|</span>

        <a href=""><i class="fa fa-refresh"></i>15天免费换货</a><span>|</span>

        <a href=""><i class="fa fa-gift"></i>满150元包邮</a><span>|</span>

        <a href=""><i class="fa fa-map-marker"></i>520余家售后网点</a>

      </div>

      <div>

              <div>

          <div>帮助中心</div>

          <a>账户管理</a>

          <a>购物指南</a>

          <a>订单操作</a>

        </div>

        <div>

          <div>服务支持</div>

          <a>售后政策</a>

          <a>自助服务</a>

          <a>相关下载</a>

        </div>

        <div>

          <div>线下门店</div>

          <a>小米之家</a>

          <a>服务网点</a>

          <a>授权体验店</a>

        </div>

        <div>

          <div>关于小米</div>

          <a>了解小米</a>

          <a>加入小米</a>

          <a>投资者关系</a>

        </div>

        <div>

          <div>关注我们</div>

          <a>新浪微博</a>

          <a>官网微博</a>

          <a>联系我们</a>

        </div>

        <div>

          <div>特色服务</div>

          <a>F码通道</a>

          <a>礼物码</a>

          <a>防伪查询</a>

        </div>

        <div>

          <span style="font-size:22px;">Feir-520-1314</span>

          <span style="font-size:12px;color: #616161;">周一至周日 8:00-18:00<br>(仅收市话费)</span>

          <div id="tel"><a><i class="fa fa-commenting"></i>联系客服</a></div>

        </div>

      </div>

      <div></div>

      <div>

        <div style="background: url(static/images/footlogo.png);"></div>

        <div>

          <div>

            <a href="">小米商城</a><span>|</span>

            <a href="">MIUI</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><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><span>|</span>

            <a href="">Select&nbsp;&nbsp;Region</a>

          </div>

          <div>

            <span> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>

          </div>

        </div>

        <div>

          <img src="static/images/footericon1.png" alt="">

          <img src="static/images/footericon2.png" alt="">

          <img src="static/images/footericon3.png" alt="">

          <img src="static/images/footericon4.png" alt="">

          <img src="static/images/footericon5.png" alt="">

        </div>

      </div>

      <div></div>

      <div>探索黑科技，小米为发烧而生！</div>

    </div>

  </div>

</body>

</html>


css部分：

/*公共样式*/

*{padding:0;margin:0;font-family:Helvetica; }

a{text-decoration: none;cursor:pointer;color:#373737;}

li{list-style:none;}

.clear{clear: both;}

/*头部样式*/

.header{width:100%;height:40px;background-color:#333;}

.menu{width:1226px;height:40px;margin:0 auto;}

.menu .left{float: left;}

.menu .right{float: right;}

.menu .right li{float: right;margin-left: 8px;position: relative;}

.menu .right li .text{z-index:999;width:260px;height:90px;background:#fff;font-size: 12px;color: #ccc;padding:10px;display:none;position: absolute;top:40px;right: 0;text-align: center;}

.menu .right li:hover .text{display:block;}

.menu .right li:hover a{color:#ff6a00;background: #fff; }

.menu a{font-size: 12px;color: #ccc;line-height: 40px;}

.menu a:hover{color: #fff;}

.menu .gwc{width: 120px;height: 40px;background: #424242;display:inline-block;text-align: center;line-height: 40px;}

.menu .gwc:hover{background: #fff;color: #ff6a00;}

.menu .gwc i{margin-right: 8px;}

.menu span{font-size: 12px;color: #ccc;margin:0 6px;}

/*主体样式*/

.main{width:1226px;margin:0 auto;}

.main .detail{

  width: 1226px;

  height: 500px;

  border-top: 1px solid #e0e0e0;

}

/*导航*/

.mainNav{width:1226px;height:66px;margin:10px auto;}

.mainNav_p,.mainNav_ul,.mainNav_s{float:left;}

.mainNav_ul li{font-size:18px;margin:0 8px;line-height: 66px;float: left;}

.mainNav_ul li a{color: #333;}

.mainNav_ul li a:hover{color: #ff6a00;}

.mainNav_s{height:66px;width:312px;float:right;position: relative;}

.mainNav_s input{outline:none;padding:0 10px;height: 50px;width: 228px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;margin: 7px 0;float: left;}

.mainNav_s div{position: absolute;width:120px;top:22px;right:60px;}

.mainNav_s div a{font-size:12px;padding:4px;background:#ebebeb;color: #aaa;}

.mainNav_s div a:hover{background:#ff6a00;color: #fff;}

.mainNav_s .but{cursor:pointer;font-size:22px;line-height:52px;text-align:center;height: 50px;width: 60px;border:1px solid #ccc;margin: 7px 0;position: absolute;top: 0;right: 0;}

.mainNav_s .but:hover{background: #ff6a00;color: #fff;}

/*下拉框*/

.mainNav_ul .mainNav_ul_p{width: 100%;height: 230px;background: #fff;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;position: absolute;left:0;top:116px;display: none;z-index: 999;}

.mainNav_ul li:hover .mainNav_ul_p{display: block;}

.mainNav_ul .mainNav_ul_p .div_p{width: 1226px;height: 230px;margin: 0 auto;}

.mainNav_ul .mainNav_ul_p .div_p_c{width:120px;height:230px;float: left;margin: 0 40px;}

.mainNav_ul .mainNav_ul_p .div_b{width:1px;height:90px;background: #ccc;float: left;margin-top:40px;}

.mainNav_ul .mainNav_ul_p .div_p_c .new{width:60px;height: 18px;border:1px solid #ff6a00;line-height: 20px;text-align: center;margin:10px auto;font-size: 12px;color:#ff6a00;}

.mainNav_ul .mainNav_ul_p .div_p_c img{margin:20px auto;display: block;}

.mainNav_ul .mainNav_ul_p .div_p_c .sp1{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#333;}

.mainNav_ul .mainNav_ul_p .div_p_c .sp2{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#ff6a00;}

.mainNav_ul .mainNav_ul_p .div_p_b{border-left: 1px solid #333;width: 2px;height:160px;float: left;}

/*商品详情*/

.detail_shop .detail_shop_s{

  width:100%;

  height:65px;

  background: #fff;

  border-top: 1px solid #ccc;

  position:absolute;

  left:0;

  box-shadow:0 2px 5px #e0e0e0;

}

.detail_shop .detail_shop_s .middle{

  width: 1226px;

  margin:0 auto;

}

.detail_shop .detail_shop_s .middle .left{

  line-height: 66px;

  float: left;

  font-size: 14px;

}

.detail_shop .detail_shop_s .middle .right{

  line-height: 66px;

  float:right;

  font-size: 14px;

}

.detail_shop .detail_shop_s .middle span{

  margin:0 10px;

  color:#616161;

}

.detail_shop .detail_shop_s .middle a:hover{

  color: #ff6700;

}


.detail_shop .detail_shop_l{

  width: 560px;

  height: 600px;

  margin-top:100px;

  float: left;

}


.detail_shop .detail_shop_r{

  width: 600px;

  margin-top:100px;

  float:right;

}

.detail_shop .detail_shop_r .chanpin h2{

  font-size: 28px;

  color: #000;

  font-weight: 100;

  font-family: Helvetica;

  line-height: 37px;

}

.detail_shop .detail_shop_r .chanpin p{

  font-size:14px;

  color: #aaa;

}

.detail_shop .detail_shop_r .chanpin span{

  font-size: 21px;

  color: #ff6700;

  font-weight: 100;

  line-height: 51px;

  display: block;

  border-bottom: 1px solid #ccc;

}

.detail_shop .detail_shop_r .adress{

  width: 538px;

  margin: 40px 0;

  border:1px solid #ccc;

  background: #fafafa;

  padding: 30px;

  font-size: 14px;

  color: #000;

}

.detail_shop .detail_shop_r .adress p{

  margin-bottom: 5px;

}

.detail_shop .detail_shop_r .adress i{

  margin-right: 5px;

  color: #ccc;

}

.detail_shop .detail_shop_r .adress a{

  color: #ff6700;

}

.detail_shop .detail_shop_r .adress span{

  color: #ff6700;

}


.detail_shop .detail_shop_r .select h2{

  font-size: 18px;

  color: #333;

  margin:20px 0;

  font-weight: 100;

}

.detail_shop .detail_shop_r .select .short_kuang,.detail_shop .detail_shop_r .select .color_kuang{

  width: 255px;

  height: 50px;

  border:1px solid #ccc;

  line-height:52px;

  padding:0 20px;

  float: left;

  margin:0 3px 3px 0;&am

Correcting teacher：天蓬老师Correction time：2019-09-29 19:36:31
Teacher's summary：完成的相当不错, 至少看上去如此, 还有, div中不要直接放文本, 这是很不好的习惯

Release Notes

Popular Entries