碼上歡樂
相關內容    簡體    繁體

HTML5學習總結——相關練習與項目

本文轉載自   查看原文   2016-12-03 20:05   2130    前端

一.小米商城項目

　第一天示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
<div id="container">
    <div id="header">
        <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戲</a><span>|</span><a>多看閱讀</a><span>|</span><a>雲服務</a><span>|</span><a>金融</a><span>|</span><a>小米網移動版</a><span>|</span><a>問題反饋</a><span>|</span><a>Select Region</a></div>
        <div id="header_right">
            <a>登錄</a><span>|</span><a>注冊</a><span>|</span><a>消息通知</a>
            <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>購物車(10)</div>
        </div>
        <div id="header_button">
            <div id="left_cla">
                <img src="img/Login.png">
            </div>
            <div id="center_cla">
                 <ul>
                     <li>小米手機</li>
                     <li>紅米</li>
                     <li>平板 筆記本</li>
                     <li>電視</li>
                     <li>盒子 影音</li>
                     <li>路由器</li>
                     <li>智能硬件</li>
                     <li>服務</li>
                     <li>社區</li>
                 </ul>
            </div>
            <div id="right_cla">
                <div id="spa">
                    <input type="text">
                    <div class="span">
                        <span class="glyphicon glyphicon-search"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="center">
        <div id="main">
            <div id="main-inner">

            </div>
        </div>
    </div>
</div>
</body>
</html>

運行效果：

 第二天示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css" />
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <script src="myjs.js"></script>
</head>
<body>
<div id="container">
    <div id="header">
        <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戲</a><span>|</span><a>多看閱讀</a><span>|</span><a>雲服務</a><span>|</span><a>金融</a><span>|</span><a>小米網移動版</a><span>|</span><a>問題反饋</a><span>|</span><a>Select Region</a></div>
        <div id="header_right">
            <a>登錄</a><span>|</span><a>注冊</a><span>|</span><a>消息通知</a>
            <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>購物車(10)</div>
        </div>
        <div id="header_button">
            <div id="left_cla">
                <img src="img/Login.png">
            </div>
            <div id="center_cla">
                 <ul>
                     <li>小米手機</li>
                     <li>紅米</li>
                     <li>平板 筆記本</li>
                     <li>電視</li>
                     <li>盒子 影音</li>
                     <li>路由器</li>
                     <li>智能硬件</li>
                     <li>服務</li>
                     <li>社區</li>
                 </ul>
            </div>
            <div id="right_cla">
                <div id="spa">
                    <input type="text">
                    <div class="span">
                        <span class="glyphicon glyphicon-search"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="center">
        <div id="center_img">
            <img id="img" width="100%" height="506" onclick="lcl()"src="img/1.jpg"/>
        </div>
        <div id="main">
            <div id="main_top">
                <div id="main_top1">
                    <div id="font1"><span class="glyphicon glyphicon-phone"></span><br>選購手機</div>
                    <div id="font2"><span class="glyphicon glyphicon-gift"></span><br>企業團購</div>
                    <div id="font3"><span class="glyphicon glyphicon-refresh"></span><br>官方產品</div>
                    <div id="font4"><span class="glyphicon glyphicon-file"></span><br>小米移動</div>
                    <div id="font5"><span class="glyphicon glyphicon-gift"></span><br>以舊換新</div>
                    <div id="font6"><span class="glyphicon glyphicon-gift"></span><br>話費充值</div>

                </div>
                <div id="main_top2"><img src="images/top1.jpg"></div>
                <div id="main_top3"><img src="images/top2.jpg"></div>
                <div id="main_top4"><img src="images/top3.jpg"></div>
            </div>
            <div id="main-inner">
                    <!--小米明星單品-->
                <div id="main-inner_dao">
                    <div class="cla_left">小米明星單片</div>
                    <div class="cla_right">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </div>
                </div>

                <div id="main-inner_center">
                    <div id="main-inner1"><img src="images/c1.png"><br>
                        <p class="p1"> 小米5s Plus</p>
                        <p class="p2">5.7英寸大屏雙攝手機，拍照黑科技</p>
                        <p class="p3">  2299元起</p>
                    </div>
                    <div id="main-inner2"><img src="images/c2.png">
                        <p class="p1"> 紅米Pro 十核雙攝</p>
                        <p class="p2">雙攝像頭手機，像單反一樣去拍照</p>
                        <p class="p3">  1099元起</p>
                    </div>
                    <div id="main-inner3"><img src="images/c3.png">
                        <p class="p1"> 小米Max</p>
                        <p class="p2">享花唄分期，最高享 12 期</p>
                        <p class="p3">  1799元</p>
                    </div>
                    <div id="main-inner4"><img src="images/c4.png">
                        <p class="p1"> 小米筆記本</p>
                        <p class="p2">獨立顯卡、超輕薄、金屬機身</p>
                        <p class="p3">  3499元</p>
                    </div>
                    <div id="main-inner5"><img src="images/c5.png">
                        <p class="p1"> 小米平板2 16GB現貨</p>
                        <p class="p2">輕薄全金屬，海量內容</p>
                        <p class="p3">  999元</p>
                    </div>
                </div>

             <!--智能硬件部分-->
                <div id="main-inner_dao2">
                    <div class="cla_left zhi" >智能硬件</div>
                    <div class="cla_right">
                        <span class="spa1">查看全部</span>
                        <span class="glyphicon glyphicon-circle-arrow-right"></span>
                    </div>
                </div>

                <div id="main-inner_center2">
                    <div class="center2_left"><img src="images/z1.jpg"></div>
                    <div class="center2_right">
                        <div ><img src="images/z2.jpg"><br>
                            <p class="p1"> 小米路由器3C</p>
                            <p class="p2">APP智能控制，安全防蹭網</p>
                            <p class="p3">  99元</p>
                        </div>
                        <div ><img src="images/z3.jpg"><br>
                            <p class="p1"> 小米手環2</p>
                            <p class="p2">OLED 顯示屏幕，升級計步算法</p>
                            <p class="p3">  1299元</p>
                        </div>
                        <div ><img src="images/z4.jpg"><br>
                            <p class="p1"> 小米凈水器（廚上式）</p>
                            <p class="p2">限量送 TDS 檢測筆</p>
                            <p class="p3">  2299元起</p>
                        </div>
                        <div ><img src="images/z5.jpg"><br>
                            <p class="p1"> 米家IH電飯煲</p>
                            <p class="p2">IH 電磁環繞加熱，多功能智能電飯煲</p>
                            <p class="p3">  399元</p>
                        </div>
                        <div ><img src="images/z6.png"><br>
                            <p class="p1"> 米家掃地機器人</p>
                            <p class="p2">遠程智能控制，掃得干凈掃得快</p>
                            <p class="p3">  1699元</p>
                        </div>
                        <div ><img src="images/z7.jpg"><br>
                            <p class="p1"> 九號平衡車</p>
                            <p class="p2">年輕人的酷玩具，騎行遙控兩種玩法</p>
                            <p class="p3">  1999元</p>
                        </div>
                        <div ><img src="images/z8.jpg"><br>
                            <p class="p1"> 米家小白智能攝像機</p>
                            <p class="p2">360度全景拍攝，雙向語音通話</p>
                            <p class="p3">  399元</p>
                        </div>
                        <div ><img src="images/z9.jpg"><br>
                            <p class="p1"> 米兔兒童手表Q</p>
                            <p class="p2">11 重安全設計，五重精准定位</p>
                            <p class="p3">  299元</p>
                        </div>
                    </div>
                </div>

                <!--搭配部分-->
                <div id="main-inner_dao3">
                    <div class="cla_left da" >搭配</div>
                    <div class="cla_right">
                        <span class="spa1">
                            <a class="span1"> 熱門</a>
                            <a class="span2"> 耳機音箱</a>
                            <a class="span3"> 電源</a>
                            <a class="span4"> 電池</a>
                            <a class="span5"> 存儲卡</a>
                        </span>
                    </div>
                </div>

                <div id="main-inner_center3">
                   
            </div>
        </div>
    </div>
</div>
<script>

</script>
</body>
</html>

 

CSS樣式：

*{
    padding: 0;
    margin: 0;
}
body{
    border: solid gold 1px;
}
#container{
    width: 100%;
    border: 1px solid red;
}
/*這里是頭部導航*/
#header{
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #333333;
    font-family: 'Heiti SC', 'Microsoft YaHei';
    display: inline-block;
    font-size: 13px;
}
#header #header_left{
    float: left;
}
#header #header_left a{
    margin-right: 7px;
    margin-left: 7px;
    cursor:pointer;
    color: #b0b0b0;
    text-decoration: none;
}
#header #header_left a:hover{
    color: white;
}
#header #header_left span{
    width: 50%;
    color: #424242;
}
#header #header_right{
    float: right;
    text-align: center;
}
#header #header_right a{
    text-decoration: none;
    margin-right: 7px;
    margin-left: 7px;
    cursor:pointer;
    color: #b0b0b0;
}
#header #header_right a:hover{
    color: white;
}
#header #header_right span{
    width: 50%;
    color: #b0b0b0;
}
#header #header_right .shopping{
    width: 173px;
    background: #424242;
    float: right;
    color: #b0b0b0;
    cursor:pointer;
}
#header #header_right .shopping span{
    font-size: 17px;
    width: 24px;
}
#header #header_right .shopping:hover{
    background: white;
    color: #ff6700;
}

/*頭部下面寬點的白色導航*/
#header_button{
    display: inline-block;
    width: 100%;
    height: 120px;
}
#left_cla{
    width: 14.5%;
    display: inline-block;
    float: left;
    line-height: 130px;
}
#left_cla img{
    width: 26%;
    height: 26%;
}
#center_cla{
    width: 57%;

    display: inline-block;
    float: left;
    line-height: 130px;
}
#header_button #center_cla ul{

}
#header_button #center_cla li{
    cursor:pointer;
    list-style: none;
    float: left;
    margin-left: 30px;
    font-size: 17px;
}
#header_button #center_cla li:hover{
    color: #ef5b00;
}
#header_button #right_cla {
    display: inline-block;
    float: left;
    line-height: 130px;
    margin-left: 47px;
    width: 25%;
    opacity: 0.6;
    overflow: hidden;transition: background 0.3s;
}
#header_button #right_cla:hover{opacity: 1;transition: background 0.3s;}
#spa{
    width: 100%;
    height: 60px;
    margin-top: 37px;
    float: left;

}
#header_button #right_cla input{
    width: 80%;
    height: 55px;
    display: inline-block;
    float: left;
}
#header_button #right_cla .span{
    transition: background 0.3s;
    width: 20%;
    height: 55px;
    margin-left: -1px;
    float: left;
    color: #b0b0b0;
}
#header_button #right_cla .span:hover{
    transition: background 0.3s;
    background: #ef5b00;
}
#header_button #right_cla span{
    margin-top: 20px;
    margin-left: 22px;
    font-size: 18px;
    float: left;
    color: #616161;
}
#header_button #right_cla span:hover{
    color: #fff;
}
#main{
    width: 100%;
}
/*中間那4個盒子的*/

#main_top{
    margin-top: 40px;
    width: 100%;
    height: 178px;

    display: inline-block;
    }
#main_top1{
    background: #5f5750;
}
#main_top div{
    width:23%;
    height: 178px;
    margin: 0 15px 0 11px;
    float: left;
}
#main_top div img{
    width:100%;
    height: 178px;
}

#main_top1 div{
    text-align: center;
    width: 33.3%;
    height: 50%;
    color: #cacdc8;
    padding-top: 26px;
    margin: 0;
    cursor:pointer;
    font-family: 'Heiti SC', 'Microsoft YaHei';
}
#main_top1 div:hover{
    color: white;
}

/*小米明星單品*/
#main-inner{
    width:100%;
    height: 423px;
}
#main-inner_dao{
    width: 100%;
    height: 40px;
    font-family: 'Heiti SC', 'Microsoft YaHei';
    font-size: 25px;
}
#main-inner .cla_left{
    float: left;
}#main-inner .cla_right{
    color: #b0b0b0;
     float: right;
    margin-right: 18px;
    font-size: 16px;
     cursor:pointer;
    display: inline-block;
 }
#main-inner_center{
    display: inline-block;
    width: 100%;
    height: 375px;
}
#main-inner_center div{
    width: 18%;
    height: 375px;
    background: #fafafa;
    float: left;
    margin-right: 10px;
    margin-left: 15px;
}
#main-inner_center div img{
    margin-left: 33px;
    height: 45%;
    width: 70%;
}
#main-inner #main-inner1{
    border-top: #ffac13 1px solid;
}

#main-inner #main-inner2{
    border-top: #83c44e 1px solid;
}

#main-inner #main-inner3{
    border-top: #2196f3 1px solid;
}

#main-inner #main-inner4{
    border-top: #e53915 1px solid;
}

#main-inner #main-inner5{
    border-top: #00c0a5 1px solid;
}
#main-inner_center div p{
    text-align: center;
    width: 250px;
    font-size: 15px;
    font-family: 'Heiti SC', 'Microsoft YaHei';
}
 .p1{

}
 .p2{
    font-size: 14px;
    color: #b0b0b0;
}
.p3{
    color: #ef5b00;
}



/*智能硬件部分*/
#main-inner_dao2{
    font-family: 'Heiti SC', 'Microsoft YaHei';
    font-size: 15px;
    padding-top: 100px;
    width: 100%;
    height: 132px;
    background: #f5f5f5;
}
.zhi{
    font-size: 23px;
}
#main-inner_dao2 .spa1{
    color: #0f0f0f;
}
#main-inner_center2{
    width: 100%;
    height: 712px;
    background: #f5f5f5;
}
.center2_left{
    width: 16.6%;
    height: 100%;
    float: left;
}
.center2_left img{
    height: 98%;
}
.center2_right{
    margin-top: -35px;
    width: 80.2%;
    height: 100%;
    margin-left: 40px;
    float: left;
}
.center2_right div{
    text-align: center;
    float: left;
    width: 23%;
    height: 329px;
    margin-top: 35px;
    background: white;
    margin-right: 9px;
    margin-left: 12px;
}
.center2_right div img{
    height: 43%;
    width: 73%;
    margin-bottom: 49px;
}

.center2_right div p{
    text-align: center;
    width: 250px;
    font-size: 15px;
    font-family: 'Heiti SC', 'Microsoft YaHei';
}
/*搭配部分*/
#main-inner_dao3{
    font-family: 'Heiti SC', 'Microsoft YaHei';
    font-size: 15px;
    padding-top: 50px;
    width: 100%;
    height: 102px;
    background: #f5f5f5;
    color:black;
}
.da{
    font-size: 26px;
}
#main-inner_dao3 a{
    margin-left: 15px;
    font-size: 20px;
    color: black;
}
#main-inner_dao3 a:hover{
    text-decoration: blink;
    color: #ff6700;
}
#main-inner_center3 {
    width: 100%;
    height: 712px;
    background: #f5f5f5;
    border: 1px solid slateblue;
}

.center3_left{
    width: 16.6%;
    height: 100%;
    float: left;
}
.center3_right{
    width: 80.2%;
    height: 100%;
    float: left;
    margin-left: 10px;
    border: 1px solid brown;
}
.center3_right div{
    text-align: center;
    float: left;
    width: 23%;
    height: 329px;
    margin-top: 35px;
    background: #f5f5f5;
    margin-right: 9px;
    margin-left: 12px;
}

 

運行效果：

　　

 

前段部分基本完工：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css" />
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <script src="myjs.js"></script>
</head>
<body>
<div id="container">
    <div id="header">
        <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戲</a><span>|</span><a>多看閱讀</a><span>|</span><a>雲服務</a><span>|</span><a>金融</a><span>|</span><a>小米網移動版</a><span>|</span><a>問題反饋</a><span>|</span><a>Select Region</a></div>
        <div id="header_right">
            <a>登錄</a><span>|</span><a>注冊</a><span>|</span><a>消息通知</a>
            <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>購物車(10)</div>
        </div>
        <div id="header_button">
            <div id="left_cla">
                <img src="img/Login.png">
            </div>
            <div id="center_cla">
                 <ul>
                     <li>小米手機</li>
                     <li>紅米</li>
                     <li>平板 筆記本</li>
                     <li>電視</li>
                     <li>盒子 影音</li>
                     <li>路由器</li>
                     <li>智能硬件</li>
                     <li>服務</li>
                     <li>社區</li>
                 </ul>
            </div>
            <div id="right_cla">
                <div id="spa">
                    <input type="text">
                    <div class="span">
                        <span class="glyphicon glyphicon-search"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="center">
        <div id="center_img">
            <img id="img" width="100%" height="506" onclick="lcl()"src="img/1.jpg"/>
        </div>
        <div id="main">
            <div id="main_top">
                <div id="main_top1">
                    <div id="font1"><span class="glyphicon glyphicon-phone"></span><br>選購手機</div>
                    <div id="font2"><span class="glyphicon glyphicon-gift"></span><br>企業團購</div>
                    <div id="font3"><span class="glyphicon glyphicon-refresh"></span><br>官方產品</div>
                    <div id="font4"><span class="glyphicon glyphicon-file"></span><br>小米移動</div>
                    <div id="font5"><span class="glyphicon glyphicon-gift"></span><br>以舊換新</div>
                    <div id="font6"><span class="glyphicon glyphicon-gift"></span><br>話費充值</div>

                </div>
                <div id="main_top2"><img src="images/top1.jpg"></div>
                <div id="main_top3"><img src="images/top2.jpg"></div>
                <div id="main_top4"><img src="images/top3.jpg"></div>
            </div>
            <div id="main-inner">
                    <!--小米明星單品-->
                <div id="main-inner_dao">
                    <div class="cla_left">小米明星單片</div>
                    <div class="cla_right">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </div>
                </div>

                <div id="main-inner_center">
                    <div class="main-inner1"><img src="images/c1.png"><br>
                        <p class="p1"> 小米5s Plus</p>
                        <p class="p2">5.7英寸大屏雙攝手機，拍照黑科技</p>
                        <p class="p3">  2299元起</p>
                    </div>
                    <div class="main-inner2"><img src="images/c2.png">
                        <p class="p1"> 紅米Pro 十核雙攝</p>
                        <p class="p2">雙攝像頭手機，像單反一樣去拍照</p>
                        <p class="p3">  1099元起</p>
                    </div>
                    <div class="main-inner3"><img src="images/c3.png">
                        <p class="p1"> 小米Max</p>
                        <p class="p2">享花唄分期，最高享 12 期</p>
                        <p class="p3">  1799元</p>
                    </div>
                    <div class="main-inner4"><img src="images/c4.png">
                        <p class="p1"> 小米筆記本</p>
                        <p class="p2">獨立顯卡、超輕薄、金屬機身</p>
                        <p class="p3">  3499元</p>
                    </div>
                    <div class="main-inner5"><img src="images/c5.png">
                        <p class="p1"> 小米平板2 16GB現貨</p>
                        <p class="p2">輕薄全金屬，海量內容</p>
                        <p class="p3">  999元</p>
                    </div>
                </div>

             <!--智能硬件部分-->
                <div id="main-inner_dao2">
                    <div class="cla_left zhi" >智能硬件</div>
                    <div class="cla_right">
                        <span class="spa1">查看全部</span>
                        <span class="glyphicon glyphicon-circle-arrow-right"></span>
                    </div>
                </div>

                <div id="main-inner_center2">
                    <div class="center2_left"><img src="images/z1.jpg"></div>
                    <div class="center2_right">
                        <div ><img src="images/z2.jpg"><br>
                            <p class="p1"> 小米路由器3C</p>
                            <p class="p2">APP智能控制，安全防蹭網</p>
                            <p class="p3">  99元</p>
                        </div>
                        <div ><img src="images/z3.jpg"><br>
                            <p class="p1"> 小米手環2</p>
                            <p class="p2">OLED 顯示屏幕，升級計步算法</p>
                            <p class="p3">  1299元</p>
                        </div>
                        <div ><img src="images/z4.jpg"><br>
                            <p class="p1"> 小米凈水器（廚上式）</p>
                            <p class="p2">限量送 TDS 檢測筆</p>
                            <p class="p3">  2299元起</p>
                        </div>
                        <div ><img src="images/z5.jpg"><br>
                            <p class="p1"> 米家IH電飯煲</p>
                            <p class="p2">IH 電磁環繞加熱，多功能智能電飯煲</p>
                            <p class="p3">  399元</p>
                        </div>
                        <div ><img src="images/z6.png"><br>
                            <p class="p1"> 米家掃地機器人</p>
                            <p class="p2">遠程智能控制，掃得干凈掃得快</p>
                            <p class="p3">  1699元</p>
                        </div>
                        <div ><img src="images/z7.jpg"><br>
                            <p class="p1"> 九號平衡車</p>
                            <p class="p2">年輕人的酷玩具，騎行遙控兩種玩法</p>
                            <p class="p3">  1999元</p>
                        </div>
                        <div ><img src="images/z8.jpg"><br>
                            <p class="p1"> 米家小白智能攝像機</p>
                            <p class="p2">360度全景拍攝，雙向語音通話</p>
                            <p class="p3">  399元</p>
                        </div>
                        <div ><img src="images/z9.jpg"><br>
                            <p class="p1"> 米兔兒童手表Q</p>
                            <p class="p2">11 重安全設計，五重精准定位</p>
                            <p class="p3">  299元</p>
                        </div>
                    </div>
                </div>

                <!--搭配部分-->
                <div id="main-inner_dao3">
                    <div class="cla_left da" >搭配</div>
                    <div class="cla_right">
                        <span class="spa1">
                            <a class="span1"> 熱門</a>
                            <a class="span2"> 耳機音箱</a>
                            <a class="span3"> 電源</a>
                            <a class="span4"> 電池</a>
                            <a class="span5"> 存儲卡</a>
                        </span>
                    </div>
                </div>

                <div id="main-inner_center3">
                    <div class="center3_left">
                        <div class="im1">
                            <img src="images/d1.jpg">
                        </div>
                        <div class="im1 im2">
                            <img src="images/d2.jpg">
                        </div>
                    </div>
                    <div class="center3_right">
                        <div class="box"><img src="images/d3.jpg"><br>
                            <p class="p1"> SanDisk  16GB高速存儲卡</p>
                            <p class="p2">399元</p>
                            <p class="p3">5677人評價</p>
                            <div class="foot"><div>讀寫很快！很好用！<p>來自於<span>@永不言畏</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/d4.jpg"><br>
                            <p class="p1"> 原裝快充套餐</p>
                            <p class="p2">58元</p>
                        </div>
                        <div class="box"><img src="images/d5.jpg"><br>
                            <p class="p1"> 彩虹5好電池（10粒裝）</p>
                            <p class="p2">9.9元</p>
                            <div class="foot">
                                <div>彩虹的電量，彩虹的心情，彩虹的每一天。<p>來自於<span>@最愛你的HYU</span>的評價</p></div>
                            </div>
                        </div>
                        <div class="box"><img src="images/d6.jpg"><br>
                            <p class="p1"> 彩虹7好電池（10粒裝）</p>
                            <p class="p2">9.9元</p>
                            <div class="foot"><div>好用，好看。。價格實惠<p>來自於<span>天堂愛</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/d7.jpg"><br>
                            <p class="p1"> SanDisk  16GB高速存儲卡（Class）</p>
                            <p class="p2">31.9元</p>
                            <div class="foot"><div>物美價廉，正品新貨，發貨迅速<p>來自於<span>surtter</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/d8.jpg"><br>
                            <p class="p1"> 鎳氫充電電池套裝</p>
                            <p class="p2">88元 98元</p>
                        </div>
                        <div class="box"><img src="images/d9.jpg"><br>
                            <p class="p1"> 小米車載充電器</p>
                            <p class="p2">49.9元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>

                        </div>
                        <div class="last1 boxx">
                            <div class="L1 x1">
                                <span >
                                    <p class="p2"> 米兔手機U盤...</p>
                                     <p class="p3">49.9元</p>
                                </span>
                                <img src="images/d10.jpg">
                            </div>
                            <div class="L2 x1">
                                <span >
                                    <p class="p2"> 瀏覽更多</p>
                                     <p class="p3">電池存儲卡</p>
                                </span>
                                <div >
                                    <img src="img/1right.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!--配件部分內容-->
                <div id="main-inner_dao4">
                    <div class="cla_left da" >配件</div>
                    <div class="cla_right">
                        <span class="spa1">
                            <a class="span1"> 熱門</a>
                            <a class="span2"> 保護套</a>
                            <a class="span3"> 貼膜</a>
                            <a class="span5"> 其他配件</a>
                        </span>
                    </div>
                </div>

                <div id="main-inner_center4">
                    <div class="center3_left">
                        <div class="im1">
                            <img src="images/p1.jpg">
                        </div>
                        <div class="im1 im2">
                            <img src="images/p2.jpg">
                        </div>
                    </div>
                    <div class="center3_right">
                        <div class="box"><img src="images/p3.jpg" height="180"><br>
                            <p class="p1"> 小米指環支架</p>
                            <p class="p2">19元</p>
                            <p class="p3">982人評價  </p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>

                        </div>
                        <div class="box"><img src="images/p4.jpg" height="180"><br>
                            <p class="p1"> 小米USB快速充電數據線</p>
                            <p class="p2">19元</p>
                            <p class="p3">962人評價  </p>
                        </div>
                        <div class="box"><img src="images/p5.jpg" height="180"><br>
                            <p class="p1"> 小米二合一數據線100cm</p>
                            <p class="p2">19.9元</p>
                            <p class="p3">182人評價  </p>
                        </div>
                        <div class="box"><img src="images/p6.jpg" height="180"><br>
                            <p class="p1"> 小米二合一數據線</p>
                            <p class="p2">9.9元</p>
                            <p class="p3">92人評價  </p>
                        </div>
                        <div class="box"><img src="images/p7.jpg" height="180"><br>
                            <p class="p1"> 紅米Note3鋼化膜</p>
                            <p class="p2">19.9元</p>
                            <p class="p3">342人評價  </p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/p8.jpg" height="180"><br>
                            <p class="p1"> 小米USB快速充電數據線</p>
                            <p class="p2">8.8元</p>
                            <p class="p3">98人評價  </p>
                        </div>
                        <div class="box"><img src="images/p9.jpg" height="180"><br>
                            <p class="p1"> 紅米Note3鋼化膜</p>
                            <p class="p2">49.9元</p>
                            <p class="p3">82人評價  </p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="last1 boxx">
                            <div class="L1 x1">
                                <span >
                                    <p class="p2"> 米兔手機U盤...</p>
                                     <p class="p3">49.9元</p>
                                </span>
                                <img src="images/p10.jpg">
                            </div>
                            <div class="L2 x1">
                                <span >
                                    <p class="p2"> 瀏覽更多</p>
                                     <p class="p3">電池存儲卡</p>
                                </span>
                                <div >
                                    <img src="img/1right.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--周邊部分內容-->
                <div id="main-inner_dao5">
                        <div class="cla_left da" >周邊</div>
                        <div class="cla_right">
                        <span class="spa1">
                            <a class="span1"> 熱門</a>
                            <a class="span2"> 服飾</a>
                            <a class="span3"> 玉兔</a>
                            <a class="span5"> 生活周邊</a>
                            <a class="span6"> 箱包</a>
                        </span>
                    </div>
                </div>

                <div id="main-inner_center5">
                    <div class="center3_left">
                        <div class="im1">
                            <img src="images/b1.jpg">
                        </div>
                        <div class="im1 im2">
                            <img src="images/b2.jpg">
                        </div>
                    </div>
                    <div class="center3_right">
                        <div class="box"><img src="images/b3.jpg" width="200" height="210"><br>
                            <p class="p1"> 小米路由器3C</p>
                            <p class="p2">399元</p>
                            <p class="p3">5677人評價  </p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b4.jpg" width="200" height="210"><br>
                            <p class="p1"> 小米手環2</p>
                            <p class="p2">58元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b5.jpg" width="200" height="210"><br>
                            <p class="p1"> 小米凈水器（廚上式）</p>
                            <p class="p2">9.9元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b6.jpg" width="200" height="210"><br>
                            <p class="p1"> 米家IH電飯煲</p>
                            <p class="p2">9.9元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b7.jpg" width="200" height="210"><br>
                            <p class="p1"> 米家掃地機器人</p>
                            <p class="p2">31.9元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b8.jpg" width="200" height="210"><br>
                            <p class="p1"> 九號平衡車</p>
                            <p class="p2">8.8元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="box"><img src="images/b9.jpg" width="200" height="210"><br>
                            <p class="p1"> 米家小白智能攝像機</p>
                            <p class="p2">49.9元</p>
                            <div class="foot"><div>挺好，挺有質感，充電也快。非常滿意<p>來自於<span>8987823223</span>的評價</p></div></div>
                        </div>
                        <div class="last1 boxx">
                            <div class="L1 x1">
                                <span >
                                    <p class="p2"> 米兔手機U盤...</p>
                                     <p class="p3">49.9元</p>
                                </span>
                                <img src="images/b10.jpg">
                            </div>
                            <div class="L2 x1">
                                <span >
                                    <p class="p2"> 瀏覽更多</p>
                                     <p class="p3">電池存儲卡</p>
                                </span>
                                <div >
                                    <img src="img/1right.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!--為你推薦-->
                <div class="main-inner_dao">
                    <div class="cla_left">為你推薦</div>
                    <div class="cla_right">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </div>
                </div>

                <div class="main-inner_center wei">
                    <div  ><img src="images/w1.jpg"><br>
                        <p class="p1"> 小米Note2 智能翻蓋保護套</p>
                        <p class="p2">49元</p>
                        <p class="p3">  201人好評</p>
                    </div>
                    <div  ><img src="images/w2.jpg">
                        <p class="p1"> 紅米Pro 十核雙攝</p>
                        <p class="p2">雙攝像頭手機，像單反一樣去拍照</p>
                        <p class="p3">  1099元起</p>
                    </div>
                    <div  ><img src="images/w3.jpg">
                        <p class="p1"> 小米Max</p>
                        <p class="p2">享花唄分期，最高享 12 期</p>
                        <p class="p3">  1799元</p>
                    </div>
                    <div ><img src="images/w4.jpg">
                        <p class="p1"> 小米筆記本</p>
                        <p class="p2">獨立顯卡、超輕薄、金屬機身</p>
                        <p class="p3">  3499元</p>
                    </div>
                    <div ><img src="images/w5.jpg">
                        <p class="p1"> 小米平板2 16GB現貨</p>
                        <p class="p2">輕薄全金屬，海量內容</p>
                        <p class="p3">  999元</p>
                    </div>
                </div>



                <!--熱評產品-->
                <div id="main-inner_dao_bottom">
                    <div class="cla_left">熱評產品</div>
                </div>

                <div class="main-inner_center re">
                    <div class=" bonn1"><img src="images/r1.jpg"><br>
                        <p class="p1">非常好的一款小米產品！新國貨！凈化后的水～有點甜甜的味道！真的是很好的產品！是送親戚朋友的最好的禮物！</p>
                        <p class="p3">來自於 城中草民 的評價</p>
                        <p class="p2"><span>小米凈水器</span> | 1299元</p>
                    </div>
                    <div class="bonn1"><img src="images/r2.jpg">
                        <p class="p1">這個很萌啊！如果可以接入網關，通過語音互動實現控制電器，是不是會有點鋼鐵俠他家的味道？</p>
                        <p class="p3">來自於 寂寞成舞 的評價</p>
                        <p class="p2"><span>米家小白智能攝像機 |</span> |399元</p>
                    </div>
                    <div class=" bonn1"><img src="images/r3.jpg">
                        <p class="p1">小巧，便攜，連接方便還有電量顯示！總體很不錯，可以掛在自己的包包上用！！也可以放在車里當藍牙電話！！...</p>
                        <p class="p3">來自於 佰亊柒禧 的評價</p>
                        <p class="p2"><span>小米隨身藍牙音箱</span> | 69元</p>
                    </div>
                    <div class=" bonn1"><img src="images/r4.jpg">
                        <p class="p1">這箱子很好，外觀漂亮，實用性強。很輕，有點軟但不影響它的堅固。</p>
                        <p class="p3">來自於 子書雁 的評價</p>
                        <p class="p2"><span>90分旅行箱 20寸 |</span> | 299元</p>
                    </div>
                </div>


                <!--內容-->
                <div id="main-inner_dao_bottom1">
                    <div class="cla_left">內容</div>

                </div>

                <div class="main-inner_center">
                    <div class="main-inner1 bonn1 nei">
                        <p class="p0 p01">圖書</p>
                        <p class="p1">哈利·波特與被詛咒的孩子</p>
                        <p class="p3">“哈利·波特”第八個故事中文版震撼來襲！特別彩排版劇本！</p>
                        <p class="p4">33.3元</p>
                        <img src="images/n1.png"><br>

                    </div>
                    <div class="main-inner2 bonn1 nei">
                        <p class="p0 p02">MIUI 主題</p>
                        <p class="p1">小米Note 2</p>
                        <p class="p3">官方定制主題 超多側邊欄功能 等你發現</p>
                        <p class="p4">免費</p>
                        <img src="images/n2.jpg">
                    </div>
                    <div class="main-inner3 bonn1 nei">
                        <p class="p0 p03">游戲</p>
                        <p class="p1">劍俠世界</p>
                        <p class="p3">一生不容錯過的浪漫武俠！！</p>
                        <p class="p4">免費</p>
                        <img src="images/n3.jpg">

                    </div>
                    <div class="main-inner4 bonn1 nei">
                        <p class="p0 p04">應用</p>
                        <p class="p1">2015年度應用</p>
                        <p class="p3">2015年度應用</p>
                        <p class="p4">免費</p>
                        <img src="images/n4.png">
                    </div>
                </div>
                <!--視頻-->
                <div id="main-inner_dao_bottom2">
                    <div class="cla_left">視頻</div>

                </div>

                <div class="main-inner_center shi">
                    <div class=" bonn1"><img src="images/s1.jpg"><br>
                        <p class="p1"> 小米5s Plus</p>
                        <p class="p2">5.7英寸大屏雙攝手機，拍照黑科技</p>
                        <p class="p3">  2299元起</p>
                    </div>
                    <div class=" bonn1"><img src="images/s2.jpg">
                        <p class="p1"> 紅米Pro 十核雙攝</p>
                        <p class="p2">雙攝像頭手機，像單反一樣去拍照</p>
                        <p class="p3">  1099元起</p>
                    </div>
                    <div class=" bonn1"><img src="images/s3.jpg">
                        <p class="p1"> 小米Max</p>
                        <p class="p2">享花唄分期，最高享 12 期</p>
                        <p class="p3">  1799元</p>
                    </div>
                    <div class=" bonn1"><img src="images/s4.jpg">
                        <p class="p1"> 小米筆記本</p>
                        <p class="p2">獨立顯卡、超輕薄、金屬機身</p>
                        <p class="p3">  3499元</p>
                    </div>
                </div>
                <div class="cc"></div>
                <div id="footer">
                    <div class="ft">
                        <div class="dp">
                            <div class="p1"><p>預約維修服務</p></div>
                        </div>
                        <div class="dp">
                            <div class="p1"><p>7天無理由退貨</p></div>
                        </div>
                        <div class="dp">
                            <div class="p1"><p>15天免費換貨</p></div>
                        </div>
                        <div class="dp">
                            <div class="p1"><p>滿150元包郵</p></div>
                        </div>
                        <div class="dp">
                            <div class="p1 p0"><p>520余家售后網點</p></div>
                        </div>
                    </div>
                    <div class="fc">
                        <div class="fc_left">
                            <div class="ul_div p1">
                                <span>幫助中心</span> <span>幫助中心</span> <span>幫助中心</span> <span>幫助中心</span> <span>幫助中心</span> <span>幫助中心</span>

                                <div class="li_div p1">
                                    <ul>
                                        <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>
                                        <li>聯系我們</li>
                                        <li>關注我們</li>
                                        <li>新浪微博</li>
                                        <li>小米部落</li>
                                        <li>官方微信</li>
                                        <li>特色服務</li>
                                        <li>F    碼通道</li>
                                        <li>小米移動</li>
                                        <li>防偽查詢</li>
                                    </ul>
                                </div>
                            </div>


                        </div>
                        <div class="fc_right">
                            <div class="ke p1">
                                <div class="phone">
                                    <p class="p2">400-100-5678</p>
                                    <p class="p1">周一至周日 8:00-18:00<br>（僅收市話費）</p>
                                    <div class="num">24小時在線客服</div>
                                </div>
                            </div>
                        </div>

                        <div id="footer2">
                            <div class="span p1">
                                <div class="div_left"><img src="img/Login.png" height="60" width="65"></div>
                                <div class="div_center">
                                     <span >小米商城</span><span>|</span><span>MIUI</span><span >米聊</span><span>|</span><span>多看書城</span><span >小米路由器</span><span>|</span><span>視頻電話</span><span >小米后院</span><span>|</span><span>小米天貓店</span>
                                    <span >小米淘寶直營店</span><span>|</span><span>小米網盟</span><span >問題反饋</span><span>|</span><span>Select Region</span>
                                    <p>©mi.com 京ICP證110507號 京ICP備10046444號 京公網安備11010802020134號 京網文[2014]0059-0009號<br>違法和不良信息舉報電話：185-0130-1238，本網站所列數據，除特殊說明，所有數據均出自我司實驗室測試</p>
                                </div>
                                <div class="div_right"><img src="img/b.png"></div>
                                </div>
                            <p class="pb"><span>探索小米科技</span><span>小米為發燒而生</span></p>
                        </div>

                    </div>


                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script>

</script>
</body>
</html>
View Code

 

運行效果：

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5 學習總結 HTML5 學習總結（一）——HTML5概要與新增標簽 HTML5布局練習 【HTML5】實例練習 HTML5 學習總結（五）——WebSocket與消息推送 學習html5 app項目開發 HTML5使用總結（一） HTML5 學習總結（二）——HTML5新增屬性與表單元素 HTML5 學習手筆四：canvas 總結 HTML5 學習總結（三）——本地存儲（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM