HTML5学习总结——相关练习与项目

一.小米商城项目

　第一天示例代码：

<!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

 

运行效果：

 

 

 

 

posted @ 2016-12-03 20:05  指间流逝的夏末  阅读(2715)  评论(2)  编辑  收藏  举报