亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

Original 2019-05-08 08:52:59 487
abstract:我是比著現(xiàn)在的小米官網(wǎng)做的   可別小布局不太一樣 html:<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=de

我是比著現(xiàn)在的小米官網(wǎng)做的   可別小布局不太一樣 


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>圖標(biāo) 文字 搜索</div>

        <!-- 輪播圖 左側(cè)邊欄 -->

        <div>

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

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

          <div></div>

        </div>

        <!-- 選購手機(jī) 企業(yè)團(tuán)購 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>

        <!-- 手機(jī) 查看全部 -->

        <div><span>手機(jī)</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>智能圖區(qū)</div>

        <!-- 長圖 -->

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

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

        <div>搭配圖區(qū)</div>

        <!-- 長圖 -->

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

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

        <div>配件圖區(qū)</div>

        <!-- 長圖 -->

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

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

        <div>周邊圖區(qū)</div>

        <div>為你推薦</div>

        <div>推薦圖區(qū)</div>

        <div>熱評產(chǎn)品</div>

        <div>推薦圖區(qū)</div>

        <div>內(nèi)容</div>

        <div>內(nèi)容圖區(qū)</div>

        <div>視頻</div>

        <div>視頻圖區(qū)</div>

      </div>

    </div>

    <!-- 底部 -->

    <div class="bottom mar_t_16">

      <div>

        <div>

          <span><i class="fa fa-wrench f_tran"></i> 預(yù)約維修服務(wù)</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天免費(fèi)換貨</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余家售后網(wǎng)點(diǎn)</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">服務(wù)支持</li>

              <li>售后政策</li>

              <li>自助服務(wù)</li>

              <li>相關(guān)下載</li>

            </ul>

            <ul>

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

              <li>小米之家</li>

              <li>服務(wù)網(wǎng)點(diǎn)</li>

              <li>授權(quán)體驗(yàn)店</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">關(guān)于小米</li>

              <li>了解小米</li>

              <li>加入小米</li>

              <li>投資者關(guān)系</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">關(guān)注我們</li>

              <li>新浪微博</li>

              <li>官方微信</li>

              <li>聯(lián)系我們</li>

            </ul>

            <ul>

              <li style="margin-bottom:30px;font-size: 15px">特設(shè)服務(wù)</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">(僅收市話費(fèi))</p>

            <p><i class="fa fa-comment"></i> 聯(lián)系客服</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>政企服務(wù)</li>

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

              <li>隱私政策</li>

              <li>商城用戶協(xié)議</li>

              <li>賬號協(xié)議</li>

              <li>問題反饋</li>

              <li>廉正舉報</li>

              <li>誠信合規(guī)</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>京公網(wǎng)安備11010802020134號</li>

              <li>京網(wǎng)文[2017]1530-131號</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <li>(京)網(wǎng)械平臺備字(2018)第00005號</li>

              <li>互聯(lián)網(wǎng)藥品信息服務(wù)資格證 (京) -非經(jīng)營性-2014-0090</li>

              <li>營業(yè)執(zhí)照</li>

              <li>醫(yī)療器械公告</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <li>增值電信業(yè)務(wù)許可證</li>

              <span>網(wǎng)絡(luò)食品經(jīng)營備案(京)【2018】WLSPJYBAHF-12</span><li>食品經(jīng)營許可證</li>

            </ul>

            <ul class="bottom_box_3_2 fl">

              <span>違法和不良信息舉報電話:185-0130-1238</span>

              <li>知識產(chǎn)權(quán)侵權(quán)投訴</li><span>本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測試</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">

          探索黑科技,小米為發(fā)燒而生!

        </div>

      </div>

    </div>

</body>

</html>




css

/* -----------------------前期設(shè)置 -----------------------*/

  *{

    margin: 0;

    padding: 0;

  }

  /* 清除li標(biāo)簽樣式 */

  li{

    list-style: none;

  }

  .fl{

    float: left;

  }

  .fr{

    float:right;

  }

  .clear{

    clear:both;

  }

  /* 圖標(biāo)顏色 */

  .f_img{

    color: #B0B0B0;

  }

  /* 圖標(biāo)反轉(zhuǎn) */

  .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源碼,跟小米官網(wǎng)對比下。就知道為什么不一樣了。繼續(xù)加油。

Release Notes

Popular Entries