首页 > Web开发 > 详细

WEB前端第二十课——应用及测试

时间：2020-08-11 09:08:27      阅读：88      评论：0      收藏：0      [点我收藏+]

知识点记录

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" ></div>
                            <h3>小米10  Pro</h3>
                            <span>4999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" ></div>
                            <h3>小米10</h3>
                            <span>3699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" ></div>
                            <h3>小米10  青春版  5G</h3>
                            <span>1899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" ></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" ></div>
                            <h3>RedmiK30  Pro系列</h3>
                            <span>2699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/Redmi_phone2.jpg" ></div>
                            <h3>RedmiK30  系列</h3>
                            <span>1399元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/Redmi_phone3.png" ></div>
                            <h3>Redmi  10X  5G</h3>
                            <span>1599元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/Redmi_phone4.png" ></div>
                            <h3>Redmi  Note8</h3>
                            <span>899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/Redmi_phone5.png" ></div>
                            <h3>Redmi  9</h3>
                            <span>799元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/Redmi_phone6.jpg" ></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" ></div>
                            <h3>小米电视  65英寸OLED</h3>
                            <span>12999元</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mitv2.jpg" ></div>
                            <h3>Redmi智能电视 MAX98"</h3>
                            <span>19999元</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mitv3.png" ></div>
                            <h3>小米电视  60英寸</h3>
                            <span>1899元</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mitv4.png" ></div>
                            <h3>Redmi智能电视  X55</h3>
                            <span>2166元</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mitv5.jpg" ></div>
                            <h3>Redmi红米电视  70英寸R70A</h3>
                            <span>2729元</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mitv6.jpg" ></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" ></div>
                            <h3>小米10  Pro</h3>
                            <span>4999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" ></div>
                            <h3>小米10</h3>
                            <span>3699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" ></div>
                            <h3>小米10  青春版  5G</h3>
                            <span>1899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" ></div>
                            <h3>小米MIX  Alpha</h3>
                            <span>19999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mi_computer5.png" ></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" ></div>
                            <h3>小米10  Pro</h3>
                            <span>4999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" ></div>
                            <h3>小米10</h3>
                            <span>3699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" ></div>
                            <h3>小米10  青春版  5G</h3>
                            <span>1899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" ></div>
                            <h3>小米MIX  Alpha</h3>
                            <span>19999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mi_appliance5.jpg" ></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" ></div>
                            <h3>小米10  Pro</h3>
                            <span>4999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" ></div>
                            <h3>小米10</h3>
                            <span>3699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" ></div>
                            <h3>小米10  青春版  5G</h3>
                            <span>1899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" ></div>
                            <h3>小米MIX  Alpha</h3>
                            <span>19999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mi_router5.png" ></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" ></div>
                            <h3>小米10  Pro</h3>
                            <span>4999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone2.png" ></div>
                            <h3>小米10</h3>
                            <span>3699元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone3.png" ></div>
                            <h3>小米10  青春版  5G</h3>
                            <span>1899元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/xiaomi_phone4.png" ></div>
                            <h3>小米MIX  Alpha</h3>
                            <span>19999元起</span>
                        </div>
                        <div>
                            <div class="img_div"><img src="Images/mipic/mi_intdevice5.jpg" ></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" ><br/>小米秒杀</a></li>
                <li><a href="#"><img src="images/mipic/advert_tuangou.png" ><br/>企业团购</a></li>
                <li><a href="#"><img src="images/mipic/advert_fma.png" ><br/>F码通道</a></li>
                <li><a href="#"><img src="images/mipic/advert_mifen.png" ><br/>米粉卡</a></li>
                <li><a href="#"><img src="images/mipic/advert_huangou.png" ><br/>以旧换新</a></li>
                <li><a href="#"><img src="images/mipic/advert_huafei.png" ><br/>话费充值</a></li>
            </ul>
        </div>
        <img src="images/mipic/advert01.jpg" >
        <img src="images/mipic/advert02.jpg" >
        <img src="images/mipic/advert03.jpg" >
    </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" ></div>
            <div>
                <img class="flashsale_product" src="images/mipic/flashsale_elecbook.jpg" >
                <h4>小米多看电纸书 深灰</h4>
                <p>16G大内存 多看海量阅读资源</p>
                <span>569元 <s>599元</s></span>
            </div>
            <div>
                <img class="flashsale_product" src="images/mipic/flashsale_router.jpg" >
                <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" >
                <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" >
                <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" >
        </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" >
            </div>
            <div class="items_right">
                <div>
                    <img src="images/mipic/phoneitem2.jpg" >
                    <h4>腾讯黑鲨3S</h4>
                    <p>骁龙865处理器，122Hz刷新率</p>
                    <span>3999元起</span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem3.jpg" >
                    <h4>Redmi 9A</h4>
                    <p>5000MAh长循环大电量 6.53“英寸</p>
                    <span>499元起</span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem4.jpg" >
                    <h4>小米10 青春版 5G</h4>
                    <p>50倍潜望式变焦/轻薄5G手机</p>
                    <span>1899元起 <s>2099元</s></span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem5.jpg" >
                    <h4>小米10</h4>
                    <p>骁龙865处理器/1亿像素相机</p>
                    <span>3699元起 <s>3999元</s></span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem6.jpg" >
                    <h4>Redmi K30 Pro</h4>
                    <p>双模5G 骁龙865 弹出全面屏</p>
                    <span>2699元起</span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem7.jpg" >
                    <h4>Redmi K30 Pro 变焦版</h4>
                    <p>双模5G 骁龙865 弹出全面屏</p>
                    <span>3799元</span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem8.jpg" >
                    <h4>小米10 Pro</h4>
                    <p>骁龙865处理器/50倍变焦</p>
                    <span>4999元</span>
                </div>
                <div>
                    <img src="images/mipic/phoneitem9.jpg" >
                    <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" >
        </div>
    </div>
</div>
</body>
</html>

　　

WEB前端第二十课——应用及测试

原文：https://www.cnblogs.com/husa/p/13453327.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！