欢迎光临
我的个人博客网站

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=""></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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第二十课——应用及测试
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏