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: 楷體;
}
效果圖:
Correcting teacher:查無此人Correction time:2019-05-08 09:06:26
Teacher's summary:完成的不錯。瀏覽器按F12可以查看html源碼,跟小米官網(wǎng)對比下。就知道為什么不一樣了。繼續(xù)加油。