- A+
所属分类：Web前端
知识点记录
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，元素的宽度和高度包含了内边距和外边框的尺寸，将设定的宽度和高度减去内边距和外边框才能得到元素内容的尺寸
/*##########CSS代码########*/ body{ margin: 0px; padding: 0px; } /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>top导航栏设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/ .mi_nav{ width: 100%; height: 40px; font-size: 12px; background: #333; position: relative; } /*top导航栏左菜单div设置*/ .nav_left{ width: 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{ width: 271px; margin-right: 178.5px; float: right; } /*top导航栏菜单鼠标悬停公共事件设置，要排在特定事件之前*/ .mi_nav a:hover{ color: #ffffff; } /*top导航栏右菜单购物车设置*/ .cart{ width: 120px; height: 40px; background-color:#424242; text-align: center; margin-left: 20px; position: relative; } /*top导航栏右菜单购物车a标签设置*/ .cart a{ width: 120px; line-height: 40px; z-index: 10; } /*top导航栏右菜单购物车iconfont设置*/ .cart i{ margin-right: 5px; } /*top导航栏右菜单cart_hidden设置*/ .cart_hidden{ width: 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{ width: 100%; height: 100px; font-size: 16px; background-color: #ffffff; } /*logo div元素设置*/ .logo{ width: 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{ width: 861px; height: 100px; line-height: 100px; float: left; } .menu ul{ width: 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{ width: 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{ width: 300px; height: 50px; margin-top: 25px; float: left; } .search input{ width: 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{ width: 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{ width: 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{ width: 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{ width: 207px; height: 233px; text-align: center; float: left; } .product_hidden>div .img_div{ width: 207px; height: 110px; float: left; margin: 30px 0; border-right: 1px solid #e0e0e0; } .product_hidden>div>h3,.product_hidden>div>span{ display: inline-block; width: 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{ width: 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{ width: 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{ width: 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{ width: 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{ width: 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{ width: 1226px; height: 170px; margin: 14px 178.5px; } .advert>div{ width: 234px; height: 170px; background-color: #665e57; float: left; padding: 0; } .advert ul{ width: 234px; height: 170px; margin: 0; padding: 0; } .advert ul>li{ width: 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; width: 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{ width: 24px; height: 24px; opacity: 0.7; transition: all .5s; } .advert>img{ width: 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{ width: 100%; background-color: #f5f5f5; margin-top: 30px; overflow: hidden; } /*小米闪购头标题设置*/ .flashsale{ width: 1226px; height: 545px; margin: 0 178.5px; padding: 0; } .flashsale_head{ width: 100%; height: 58px; } .flashsale_head>h2{ margin: 0; line-height: 58px; font-weight: lighter; float: left; } .flashsale_head>div{ width: 72px; height: 24px; float: right; margin: 24px 0 10px; } .flashsale_head button{ display: inline-block; width: 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{ width: 1226px; height: 340px; } .flashsale_mkt>div{ width: 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{ width: 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; width: 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{ width: 1226px; height: 812px; margin: 15px 178.5px; } .phoneregion_head{ width: 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{ width: 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{ width: 1226px; height: 614px; margin: 0; } .items_left{ width: 234px; height: 614px; float: left; transition: all .5s; } .items_right{ width: 992px; height: 614px; float: left; } .items_right>div{ width: 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 Pro</h3> <span>4999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10</h3> <span>3699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 青春版 5G</h3> <span>1899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>RedmiK30 Pro系列</h3> <span>2699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/Redmi_phone2.jpg" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>RedmiK30 系列</h3> <span>1399元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/Redmi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi 10X 5G</h3> <span>1599元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/Redmi_phone4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi Note8</h3> <span>899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/Redmi_phone5.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi 9</h3> <span>799元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/Redmi_phone6.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米电视 65英寸OLED</h3> <span>12999元</span> </div> <div> <div class="img_div"><img src="Images/mipic/mitv2.jpg" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi智能电视 MAX98"</h3> <span>19999元</span> </div> <div> <div class="img_div"><img src="Images/mipic/mitv3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米电视 60英寸</h3> <span>1899元</span> </div> <div> <div class="img_div"><img src="Images/mipic/mitv4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi智能电视 X55</h3> <span>2166元</span> </div> <div> <div class="img_div"><img src="Images/mipic/mitv5.jpg" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>Redmi红米电视 70英寸R70A</h3> <span>2729元</span> </div> <div> <div class="img_div"><img src="Images/mipic/mitv6.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 Pro</h3> <span>4999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10</h3> <span>3699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 青春版 5G</h3> <span>1899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米MIX Alpha</h3> <span>19999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/mi_computer5.png" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 Pro</h3> <span>4999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10</h3> <span>3699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 青春版 5G</h3> <span>1899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米MIX Alpha</h3> <span>19999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/mi_appliance5.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 Pro</h3> <span>4999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10</h3> <span>3699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 青春版 5G</h3> <span>1899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米MIX Alpha</h3> <span>19999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/mi_router5.png" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 Pro</h3> <span>4999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10</h3> <span>3699元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米10 青春版 5G</h3> <span>1899元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" alt="WEB前端第二十课——应用及测试" alt=""></div> <h3>小米MIX Alpha</h3> <span>19999元起</span> </div> <div> <div class="img_div"><img src="Images/mipic/mi_intdevice5.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""><br/>小米秒杀</a></li> <li><a href="#"><img src="images/mipic/advert_tuangou.png" alt="WEB前端第二十课——应用及测试" alt=""><br/>企业团购</a></li> <li><a href="#"><img src="images/mipic/advert_fma.png" alt="WEB前端第二十课——应用及测试" alt=""><br/>F码通道</a></li> <li><a href="#"><img src="images/mipic/advert_mifen.png" alt="WEB前端第二十课——应用及测试" alt=""><br/>米粉卡</a></li> <li><a href="#"><img src="images/mipic/advert_huangou.png" alt="WEB前端第二十课——应用及测试" alt=""><br/>以旧换新</a></li> <li><a href="#"><img src="images/mipic/advert_huafei.png" alt="WEB前端第二十课——应用及测试" alt=""><br/>话费充值</a></li> </ul> </div> <img src="images/mipic/advert01.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <img src="images/mipic/advert02.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <img src="images/mipic/advert03.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""></div> <div> <img class="flashsale_product" src="images/mipic/flashsale_elecbook.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""> </div> <div class="items_right"> <div> <img src="images/mipic/phoneitem2.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>腾讯黑鲨3S</h4> <p>骁龙865处理器，122Hz刷新率</p> <span>3999元起</span> </div> <div> <img src="images/mipic/phoneitem3.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>Redmi 9A</h4> <p>5000MAh长循环大电量 6.53“英寸</p> <span>499元起</span> </div> <div> <img src="images/mipic/phoneitem4.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>小米10 青春版 5G</h4> <p>50倍潜望式变焦/轻薄5G手机</p> <span>1899元起 <s>2099元</s></span> </div> <div> <img src="images/mipic/phoneitem5.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>小米10</h4> <p>骁龙865处理器/1亿像素相机</p> <span>3699元起 <s>3999元</s></span> </div> <div> <img src="images/mipic/phoneitem6.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>Redmi K30 Pro</h4> <p>双模5G 骁龙865 弹出全面屏</p> <span>2699元起</span> </div> <div> <img src="images/mipic/phoneitem7.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>Redmi K30 Pro 变焦版</h4> <p>双模5G 骁龙865 弹出全面屏</p> <span>3799元</span> </div> <div> <img src="images/mipic/phoneitem8.jpg" alt="WEB前端第二十课——应用及测试" alt=""> <h4>小米10 Pro</h4> <p>骁龙865处理器/50倍变焦</p> <span>4999元</span> </div> <div> <img src="images/mipic/phoneitem9.jpg" alt="WEB前端第二十课——应用及测试" 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="WEB前端第二十课——应用及测试" alt=""> </div> </div> </div> </body> </html>
