小米商城大框架布局+底部

Original 2019-05-08 08:52:59 468
abstract:我是比着现在的小米官网做的   可别小布局不太一样 html:<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=de

我是比着现在的小米官网做的   可别小布局不太一样 


html:


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="shortcut icon" type="image/x-icon" href="http://vip.io/top/MI_A/static/images/logo.png">

  <title>小米商城</title>

  <link rel="stylesheet" type="text/css" href="http://vip.io/top/MI_A/static/css/style.css">

  <link rel="stylesheet" type="text/css" href="http://vip.io/top/MI_A/static/font-awesome/css/font-awesome.min.css">

</head>

<body>

    <!-- 头部 -->

    <div>

      <div></div>

    </div>

    <!-- 主体 -->

    <div>

      <div>

        <div>图标 文字 搜索</div>

        <!-- 轮播图 左侧边栏 -->

        <div>

          <div class="bodyer_box_rotation_l fl"></div>

          <div class="bodyer_box_rotation_r fl"></div>

          <div></div>

        </div>

        <!-- 选购手机 企业团购 F码通道 -->

        <div>

          <div class="bodyer_box_picture_1 fl"></div>

          <div class="bodyer_box_picture_2 fl"><img src="http://vip.io/top/MI_A/static/images/pic01.jpg" alt="" width="320px"></div>

          <div class="bodyer_box_picture_2 fl"><img src="http://vip.io/top/MI_A/static/images/pic02.jpg" alt="" width="320px"></div>

          <div class="bodyer_box_picture_2 fl"><img src="http://vip.io/top/MI_A/static/images/pic03.jpg" alt="" width="320px"></div>

          <div></div>

        </div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct1.jpg" alt="" width="1226px"></div>

        <!-- 手机 查看全部 -->

        <div><span>手机</span><span>查看全部</span><span class="fa fa-chevron-circle-right fa-lg f_img"></span></div>

        <div>

          <div class="bodyer_box_word_pic_l fl"><img src="http://vip.io/top/MI_A/static/images/sjz1.jpg" alt=""width="235px"> </div>

          <div>

            <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/sjf1.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/sjf2.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/sjf3.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/sjf4.png" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/sjf5.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/sjf6.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/sjf7.jpg" alt=""width="235px"></div>

            <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/sjf8.jpg" alt=""width="235px"></div>

          </div>

          <div></div>

        </div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct2.jpg" alt="" width="1226px"></div>

        <div>家电 热门 电视影音 电脑 家居</div>

        <div>

          <div class="bodyer_box_word_pic_r fl"><img src="http://vip.io/top/MI_A/static/images/jdf01.jpg" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/jdf02.jpg" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/jdf03.png" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/jdf04.png" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12"><img src="http://vip.io/top/MI_A/static/images/jdf05.jpg" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_t_16"><img src="http://vip.io/top/MI_A/static/images/jdf06.jpg" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/jdf07.png" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/jdf08.jpg" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16"><img src="http://vip.io/top/MI_A/static/images/jdf09.png" alt=""width="235px"></div>

          <div class="bodyer_box_word_pic_r fl mar_l_12 mar_t_16">

            <div><img src="http://vip.io/top/MI_A/static/images/jdf10.jpg" alt=""width="235px"height="140px"></div>

            <div class="bodyer_box_word_pic_r_1 mar_t_16""></div>

          </div>

          <div></div>

        </div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct3.jpg" alt="" width="1226px"></div>

        <div>智能 查看全部</div>

        <div>智能图区</div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct4.jpg" alt="" width="1226px"></div>

        <div>搭配 查看全部</div>

        <div>搭配图区</div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct5.jpg" alt="" width="1226px"></div>

        <div>配件 查看全部</div>

        <div>配件图区</div>

        <!-- 长图 -->

        <div><img src="http://vip.io/top/MI_A/static/images/ct6.jpg" alt="" width="1226px"></div>

        <div>周边 查看全部</div>

        <div>周边图区</div>

        <div>为你推荐</div>

        <div>推荐图区</div>

        <div>热评产品</div>

        <div>推荐图区</div>

        <div>内容</div>

        <div>内容图区</div>

        <div>视频</div>

        <div>视频图区</div>

      </div>

    </div>

    <!-- 底部 -->

    <div class="bottom mar_t_16">

      <div>

        <div>

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

          <span class="f_color bor_l"><i class="fa fa-repeat"></i> 七天无理由退货</span>

          <span class="f_color bor_l"><i class="fa fa-refresh"></i> 15天免费换货</span>

          <span class="f_color bor_l"><i class="fa fa-birthday-cake"></i> 满150元包邮</span>

          <span class="f_color bor_l"><i class="fa fa-map-marker"></i> 520余家售后网点</span>

        </div>

        <div>

          <div class="bottom_box_2_l fl">

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">帮助中心</li>

              <li>账户管理</li>

              <li>购物指南</li>

              <li>订单操作</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">服务支持</li>

              <li>售后政策</li>

              <li>自助服务</li>

              <li>相关下载</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">线下门店</li>

              <li>小米之家</li>

              <li>服务网点</li>

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

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">关于小米</li>

              <li>了解小米</li>

              <li>加入小米</li>

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

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">关注我们</li>

              <li>新浪微博</li>

              <li>官方微信</li>

              <li>联系我们</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">特设服务</li>

              <li>F 码通道</li>

              <li>礼物码</li>

              <li>防伪查询</li>

            </ul>

            <div></div>

          </div>

          <div class="bottom_box_2_r fl bor_l">

            <p>400-100-5678</p>

            <p class="bottom_box_2_r_2 f_color">周一至周日 8:00-18:00</p>

            <p class="bottom_box_2_r_2 f_color">(仅收市话费)</p>

            <p><i class="fa fa-comment"></i> 联系客服</p>

          </div>

        </div>

        <div>

          <div class="mar_t_5 fl"><img src="http://vip.io/top/MI_A/static/images/logo.png" alt="" /></div>

          <div>

            <ul class="bottom_box_3_1 fl">

              <li>小米商城</li>

              <li>MIUI</li>

              <li>米家</li>

              <li>米聊</li>

              <li>多看</li>

              <li>游戏</li>

              <li>路由器</li>

              <li>米粉卡</li>

              <li>政企服务</li>

              <li>小米天猫店</li>

              <li>隐私政策</li>

              <li>商城用户协议</li>

              <li>账号协议</li>

              <li>问题反馈</li>

              <li>廉正举报</li>

              <li>诚信合规</li>

              <li>Select Region</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <span>©</span><li>mi.com</li>

              <span>京ICP证110507号</span><li>京ICP备10046444号</li>

              <li>京公网安备11010802020134号</li>

              <li>京网文[2017]1530-131号</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <li>(京)网械平台备字(2018)第00005号</li>

              <li>互联网药品信息服务资格证 (京) -非经营性-2014-0090</li>

              <li>营业执照</li>

              <li>医疗器械公告</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <li>增值电信业务许可证</li>

              <span>网络食品经营备案(京)【2018】WLSPJYBAHF-12</span><li>食品经营许可证</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <span>违法和不良信息举报电话:185-0130-1238</span>

              <li>知识产权侵权投诉</li><span>本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</span>

            </ul>

          </div>

          <div></div>

        </div>

        <div class="bottom_box_4 mar_t_5">

          <div><img src="http://vip.io/top/MI_A/static/images/db1.png" alt=""width="83px" /></div>

          <div><img src="http://vip.io/top/MI_A/static/images/db2.png" alt="" /></div>

          <div><img src="http://vip.io/top/MI_A/static/images/db3.png" alt="" /></div>

          <div><img src="http://vip.io/top/MI_A/static/images/db4.png" alt="" /></div>

        </div>

        <div class="bottom_box_5 f_color_1">

          探索黑科技,小米为发烧而生!

        </div>

      </div>

    </div>

</body>

</html>




css

/* -----------------------前期设置 -----------------------*/

  *{

    margin: 0;

    padding: 0;

  }

  /* 清除li标签样式 */

  li{

    list-style: none;

  }

  .fl{

    float: left;

  }

  .fr{

    float:right;

  }

  .clear{

    clear:both;

  }

  /* 图标颜色 */

  .f_img{

    color: #B0B0B0;

  }

  /* 图标反转 */

  .f_tran{

    transform: rotateY(180deg);

  }

  /* 字体颜色 灰 */

  .f_color{

    color: #616161;

  }

  .f_color_1{

    color: #B0B0B0;

  }

  /* 左边距 */

  .mar_l_12{

    margin-left: 12px;

  }

  /* 上边距 */

  .mar_t_16{

    margin-top: 16px;

  }

  .mar_t_5{

    margin-top: 5px;

  }

  /* 左边框显示 */

  .bor_l

  {

    border-left: 1px solid #E0E0E0;

  }

  .bor_l_1

  {

    border-left: 1px solid #616161;

  }

/* -----------------------头部----------------------- */

.header{

  width: 100%;

  height: 40px;

  background: #333333;

}

.header_box{

  width: 1226px;

  height: 40px;

  background: #ccc;

  margin: 0 auto;

}

/* -----------------------中部----------------------- */

.bodyer_box{

  width: 1226px;

  margin: 0 auto;

}

.bodyer_box_top{

  width: 1226px;

  height: 55px;

  background: pink;

  margin: 20px auto;

}

.bodyer_box_rotation{

  width: 1226px;

  height: 460px;

  background: pink;

  margin: 20px auto;

}

.bodyer_box_rotation_l{

  width: 235px;

  height: 460px;

  background: green;

}

.bodyer_box_rotation_r{

  width: 991px;

  height: 460px;

  background: red;

}

.bodyer_box_picture{

  width: 1226px;

  margin: 20px auto;

}

.bodyer_box_picture_1{

  width: 235px;

  height: 170px;

  background: green;

}

.bodyer_box_picture_2{

  width: 320px;

  height: 170px;

  margin-left: 10px;

}

.bodyer_box_img{

  width: 1226px;

  height: 120px;

  background: pink;

  margin: 20px auto;

}

.bodyer_box_word{

  width: 1226px;

  height: 70px;

  margin: 0 auto;

}

.bodyer_box_word_span_a{

  line-height: 70px;

  font-size: 20px;

  font-weight:bold;

  color: #333333;

}

.bodyer_box_word_span_b{

  line-height: 70px;

  font-size: 16px;

  color: #333333;

  margin-left: 1080px;

  margin-right: 10px;

}

.bodyer_box_word_pic{

  width: 1226px;

  margin: 0 auto;

}

.bodyer_box_word_pic_l{

  width: 235px;

  height: 615px;

}

.bodyer_box_word_pic_r{

  width: 235px;

  height: 300px;

}

.bodyer_box_word_pic_r_1{

  width: 235px;

  height: 140px;

}

.bodyer_box_word_pic_1{

  width: 1226px;

  height: 300px;

  background: pink;

  margin: 0 auto;

}

.bodyer_box_word_pic_2{

  width: 1226px;

  height: 415px;

  background: pink;

  margin: 0 auto;

}

.bodyer_box_word_pic_3{

  width: 1226px;

  height: 290px;

  background: pink;

  margin: 0 auto;

}

/* -----------------------底部----------------------- */

.bottom_box{

  width: 1226px;

  margin: 0 auto;

}

.bottom_box_1{

  height: 80px;

  line-height: 80px;

  font-size: 20px;

  border-bottom: 1px solid #E0E0E0;

}

.bottom_box_1 span{

  width: 240px;

  text-align:center;

  padding: 0 43px;

}

.bottom_box_2{

  height: 195px;

}

.bottom_box_2_l{

  width: 980px;

}

.bottom_box_2_l ul{

  width: 160px;

  margin-top: 40px;

}

.bottom_box_2_l ul li{

  margin-top: 10px;

  font-size: 10px;

}

.bottom_box_2_r{

  text-align: center;

  width: 240px;

  margin-top: 40px;

}

.bottom_box_2_r_1{

  font-size: 20px;

  color: #FF6700;

  margin-bottom: 15px;

}

.bottom_box_2_r_2{

  font-size: 10px;

}

.bottom_box_2_r_3{

  margin-top: 25px;

  display:inline-block;

  border: 1px solid #FF6700;

  color: #FF6700;

  font-size: 10px;

  padding: 7px 30px;

}

.bottom_box_3{

  margin-top: 40px;

}

.bottom_box_3_1{

  font-size: 10px;

  color: #616161;

  margin-left: 10px;

}

.bottom_box_3_1 li{

  float: left;

  margin-left: 4px;

  text-align: center;

  padding-left: 3px;

}

.bottom_box_3_2{

  font-size: 10px;

  color: #B0B0B0;

  margin-left: 10px;

  width: 800px;

}

.bottom_box_3_2 li{

  float: left;

}

.bottom_box_3_2 span{

  float: left;

}

.bottom_box_4{

  height: 40px;

  margin-left: 65px;

  width: 800px;

}

.bottom_box_5{

  width: 1200px;

  height: 50px;

  text-align: center;

  font-size: 20px;

  font-family: 楷体;

}


效果图:

1.png


2.png

3 - 副本.png


4.png

Correcting teacher:查无此人Correction time:2019-05-08 09:06:26
Teacher's summary:完成的不错。浏览器按F12可以查看html源码,跟小米官网对比下。就知道为什么不一样了。继续加油。

Release Notes

Popular Entries