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="data:images/top1.jpg"></div>
<div id="main_top3"><img src="data:images/top2.jpg"></div>
<div id="main_top4"><img src="data: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="data: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="data:images/c2.png">
<p class="p1"> 红米Pro 十核双摄</p>
<p class="p2">双摄像头手机，像单反一样去拍照</p>
<p class="p3"> 1099元起</p>
</div>
<div id="main-inner3"><img src="data: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="data:images/c4.png">
<p class="p1"> 小米笔记本</p>
<p class="p2">独立显卡、超轻薄、金属机身</p>
<p class="p3"> 3499元</p>
</div>
<div id="main-inner5"><img src="data: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="data:images/z1.jpg"></div>
<div class="center2_right">
<div ><img src="data:images/z2.jpg"><br>
<p class="p1"> 小米路由器3C</p>
<p class="p2">APP智能控制，安全防蹭网</p>
<p class="p3"> 99元</p>
</div>
<div ><img src="data:images/z3.jpg"><br>
<p class="p1"> 小米手环2</p>
<p class="p2">OLED 显示屏幕，升级计步算法</p>
<p class="p3"> 1299元</p>
</div>
<div ><img src="data:images/z4.jpg"><br>
<p class="p1"> 小米净水器（厨上式）</p>
<p class="p2">限量送 TDS 检测笔</p>
<p class="p3"> 2299元起</p>
</div>
<div ><img src="data:images/z5.jpg"><br>
<p class="p1"> 米家IH电饭煲</p>
<p class="p2">IH 电磁环绕加热，多功能智能电饭煲</p>
<p class="p3"> 399元</p>
</div>
<div ><img src="data:images/z6.png"><br>
<p class="p1"> 米家扫地机器人</p>
<p class="p2">远程智能控制，扫得干净扫得快</p>
<p class="p3"> 1699元</p>
</div>
<div ><img src="data:images/z7.jpg"><br>
<p class="p1"> 九号平衡车</p>
<p class="p2">年轻人的酷玩具，骑行遥控两种玩法</p>
<p class="p3"> 1999元</p>
</div>
<div ><img src="data:images/z8.jpg"><br>
<p class="p1"> 米家小白智能摄像机</p>
<p class="p2">360度全景拍摄，双向语音通话</p>
<p class="p3"> 399元</p>
</div>
<div ><img src="data: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:;
margin:;
}
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:;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:;
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="data:images/top1.jpg"></div>
<div id="main_top3"><img src="data:images/top2.jpg"></div>
<div id="main_top4"><img src="data: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="data: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="data:images/c2.png">
<p class="p1"> 红米Pro 十核双摄</p>
<p class="p2">双摄像头手机，像单反一样去拍照</p>
<p class="p3"> 1099元起</p>
</div>
<div class="main-inner3"><img src="data: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="data:images/c4.png">
<p class="p1"> 小米笔记本</p>
<p class="p2">独立显卡、超轻薄、金属机身</p>
<p class="p3"> 3499元</p>
</div>
<div class="main-inner5"><img src="data: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="data:images/z1.jpg"></div>
<div class="center2_right">
<div ><img src="data:images/z2.jpg"><br>
<p class="p1"> 小米路由器3C</p>
<p class="p2">APP智能控制，安全防蹭网</p>
<p class="p3"> 99元</p>
</div>
<div ><img src="data:images/z3.jpg"><br>
<p class="p1"> 小米手环2</p>
<p class="p2">OLED 显示屏幕，升级计步算法</p>
<p class="p3"> 1299元</p>
</div>
<div ><img src="data:images/z4.jpg"><br>
<p class="p1"> 小米净水器（厨上式）</p>
<p class="p2">限量送 TDS 检测笔</p>
<p class="p3"> 2299元起</p>
</div>
<div ><img src="data:images/z5.jpg"><br>
<p class="p1"> 米家IH电饭煲</p>
<p class="p2">IH 电磁环绕加热，多功能智能电饭煲</p>
<p class="p3"> 399元</p>
</div>
<div ><img src="data:images/z6.png"><br>
<p class="p1"> 米家扫地机器人</p>
<p class="p2">远程智能控制，扫得干净扫得快</p>
<p class="p3"> 1699元</p>
</div>
<div ><img src="data:images/z7.jpg"><br>
<p class="p1"> 九号平衡车</p>
<p class="p2">年轻人的酷玩具，骑行遥控两种玩法</p>
<p class="p3"> 1999元</p>
</div>
<div ><img src="data:images/z8.jpg"><br>
<p class="p1"> 米家小白智能摄像机</p>
<p class="p2">360度全景拍摄，双向语音通话</p>
<p class="p3"> 399元</p>
</div>
<div ><img src="data: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="data:images/d1.jpg">
</div>
<div class="im1 im2">
<img src="data:images/d2.jpg">
</div>
</div>
<div class="center3_right">
<div class="box"><img src="data: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="data:images/d4.jpg"><br>
<p class="p1"> 原装快充套餐</p>
<p class="p2">58元</p>
</div>
<div class="box"><img src="data: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="data: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="data: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="data:images/d8.jpg"><br>
<p class="p1"> 镍氢充电电池套装</p>
<p class="p2">88元 98元</p>
</div>
<div class="box"><img src="data: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="data: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="data:images/p1.jpg">
</div>
<div class="im1 im2">
<img src="data:images/p2.jpg">
</div>
</div>
<div class="center3_right">
<div class="box"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/b1.jpg">
</div>
<div class="im1 im2">
<img src="data:images/b2.jpg">
</div>
</div>
<div class="center3_right">
<div class="box"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/w1.jpg"><br>
<p class="p1"> 小米Note2 智能翻盖保护套</p>
<p class="p2">49元</p>
<p class="p3"> 201人好评</p>
</div>
<div ><img src="data:images/w2.jpg">
<p class="p1"> 红米Pro 十核双摄</p>
<p class="p2">双摄像头手机，像单反一样去拍照</p>
<p class="p3"> 1099元起</p>
</div>
<div ><img src="data:images/w3.jpg">
<p class="p1"> 小米Max</p>
<p class="p2">享花呗分期，最高享 12 期</p>
<p class="p3"> 1799元</p>
</div>
<div ><img src="data:images/w4.jpg">
<p class="p1"> 小米笔记本</p>
<p class="p2">独立显卡、超轻薄、金属机身</p>
<p class="p3"> 3499元</p>
</div>
<div ><img src="data: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="data: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="data:images/r2.jpg">
<p class="p1">这个很萌啊！如果可以接入网关，通过语音互动实现控制电器，是不是会有点钢铁侠他家的味道？</p>
<p class="p3">来自于 寂寞成舞 的评价</p>
<p class="p2"><span>米家小白智能摄像机 |</span> |399元</p>
</div>
<div class=" bonn1"><img src="data:images/r3.jpg">
<p class="p1">小巧，便携，连接方便还有电量显示！总体很不错，可以挂在自己的包包上用！！也可以放在车里当蓝牙电话！！...</p>
<p class="p3">来自于 佰亊柒禧 的评价</p>
<p class="p2"><span>小米随身蓝牙音箱</span> | 69元</p>
</div>
<div class=" bonn1"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data:images/s2.jpg">
<p class="p1"> 红米Pro 十核双摄</p>
<p class="p2">双摄像头手机，像单反一样去拍照</p>
<p class="p3"> 1099元起</p>
</div>
<div class=" bonn1"><img src="data:images/s3.jpg">
<p class="p1"> 小米Max</p>
<p class="p2">享花呗分期，最高享 12 期</p>
<p class="p3"> 1799元</p>
</div>
<div class=" bonn1"><img src="data: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>
运行效果：
HTML5学习总结——相关练习与项目的更多相关文章
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- 值得学习的C语言开源项目
值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- 【C/C++开发】值得学习的C语言开源项目
值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...
- 值得学习的C/C++开源项目 持续更新
值得学习的C语言开源项目 持续更新 文章目录 值得学习的C语言开源项目 持续更新 - 1. Webbench - 2. Tinyhttpd - 3. cJSON - 4. CMockery - 5. ...
- HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- HTML5学习参考资料整理
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
随机推荐
- 设置$.getJSON同步执行的笨方法
$.ajaxSettings.async=false; $.getJSON("action/logon_checkAcc.action", function(json){ aler ...
- H5前端的关于像素解释
场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞ 阿树:~(>_<)~毛问题噶 ...
- CSS的伪类 :before 和 :after
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- 高德地图 API JavaScript API
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx ...
- Grunt实例
module.exports = function(grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json ...
- js和jq获取宽度和高度
Javascript: console.log(document.body.clientWidth); //网页可见区域宽(body) console.log(document.body.client ...
- .NET开源工作流RoadFlow-流程运行-工作委托
如果某一个人某一段时间不在单位,则可以将自己的工作委托给他人代为处理. 在 流程处理-->工作委托 中可以管理自己的委托,管理员也可以在 流程管理-->工作委托 中管理所有人的委托: 委托 ...
- Android解析ActivityManagerService（二）ActivityTask和Activity栈管理
前言 关于AMS,原计划是只写一篇文章来介绍,但是AMS功能繁多,一篇文章的篇幅远远不够.这一篇我们接着来学习与AMS相关的ActivityTask和Activity栈管理. 1.ActivitySt ...
- Fiddler给网站“优化”
最近访问某知名网站的速度非常慢,有时候需要2分钟还没完全打开,页面展示了一半就卡住,然后等半天才继续显示下面部分.这种情况已经有几个月了,不知道是他们服务器原因还是我所在网络的问题,但是基本上在其他网 ...
- restful知识点之一CBV
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^FBVTEST/', views.FBV_Test.as_view()), ] url ...