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

小米商城大框架布局

original 2019-02-26 21:57:45 588
abstrait:總結(jié):只想說,布局真是一個體力活。好多還是得看老師的代碼。自己能力有限,,代碼:    html:<!DOCTYPE html><html><head>    <meta charset="utf-8">    

總結(jié):只想說,布局真是一個體力活。好多還是得看老師的代碼。自己能力有限,,

代碼:

    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" type="text/css" href="static/layui/css/layui.css">

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

    <link rel="stylesheet" type="text/css" href="static/css/style.css">

    <script type="text/javascript" src="static/layui/layui.js"></script>

</head>

<body>

    <!-- 頭部 -->

    <div class="header">

        <div class="menu"></div>

    </div>

    <!-- 主體部分 -->

    <div class="contents">

        <div class="content">

            <div class="content-menu"></div>

            <div class="content-Pic">

                <div class="content-Pic_l"></div>

                <div class="content-Pic_r"></div>

            </div>          

            <div class="content-picUl">

                <div class="content-picUl_1"></div>

                <div class="content-picUl_0" style="background:url(static/images/midAD1.jpg); margin-right: 13px;"></div>

                <div class="content-picUl_0" style="background:url(static/images/midAD2.jpg); margin-right: 13px;"></div>

                <div class="content-picUl_0" style="background:url(static/images/midAD3.jpg);"></div>

            </div>          

            <div class="content-shop">

                <h1 class="">小米閃購</h1>

                <div class="content-shop_l" style="margin-right:12.7px; border-top:1px solid red;"></div>

                <div class="content-shop_l" style="margin-right:12.7px;"></div>

                <div class="content-shop_l" style="margin-right:12.7px;"></div>

                <div class="content-shop_l" style="margin-right:12.7px;"></div>

                <div class="content-shop_l"></div>

            </div>


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


            <div class="content-img" style="background:url(static/images/longAD1.jpg);"></div>

            <div class="content-ul">手機(jī)</div>

            <div class="content-phone">

                <div class="content-phone_l"></div>

                <div class="content-phone_r">

                    <div style="margin-right:12.7px;"></div>

                    <div style="margin-right:12.7px;"></div>

                    <div style="margin-right:12.7px;"></div>

                    <div></div>

                    <div style="margin-right:12.7px; margin-top:12.7px;"></div>

                    <div style="margin-right:12.7px; margin-top:12.7px;"></div>

                    <div style="margin-right:12.7px; margin-top:12.7px;"></div>

                    <div style="margin-top:12.7px;"></div>

                </div>

            </div>

            <div class="content-img" style="background:url(static/images/longAD2.jpg);"></div>

            <div class="content-ul">智能</div>

            <div class="content-phone">

                <div class="content-phone_0" style="margin-right:12.7px; background:url(static/images/buy/智能AD1.jpg);"></div>

                <div class="content-phone_1" style="margin-right:12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px;"></div>

                <div class="content-phone_1" ></div>

                <div class="content-phone_0" style="margin-right:12.7px; margin-top: 12.7px;  background:url(static/images/buy/智能AD2.jpg);"></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_2" style="margin-top:12.7px;">

                    <div class="content-phone_1_t"></div>

                    <div class="content-phone_1_d"></div>

                </div>

            </div>

            <div class="content-img" style="background:url(static/images/longAD3.jpg);"></div>

            <div class="content-ul">家電</div>

            <div class="content-phone">

                <div class="content-phone_0" style="margin-right:12.7px; background:url(static/images/buy/家電AD1.jpg);"></div>

                <div class="content-phone_1" style="margin-right:12.7px;" ></div>

                <div class="content-phone_1" style="margin-right:12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px;"></div>

                <div class="content-phone_1" ></div>

                <div class="content-phone_0" style="margin-right:12.7px; margin-top: 12.7px;  background:url(static/images/buy/家電AD2.jpg);" ></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_1" style="margin-right:12.7px; margin-top: 12.7px;"></div>

                <div class="content-phone_2" style="margin-top:12.7px;">

                    <div class="content-phone_1_t"></div>

                    <div class="content-phone_1_d"></div>

                </div>

            </div>

            <div class="content-img" style="background:url(static/images/longAD4.jpg);"></div>

            


            

        </div>

    </div>

    <!-- 底部 -->

    <div class="footers">

        <div class="footer">

            <div class="footer-top_li">

                <div class="footer-top_li_1">

                    <a href="#"><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</a><span></span>

                    <a href="#"><i class="fa fa-rotate-right"></i>7天無理由退貨服務(wù)</a><span></span>

                    <a href="#"><i class="fa fa-refresh"></i>15天免費(fèi)換貨</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余家售后網(wǎng)點(diǎn)</a>

                </div>

                <span class="separate"></span>

                <div class="footer-top_li_2">

                    <div class="footer-top_li-a">

                        <dl>

                            <dt>幫助中心</dt>

                            <dd><a href="">賬戶管理</a> </dd>

                            <dd><a href="">購物指南</a> </dd>

                            <dd><a href="">訂單操作</a> </dd>

                        </dl>

                        <dl>

                            <dt>服務(wù)支持</dt>

                            <dd><a href="">售后政策</a></dd>

                            <dd><a href="">自動服務(wù)</a></dd>

                            <dd><a href="">相關(guān)下載</a></dd>

                        </dl>

                        <dl>

                            <dt>線下門店</dt>

                            <dd><a href="">小米之家</a></dd>

                            <dd><a href="">服務(wù)網(wǎng)點(diǎn)</a></dd>

                            <dd><a href="">授權(quán)體驗(yàn)店</a></dd>

                        </dl>

                        <dl>

                            <dt>關(guān)于小米</dt>

                            <dd><a href="">了解小米</a></dd>

                            <dd><a href="">加入小米</a></dd>

                            <dd><a href="">投資者關(guān)系</a></dd>

                        </dl>

                        <dl>

                            <dt>關(guān)注我們</dt>

                            <dd><a href="">新浪微博</a></dd>

                            <dd><a href="">官網(wǎng)微博</a></dd>

                            <dd><a href="">聯(lián)系我們</a></dd>

                        </dl>

                        <dl>

                            <dt>特色服務(wù)</dt>

                            <dd><a href="">F碼通道</a></dd>

                            <dd><a href="">禮物碼</a></dd>

                            <dd><a href="">防偽查詢</a></dd>

                        </dl>

                        <div class="connect">

                            <p class="telephone">Feir-520-1314</p>

                            <p class="time">周一至周日 8:00-18:00 <br>(僅收市話費(fèi))</p>

                            <button><span class="fa fa-commenting"></span> 聯(lián)系客服</button>

                        </div>

                    </div>

                    <div class="footer-top_li_b"></div>

                </div>

            </div>

        </div>

        <div class="footer-bottom">

            <div class="footer-bottom_li">

                <div class="footer-bottom_li_1">

                    <img src="static/images/footlogo.png" alt="" class="logoBottom">

                </div>

                <div class="footer-bottom_li_2">

                    <div class="footer-bottom_li_a">

                        <ul>

                            <li>小米商城<span></span></li>

                            <li>MIUI<span></span></li>

                            <li>米家<span></span></li>

                            <li>米聊<span></span></li>

                            <li>多看<span></span></li>

                            <li>游戲<span></span></li>

                            <li>路由器<span></span></li>

                            <li>米粉卡<span></span></li>

                            <li>政企服務(wù)<span></span></li>

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

                            <li>隱私政策<span></span></li>

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

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

                            <li>問題反饋<span></span></li>

                            <li>廉正舉報<span></span></li>

                            <li>誠信合規(guī)<span></span></li>

                            <li>Select Region</li>

                        </ul>

                    </div>

                    <div class="footer-bottom_li_b">

                        <a href="">&copy;mi.com</a>

                        京ICP證110507號

                        <a href="">京ICP備10046444號</a>

                        <a href="">京公網(wǎng)安備11010802020134號</a>

                        <a href="//www.mi.com/culture-license/" target="_blank">京網(wǎng)文[2017]1530-131號</a> <br>

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

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

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

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

                        <a >增值電信業(yè)務(wù)許可證</a>&nbsp;

                        網(wǎng)絡(luò)食品經(jīng)營備案(京)【2018】WLSPJYBAHF-12  &nbsp;

                        <a >食品經(jīng)營許可證</a>

                        <br>

                        違法和不良信息舉報電話:185-0130-1238,本網(wǎng)站所列數(shù)據(jù),除特殊說明,所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測試

                    </div>

                </div>

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

                <div class="footer-bottom_li_3">

                    <img src="static/images/footericon1.png" alt="" class="icon" style="height:27px; width:83px; ">

                    <img src="static/images/footericon2.png" alt="" class="icon" style="height:27px; width:83px; ">

                    <img src="static/images/footericon3.png" alt="" class="icon" style="height:27px; width:83px; ">

                    <img src="static/images/footericon4.png" alt="" class="icon" style="height:27px; width:83px; ">

                    <img src="static/images/footericon5.png" alt="" class="icon" style="height:27px; width:83px; ">

                </div>

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

                <div class="footer-bottom_li_4">

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

                </div>

            </div>


        </div>

        

        <div>


        </div>

    </div>

</body>

</html>

 CSS:

*{margin:0px; padding:0px;}

list{list-style:none;}

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

.clear{clear:both;}

/* 頭部樣式 */

.header{

background:#333333; height:40px; width:100%;

}

.menu{

background-color:#ccc; height:40px; width:1226px; margin: 0px auto;

}


/* 主體部分樣式 */

.content{

width:1226px;

/* height:500px; */

margin:0px auto;

}

.content-menu{

background: #ffe411;

height:90px;

margin:10px auto;

}

.content-Pic{

/* background: #ffe411;  */

height:480px;

margin:10px auto;

}

.content-Pic_l{

width:246px; height: 480px; background: #ccc; float:left;

}

.content-Pic_r{

width:980px; height:480px; background: blue; float: left;

}

.content-picUl{

/* background: #ffe411;  */

height:180px;

margin:10px auto;

}

.content-picUl_1{

width:235px; background: #5f5750; height:170px; margin-right: 13px; float:left;

}

.content-picUl_0{

width:317px; height:170px; float: left;

}

/* 小米閃購 */

.content-shop{

/* background: #ffe411;  */

height:340px;

margin:10px auto;

}

.content-shop_l{

width:235px; height:340px; background: #ccc; float:left;

}

.content-img{

background: #ffe411;

height:100px;

margin:10px auto;

}

.content-ul{

background: #ffe411;

height:80px;

margin:10px auto;

}

.content-phone{

/* background: #ffe411;  */

height:614px;

margin:10px auto;

}


.content-phone_l{

height:614px; width:234px; background:url(../images/buy/手機(jī)AD.jpg); float:left; margin-right: 12px;

}

.content-phone_r{

height:614px; width:980px; float:left;

}

.content-phone_r div{

height:300px; width:235px;  background:#ccc; float:left;

}

.content-phone_0, .content-phone_1{

height:300px; width:235px; background: #ccc; float:left;

}

.content-phone_1_t, .content-phone_1_d{

height:145px; width:235px; background: #ccc;

}

.content-phone_1_d{

margin-top: 10px;

}

.content-phone_2{

float:left;

}

/* 網(wǎng)頁底部 */

.footers{

/* background-color:#ccc; */

width:1226px;

height:100px;

margin:10px auto;

}

.footer-top_li_1{

width: 1226px; height:80px; line-height: 80px; text-align: center;

}

.footer-top_li_1 a{

font-size:16px; color:#616161; font-weight:300;

}

.footer-top_li_1 a:hover{

color:#ff6700;

}

.footer-top_li_1 a i{

font-size: 20px; margin-right:10px;

}

.footer-top_li_1 span{

font-size:20px; color:#616161; border-left:1px solid #e0e0e0; margin:0px 56px;

}

.separate{

width:1226px; border-bottom:1px solid #e0e0e0; display:block;

}


.footer-top_li_2{

width:1226px; height: 100px; margin:40px 0px;

}

.footer-top_li-a dl{

float:left; width:160px; display: block;

}

<

Professeur correcteur:滅絕師太Temps de correction:2019-02-27 09:18:52
Résumé du professeur:布局比較考驗(yàn)?zāi)托?邏輯理順了就是體力活了,可以多練習(xí)幾個頁面!

Notes de version

Entrées populaires