知识点记录
1.添加网页页签图标，在 head内使用 link标签，语法格式：<link rel="icon" href="图片地址">
2.clear属性，定义元素的左侧或右侧不允许浮动的元素
属性值：left（左侧不与允许浮动元素）、right（右侧不允许浮动元素）、both（两侧均不允许浮动元素）、none（默认值，允许浮动元素出现在两侧）
3.background语法，background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit；
bg-position属性，设置背景图像的起始位置，雪碧图定位时的常用方式，语法格式 background-position: horizontal vertical
水平值（horizontal）：percentage | length | left | center | right
垂直值（vertical）：percentage | length | top | center | bottom
左上角是0% 0%，右下角是100% 100%，默认是0% 0%，如果只设置一个值，则另一个值默认为50%
bg-size属性，设置背景图片的大小，语法格式 background-size: percentage | length percentage | length 或者 cover 或者contain
第一个值设置宽度，第二个值设置高度，只设置一个值时，另一个值默认自动（auto）
cover属性值，表示保持图片的纵横比例，并缩放成适合背景定位区域的最小尺寸
contain属性值，表示保持图片的纵横比例，并缩放成适合背景定位区域的最大尺寸
bg-origin属性，指定background-position属性应该是相对位置，如果background-attachment属性值为“fixed”，则这个属性没有任何效果
padding-box，背景图像填充框的相对位置
border-box，背景图像边界框的相对位置
content-box，背景图像内容框的相对位置
background-attachment属性，设置背景图像是否固定或随页面其余部分滚动，语法格式 background-attachment: scroll | fixed | local
scroll，默认值，表示随页面其他部分滚动
fixed，位置固定不动
local，图像随滚动元素滚动
4.outline（轮廓）属性，绘制于元素边框外围的一条线，可以起到突出元素的作用，outline不是元素的一部分，元素的大小尺寸不包括outline
包括属性：outline-color（轮廓颜色）、outline-style（轮廓样式）、outline-width（轮廓宽度）
简写outline属性可以在一个声明中设置全部属性值，按顺序设置
outline-style属性值，none（默认，无）、dotted（点状）、dashed（虚线）、solid（实线）、double（双实线）
outline-width属性值，thin（细轮廓）、medium（默认，中等轮廓）、thick（粗轮廓），或设置具体的 length值
outline-offset属性，规定轮廓与边框的距离，属性值为 length
5.box-sizing属性，规定元素的高度和宽度是否包含边框和内边距，属性值：
content-box，元素的宽度和高度只应用于元素的内容，即不包括内边距和外边框
border-box，元素的宽度和高度包含了内边距和外边框的尺寸，将设定的宽度和高度减去内边距和外边框才能得到元素内容的尺寸
6.display:none 加 display:block对元素进行隐藏的显示效果设置时，不能使用transition实现过渡
设置隐藏和显示特效的另外两种方式：
设置隐藏元素 height;0（width属性同理），在 hover属性中再赋予隐藏元素具体 height属性值
设置隐藏元素 top:100%（right、bottom、left属性同理），同时父元素设置 overflow:hidden，在hover属性中再设置隐藏元素正常 top属性值
这两种方式均可以通过 transition实现过渡效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #9f9f9f;
}
.logo{
55px;
height: 55px;
background-color: #ff6700;
margin: 22.5px 0px 22.5px 178.5px;
float: left;
position: relative;
/*overflow: hidden;*/
}
.milogo{
position: absolute;
top: 3px;
right: 3px;
/*left: 3px;*/
transition: all 1s;
}
.homelogo{
position: absolute;
top: 3px;
right: 100%;
/*left: -49px;*/
transition: all 1s;
}
.logo:hover .milogo{
/*left: 55px;*/
right: -49px;
}
.logo:hover .homelogo{
/*left: 3px;*/
right: 3px;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/mipic/mi-logo.png" alt="" class="milogo">
<img src="images/mipic/mi-home.png" alt="" class="homelogo">
</div>
</body>
</html>
7.正常流布局
水平布局属性：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right，七个属性的值的总和等于父元素的 width值
margin和width属性可以设置成auto，
当3个属性都是auto时，margin-left和margin-right自动为0，width属性会尽可能大，等于父元素width
当margin-left和margin-right属性为auto时，它们将自动等长，此时子元素在父元素中水平居中
除 border属性外，其他属性可以使用 百分数（%）定义属性值
垂直布局属性，margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom，七个属性的值的总和等于父元素的 height值
7个属性的特点同理水平布局属性
8.position:absolute，绝对定位，表示元素框从文档流中完全删除位置，并相对于其包含块确定
包含块可能是文档的初始包含块（根元素），html或 body
包含块也可以是文档中的另一个元素，position属性值不是 static（正常流）的 最近的祖先元素
9.display:inline-block属性将行内元素或块元素定义为行内块级元素，当多个子元素设置该属性值时，父元素可以通过 text-align:center属性实现多个子元素作为一个整体在父元素中水平居中
/*##########CSS代码########*/
body{
margin: 0px;
padding: 0px;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>top导航栏设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.mi_nav{
100%;
height: 40px;
font-size: 12px;
background: #333;
position: relative;
}
/*top导航栏左菜单div设置*/
.nav_left{
705px;
margin-left: 178.5px;
float: left;
}
/*top导航栏菜单ul设置*/
.nav_left ul,.nav_right ul{
margin: 0px;
padding: 0px;
}
/*top导航栏菜单li设置*/
.nav_left ul>li,.nav_right ul>li{
line-height: 40px; /*属性不能继承*/
float: left; /*属性不能继承*/
list-style-type: none;
}
/*top导航栏菜单a标签设置*/
.nav_left ul>li>a,.nav_right ul>li>a{
display: inline-block;
color: #b0b0b0;
text-decoration: none;
/*font-size: 12px;*/
}
/*top导航栏菜单span设置*/
.nav_left ul>li>span,.nav_right ul>li>span{
display: inline-block;
margin:0 7.5px;
color: #424242;
}
/*top导航栏右菜单div设置*/
.nav_right{
271px;
margin-right: 178.5px;
float: right;
}
/*top导航栏菜单鼠标悬停公共事件设置，要排在特定事件之前*/
.mi_nav a:hover{
color: #ffffff;
}
/*top导航栏右菜单购物车设置*/
.cart{
120px;
height: 40px;
background-color:#424242;
text-align: center;
margin-left: 20px;
position: relative;
}
/*top导航栏右菜单购物车a标签设置*/
.cart a{
120px;
line-height: 40px;
z-index: 10;
}
/*top导航栏右菜单购物车iconfont设置*/
.cart i{
margin-right: 5px;
}
/*top导航栏右菜单cart_hidden设置*/
.cart_hidden{
316px;
height: 100px;
line-height: 100px;
margin-top: 0;
color: #424242;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.15); /*四周都有阴影？*/
position: absolute;
right: 178.5px;
top: 40px;
display: none;
transition: all 0.5s; /*没有过渡效果？？？*/
}
/*top导航栏右菜单购物车鼠标悬停事件设置*/
.cart:hover .cart_hidden{
display: block;
}
.cart:hover{
background-color: #ffffff;
}
.cart:hover a{
color: #ff6700;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>第二层导航菜单设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*sub菜单栏整体设置*/
.sub_nav{
100%;
height: 100px;
font-size: 16px;
background-color: #ffffff;
}
/*logo div元素设置*/
.logo{
55px;
height: 55px;
background-color: #ff6700;
margin: 22.5px 0px 22.5px 178.5px;
float: left;
background-image: url("../images/mipic/mi-logo.png");
transition: all 1s; /*过渡属性未生效！！！*/
}
.logo:hover {
background-image: url("../images/mipic/mi-home.png");
}
/*menu div设置*/
.menu{
861px;
height: 100px;
line-height: 100px;
float: left;
}
.menu ul{
861px;
margin: 0;
padding: 0;
float: left;
}
.menu li{
list-style-type: none;
padding: 0 10px;
float: left;
}
.menu li>a{
font-size: 16px;
color: #333333;
text-decoration: none;
}
.menu li:hover>a{
color: #ff6700;
}
.doodle{
165px;
height: 100px;
line-height: 100px;
/*在HTML中通过 img标签也可以引用gif图像*/
background-image: url("../Images/mipic/b06819007feedbea62aedaa3089633d2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
/*search div设置*/
.search{
300px;
height: 50px;
margin-top: 25px;
float: left;
}
.search input{
225px; /*宽度不包含边框border和内边距padding*/
height: 48px;
font-size: 14px;
line-height: 50px;
padding: 0px 10.5px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
float: left;
border-right: none;
transition: all .3s;
}
.search button{
52px; /*宽度包含边框border和内边距padding*/
height: 50px;
font-size: 24px;
color: #616161;
padding: 0px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
float: left;
transition: all .3s;
}
/*search鼠标悬停事件设置*/
.search input:hover{
border: 1px solid #b0b0b0;
border-right: none;
}
.search input:hover+button{
border: 1px solid #b0b0b0;
}
.search button:hover{
background-color: #ff6700;
color: #ffffff;
font-weight: bold;
cursor: pointer;
}
/*search input下拉隐藏搜索推荐设置*/
.search_hidden{
246px;
height: 240px;
background-color: #ffffff;
border: 1px solid #ff6700;
border-top: none;
float: left;
display: none;
}
.search_hidden ul{
margin: 0;
padding: 0 0 0 15px;
}
.search_hidden li{
list-style-type: none;
padding: 5px 0;
}
.search_hidden li>a,.search_hidden li>a>pre{
font-family: sans-serif;
font-size: 14px;
font-weight: lighter;
text-decoration: none;
color: #333333;
margin: 0;
padding: 0;
}
/*search鼠标聚焦事件设置*/
.search input:focus{
border: 1px solid #ff6700;
border-right: none; /*如何在光标聚焦时清空placeholder内容？*/
}
.search input:focus+.iconfont{
border: 1px solid #ff6700;
}
.search input:focus+.search_hidden{
display: block; /*鼠标事件没有生效？*/
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>第二层导航菜单鼠标悬停事件设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.product_hidden{
100%;
height: 233px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 3px rgba(0,0,0,.15);
position: absolute;
left: 0px;
display: none;
transition: all .5s; /*过渡属性未生效！！！*/
z-index: 8;
}
.menu_product:hover>.product_hidden{
display: block;
}
.product_hidden>div{
207px;
height: 233px;
text-align: center;
float: left;
}
.product_hidden>div .img_div{
207px;
height: 110px;
float: left;
margin: 30px 0;
border-right: 1px solid #e0e0e0;
}
.product_hidden>div>h3,.product_hidden>div>span{
display: inline-block;
207px;
height: 15px;
font-size: 14px;
line-height: 15px;
text-align: center;
color: #666666;
margin: 5px 0;
font-weight: normal;
float: left;
}
.product_hidden>div>span{
color: #ff6700;
}
.product_hidden>div:first-child{
margin-left: 175px;
}
.product_hidden>div:last-child .img_div{
border-right: none;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>轮播图和分类列表设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*轮播图carousel设置*/
.carousel{
1226px;
height: 460px;
margin: 0 178.5px;
background-image: url("../Images/mipic/carousel01.jpg");
background-size: cover;
animation: carousel 20s infinite alternate; /*轮播图切换很生硬？？*/
position: relative;
}
@-webkit-keyframes carousel {
0%{
background-image: url("../Images/mipic/carousel01.jpg");
}
25%{
background-image: url("../Images/mipic/carousel02.jpg");
}
50%{
background-image: url("../Images/mipic/carousel03.jpg");
}
75%{
background-image: url("../Images/mipic/carousel04.jpg");
}
100%{
background-image: url("../Images/mipic/carousel05.jpg");
}
}
/*商品类别列表categorylist设置*/
.categorylist{
234px;
height: 460px;
background-color: rgba(105,101,101,.6);
padding: 20px 0;
box-sizing: border-box;
position: relative;
}
.categorylist>ul{
padding: 0;
margin: 0;
}
.categorylist li{
234px;
height: 42px;
line-height: 42px;
list-style-type: none;
padding-left: 30px;
box-sizing: border-box;
cursor: pointer;
}
.categorylist li>a{
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
float: left;
}
.categorylist li>i{
color: #ffffff;
font-size: 12px;
font-weight: bolder;
float: right;
position: absolute;
right: 20px;
}
/*商品类别菜单鼠标悬停事件设置*/
.categorylist_hidden{
992px;
height: 460px;
background-color: #ffffff;
box-shadow: 3px 5px 10px rgba(0,0,0,.2);
float: right;
position: absolute;
left: 234px;
top: 0;
display: none;
z-index: 7;
transition: all .5s; /*过渡属性未生效！！！*/
}
.categorylist li:hover{
background-color: #ff6700;
}
.categorylist li:hover>.categorylist_hidden{
display: block;
}
/*轮播图手动切换图片设置*/
.backward,.forward{
41px;
height: 69px;
background-image: url("../Images/mipic/icon-slides.png");
position: absolute;
top: 195.5px;
cursor: pointer;
}
.backward{
left: 234px;
background-position: -83px 0;
}
.forward{
right: 0;
background-position: -124px 0;
}
.backward:hover{
background-position: 0 0;
}
.forward:hover{
background-position: -42px 0;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米advert广告位设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.advert{
1226px;
height: 170px;
margin: 14px 178.5px;
}
.advert>div{
234px;
height: 170px;
background-color: #665e57;
float: left;
padding: 0;
}
.advert ul{
234px;
height: 170px;
margin: 0;
padding: 0;
}
.advert ul>li{
77px;
height: 84px;
list-style-type: none;
float: left;
}
.advert ul>li:nth-child(1),.advert ul>li:nth-child(2),.advert ul>li:nth-child(3){
border-bottom: 1px solid #666066;
}
.advert ul>li:nth-child(2),.advert ul>li:nth-child(5){
border-right: 1px solid #666066;
border-left: 1px solid #666066;
}
.advert ul>li>a{
display: inline-block;
77px;
height: 36px;
font-size: 12px;
text-decoration: none;
text-align: center;
color: rgba(255,255,255,.7);
padding: 24px 0;
transition: all .5s;
}
.advert ul>li>a>img{
24px;
height: 24px;
opacity: 0.7;
transition: all .5s;
}
.advert>img{
316px;
height: 170px;
float: left;
margin-left: 14.66px;
cursor: pointer;
}
/*advert图标广告位鼠标悬停效果设置*/
.advert ul>li>a:hover{
color: rgba(255,255,255,1);
}
.advert ul>li>a:hover>img{
opacity: 1;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米闪购专区flashSale设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.page_down{
100%;
background-color: #f5f5f5;
margin-top: 30px;
overflow: hidden;
}
/*小米闪购头标题设置*/
.flashsale{
1226px;
height: 545px;
margin: 0 178.5px;
padding: 0;
}
.flashsale_head{
100%;
height: 58px;
}
.flashsale_head>h2{
margin: 0;
line-height: 58px;
font-weight: lighter;
float: left;
}
.flashsale_head>div{
72px;
height: 24px;
float: right;
margin: 24px 0 10px;
}
.flashsale_head button{
display: inline-block;
36px;
height: 24px;
font-size: 14px;
font-weight: bolder;
color: #9f9f9f;
background-color: rgba(0,0,0,0);
margin: 0;
padding: 0;
border: 1px solid #e0e0e0;
float: left;
cursor: pointer;
}
.flashsale_head button:first-child{
border-right: none;
}
.flashsale_head button:hover{
color: #ff6700;
}
/* 小米闪购中间内容部分设置 */
.flashsale_mkt{
1226px;
height: 340px;
}
.flashsale_mkt>div{
234px;
height: 339px;
background-color: rgba(255,255,255,1);
margin-left: 14px;
float: left;
cursor: pointer;
}
.flashsale_mkt>div:first-child{
margin-left: 0;
border-top: 1px solid rgba(255,0,0,0.6);
}
.flashsale_mkt>div:nth-child(2){
border-top: 1px solid rgba(0,128,0,.6);
}
.flashsale_mkt>div:nth-child(3){
border-top: 1px solid rgba(255,165,0,.7);
}
.flashsale_mkt>div:nth-child(4){
border-top: 1px solid rgba(34,139,34,.3);
}
.flashsale_mkt>div:nth-child(5){
border-top: 1px solid rgba(0,0,255,.5);
}
.flashsale_product{
168px;
height: 168px;
margin: 25px 33px;
}
.flashsale_product+h4,.items_right h4{
text-align: center;
color: #333333;
font-weight: normal;
font-size: 14px;
margin: 10px 0 5px;
}
.flashsale_product~p,.items_right p{
text-align: center;
color: #9f9f9f;
font-size: 12px;
font-weight: normal;
margin: 0 0 10px;
}
.flashsale_product~span,.items_right span{
display: inline-block;
234px;
text-align: center;
color: #ff6700;
font-size: 14px;
font-weight: normal;
}
.flashsale_product~span>s,,.items_right span>s{
color: #9f9f9f;
}
.flashsale_foot,.phoneregion_foot{
margin: 20px 0;
cursor: pointer;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米手机专区phoneregion设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*手机专区head部分设置*/
.phoneregion{
1226px;
height: 812px;
margin: 15px 178.5px;
}
.phoneregion_head{
1226px;
height: 58px;
margin: 0;
}
.phoneregion_head>h2{
line-height: 58px;
font-size: 22px;
color: #333333;
font-weight: lighter;
margin: 0;
float: left;
}
.phoneregion_head>div{
92px;
height: 58px;
float: right;
}
.phoneregion_head>div>a{
display: inline-block;
line-height: 58px;
text-decoration: none;
font-size: 16px;
color: #333333;
float: left;
padding-left: 2px;
transition: all .3s;
}
.phoneregion_head>div i{
font-size: 20px;
font-weight: bolder;
color: rgba(51,51,51,.5);
margin-top: 20px;
transition: all .3s;
}
.phoneregion_head>div:hover a,.phoneregion_head>div:hover i{
color: #ff6700;
}
/*手机专区items内容设置*/
.phone_items{
1226px;
height: 614px;
margin: 0;
}
.items_left{
234px;
height: 614px;
float: left;
transition: all .5s;
}
.items_right{
992px;
height: 614px;
float: left;
}
.items_right>div{
234px;
height: 300px;
background-color: #ffffff;
margin-left: 14px;
margin-bottom: 14px;
float: left;
transition: all .5s;
}
.items_right>div>img{
margin: 0 17px;
}
.items_left:hover,.items_right>div:hover{
box-shadow: 3px 10px 10px rgba(0,0,0,.3);
transform: translate(0,-3px);
}
/*##########HTML代码########*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站</title>
<link rel="stylesheet" href="css/XiaoMistyle.css"/>
<link rel="icon" href="images/mipic/favicon.ico"/>
<link rel="stylesheet" href="images/icon/iconfont.css">
</head>
<body>
<!-- top导航栏设置 -->
<div class="mi_nav">
<div class="nav_left">
<ul>
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IoT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">金融</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载app</a><span>|</span></li>
<li><a href="#">SelectLocation</a></li>
</ul>
</div>
<div class="nav_right">
<ul>
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="cart">
<a href="#"><i class="iconfont">�</i>购物车（0）</a>
<div class="cart_hidden">购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
<!-- 第二层导航栏设置 -->
<div class="sub_nav">
<div class="logo">
<a href="#"></a>
</div>
<div class="menu">
<ul>
<li class="doodle"><a href="#"></a></li>
<li class="menu_product">
<a href="#">小米手机</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone1.png" alt=""></div>
<h3>小米10 Pro</h3>
<span>4999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt=""></div>
<h3>小米10</h3>
<span>3699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt=""></div>
<h3>小米10 青春版 5G</h3>
<span>1899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt=""></div>
<h3>小米MIX Alpha</h3>
<span>19999元起</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">Redmi红米</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone1.jpg" alt=""></div>
<h3>RedmiK30 Pro系列</h3>
<span>2699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone2.jpg" alt=""></div>
<h3>RedmiK30 系列</h3>
<span>1399元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone3.png" alt=""></div>
<h3>Redmi 10X 5G</h3>
<span>1599元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone4.png" alt=""></div>
<h3>Redmi Note8</h3>
<span>899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone5.png" alt=""></div>
<h3>Redmi 9</h3>
<span>799元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/Redmi_phone6.jpg" alt=""></div>
<h3>Redmi 9A</h3>
<span>499元起</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">电视</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/mitv1.png" alt=""></div>
<h3>小米电视 65英寸OLED</h3>
<span>12999元</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mitv2.jpg" alt=""></div>
<h3>Redmi智能电视 MAX98"</h3>
<span>19999元</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mitv3.png" alt=""></div>
<h3>小米电视 60英寸</h3>
<span>1899元</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mitv4.png" alt=""></div>
<h3>Redmi智能电视 X55</h3>
<span>2166元</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mitv5.jpg" alt=""></div>
<h3>Redmi红米电视 70英寸R70A</h3>
<span>2729元</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mitv6.jpg" alt=""></div>
<h3>小米壁画电视 65英寸</h3>
<span>6999元</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">笔记本</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone1.png" alt=""></div>
<h3>小米10 Pro</h3>
<span>4999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt=""></div>
<h3>小米10</h3>
<span>3699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt=""></div>
<h3>小米10 青春版 5G</h3>
<span>1899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt=""></div>
<h3>小米MIX Alpha</h3>
<span>19999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mi_computer5.png" alt=""></div>
<h3>小米游戏本</h3>
<span>6499元起</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">家电</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone1.png" alt=""></div>
<h3>小米10 Pro</h3>
<span>4999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt=""></div>
<h3>小米10</h3>
<span>3699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt=""></div>
<h3>小米10 青春版 5G</h3>
<span>1899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt=""></div>
<h3>小米MIX Alpha</h3>
<span>19999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mi_appliance5.jpg" alt=""></div>
<h3>米家风冷对开门冰箱 483L</h3>
<span>2288元</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">路由器</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone1.png" alt=""></div>
<h3>小米10 Pro</h3>
<span>4999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt=""></div>
<h3>小米10</h3>
<span>3699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt=""></div>
<h3>小米10 青春版 5G</h3>
<span>1899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt=""></div>
<h3>小米MIX Alpha</h3>
<span>19999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mi_router5.png" alt=""></div>
<h3>小米路由器 AC2100</h3>
<span>229元</span>
</div>
</div>
</li>
<li class="menu_product">
<a href="#">智能硬件</a>
<div class="product_hidden">
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone1.png" alt=""></div>
<h3>小米10 Pro</h3>
<span>4999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt=""></div>
<h3>小米10</h3>
<span>3699元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt=""></div>
<h3>小米10 青春版 5G</h3>
<span>1899元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt=""></div>
<h3>小米MIX Alpha</h3>
<span>19999元起</span>
</div>
<div>
<div class="img_div"><img src="Images/mipic/mi_intdevice5.jpg" alt=""></div>
<h3>小米小爱 触屏音响</h3>
<span>199元起</span>
</div>
</div>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="小米10年献作之礼">
<button class="iconfont">�</button>
<div class="search_hidden">
<ul>
<li><a href="#"><pre>K30 5G 券后最高优惠700元</pre></a></li>
<li><a href="#">定制T恤</a></li>
<li><a href="#">黑鲨3s</a></li>
<li><a href="#">小米10</a></li>
<li><a href="#">空调</a></li>
<li><a href="#">全部商品</a></li>
<li><a href="#"><pre>米家插线板 快充版 27W</pre></a></li>
<li><a href="#"><pre>Redmi 手环</pre></a></li>
</ul>
</div>
</div>
</div>
<!-- 轮播图和分类列表设置 -->
<div class="carousel">
<div class="categorylist">
<ul>
<li>
<a href="#">手机 电话卡</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">电视 盒子</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div></li>
<li>
<a href="#">笔记本 显示器</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div></li>
<li>
<a href="#">家电 插线板</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">出行 穿戴</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">智能 路由器</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">电源 配件</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">健康 儿童</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">耳机 音箱</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
<li>
<a href="#">生活 箱包</a><i class="iconfont">�</i>
<div class="categorylist_hidden"></div>
</li>
</ul>
</div>
<div class="backward"></div>
<div class="forward"></div>
</div>
<!-- 小米advert广告位设置 -->
<div class="advert">
<div>
<ul>
<li><a href="#"><img src="images/mipic/advert_miaosha.png" alt=""><br/>小米秒杀</a></li>
<li><a href="#"><img src="images/mipic/advert_tuangou.png" alt=""><br/>企业团购</a></li>
<li><a href="#"><img src="images/mipic/advert_fma.png" alt=""><br/>F码通道</a></li>
<li><a href="#"><img src="images/mipic/advert_mifen.png" alt=""><br/>米粉卡</a></li>
<li><a href="#"><img src="images/mipic/advert_huangou.png" alt=""><br/>以旧换新</a></li>
<li><a href="#"><img src="images/mipic/advert_huafei.png" alt=""><br/>话费充值</a></li>
</ul>
</div>
<img src="images/mipic/advert01.jpg" alt="">
<img src="images/mipic/advert02.jpg" alt="">
<img src="images/mipic/advert03.jpg" alt="">
</div>
<!--小米闪购flashsale设置-->
<div class="page_down">
<div class="flashsale">
<div class="flashsale_head">
<h2>小米闪购</h2>
<div>
<button class="iconfont">�</button>
<button class="iconfont">�</button>
</div>
</div>
<div class="flashsale_mkt">
<div><img src="images/mipic/flashsale_time.jpg" alt=""></div>
<div>
<img class="flashsale_product" src="images/mipic/flashsale_elecbook.jpg" alt="">
<h4>小米多看电纸书 深灰</h4>
<p>16G大内存 多看海量阅读资源</p>
<span>569元 <s>599元</s></span>
</div>
<div>
<img class="flashsale_product" src="images/mipic/flashsale_router.jpg" alt="">
<h4>小米路由器4C 白色</h4>
<p>300M单品 高增益4天线</p>
<span>59元 <s>99元</s></span>
</div>
<div>
<img class="flashsale_product" src="images/mipic/flashsale_pcnote.jpg" alt="">
<h4>RedmiBook14 i5 16G</h4>
<p>全面实力 全“芯”超越</p>
<span>4699元 <s>4999元</s></span>
</div>
<div>
<img class="flashsale_product" src="images/mipic/flashsale_towel.jpg" alt="">
<h4>最生活浴巾 Air（4条装）</h4>
<p>享用一条洁净好浴巾</p>
<span>169元 <s>269元</s></span>
</div>
</div>
<div class="flashsale_foot">
<img src="images/mipic/flashsale_foot.jpg" alt="">
</div>
</div>
<div class="phoneregion">
<div class="phoneregion_head">
<h2>手机</h2>
<div class="more">
<a href="#">查看更多 <i class="iconfont">�</i></a>
</div>
</div>
<div class="phone_items">
<div class="items_left">
<img src="images/mipic/phoneitem1.jpg" alt="">
</div>
<div class="items_right">
<div>
<img src="images/mipic/phoneitem2.jpg" alt="">
<h4>腾讯黑鲨3S</h4>
<p>骁龙865处理器，122Hz刷新率</p>
<span>3999元起</span>
</div>
<div>
<img src="images/mipic/phoneitem3.jpg" alt="">
<h4>Redmi 9A</h4>
<p>5000MAh长循环大电量 6.53“英寸</p>
<span>499元起</span>
</div>
<div>
<img src="images/mipic/phoneitem4.jpg" alt="">
<h4>小米10 青春版 5G</h4>
<p>50倍潜望式变焦/轻薄5G手机</p>
<span>1899元起 <s>2099元</s></span>
</div>
<div>
<img src="images/mipic/phoneitem5.jpg" alt="">
<h4>小米10</h4>
<p>骁龙865处理器/1亿像素相机</p>
<span>3699元起 <s>3999元</s></span>
</div>
<div>
<img src="images/mipic/phoneitem6.jpg" alt="">
<h4>Redmi K30 Pro</h4>
<p>双模5G 骁龙865 弹出全面屏</p>
<span>2699元起</span>
</div>
<div>
<img src="images/mipic/phoneitem7.jpg" alt="">
<h4>Redmi K30 Pro 变焦版</h4>
<p>双模5G 骁龙865 弹出全面屏</p>
<span>3799元</span>
</div>
<div>
<img src="images/mipic/phoneitem8.jpg" alt="">
<h4>小米10 Pro</h4>
<p>骁龙865处理器/50倍变焦</p>
<span>4999元</span>
</div>
<div>
<img src="images/mipic/phoneitem9.jpg" alt="">
<h4>Redmi K30</h4>
<p>120Hz流速屏 全速热爱</p>
<span>1399元起 <s>1699元</s></span>
</div>
</div>
</div>
<div class="phoneregion_foot">
<img src="images/mipic/phoneitem10.jpg" alt="">
</div>
</div>
</div>
</body>
</html>