学习web前端历程（十七）

最新推荐文章于 2022-05-30 07:30:00 发布
l123zmj
最新推荐文章于 2022-05-30 07:30:00 发布
阅读量201
点赞数 1
文章标签：小米商城练习
本文链接：https://blog.csdn.net/l123zmj/article/details/99609744
版权
小米商城(未完)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="CSS/xiaomiStyle.css"/>
    <link rel="stylesheet" href="CSS/reset.css"/>
    <link rel="stylesheet" href="CSS/iconfont.css"/>
</head>
<body>
<!--黑条导航栏开始-->
<div class="box">
<div class="nav">
    <div class="nav_left">
        <ul>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">MIMU</a></li>
            <li><a href="#">IoT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">金融</a></li>
            <li><a href="#">有品</a></li>
            <li><a href="#">小爱开放平台</a></li>
            <li><a href="#">企业团购</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li><a href="#">下载app</a></li>
            <li><a href="#">Select Region</a></li>
        </ul>
    </div>
    <div class="nav_right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#"><i class="iconfont">&#xf0179;</i>购物车（0）</a>
            <div class="buy_hidden">
                <p>购物车中还没有物品哦</p>
            </div>
            </li>
        </ul>
    </div>
</div>
</div>
<!--黑条导航栏结束-->
<!--小米白色导航条开始-->
<div class="white_nav">
    <div class="wrap">
           <img src="images/logo-footer.png" class="logo"/>
           <ul class="center">
               <li><a href="#">小米手机</a>
                   <div class="white_nav_hidden">
                       <div class="photo1">
                           <div>
                           <img src="images/6AAAA.png">
                               <p class="title">小米CC9</p>
                               <p class="price">1799元起</p>
                           </div>
                           <div>
                           <img src="images/6pro140-140.png">
                           </div>
                           <div>
                           <img src="images/666666.png">
                          </div>
                           <div>
                           <img src="images/80808080808080.jpg">
                           </div>
                           <div>
                           <img src="images/m8-80.png">
                           </div>
                           <div>
                           <img src="images/m8se-80.png">
                       </div>
                       </div>
               </li>
               <li><a href="#">RedMi红米</a></li>
               <li><a href="#">电视</a></li>
               <li><a href="#">笔记本</a></li>
               <li><a href="#">家电</a></li>
               <li><a href="#">路由器</a></li>
               <li><a href="#">智能硬件</a></li>
               <li><a href="#">服务</a></li>
               <li><a href="#">社区</a></li>
               <li class="search">
                   <input type="text" list="photo"/>
                   <datalist id="photo">
                       <option>小米9</option>
                       <option>小米电视</option>
                       <option>笔记本pro</option>
                   </datalist>
                   <button class="iconfont">&#xe644;</button>
               </li>
           </ul>
       </div>
</div>
<!--小米白色导航条结束-->
<!--轮播图和滑动门开始-->
<div class="lunbotu">
<div class="hdm">
    <ul>
        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">电视  盒子</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">笔记本  平板</a><i class="iconfont">&#xe64a;</i>
        </li>
        <li><a href="#">家电  插板板</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">出行  穿戴</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">智能  路由器</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">电源  配件</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">健康  儿童</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">耳机  音响</a><i class="iconfont">&#xe64a;</i>
            <div class="hdm_hidden"></div>
        </li>
        <li><a href="#">生活  箱包</a><i class="iconfont">&#xe64a;</i>

        </li>
    </ul>
</div>
    <div class="up"></div>
    <div class="down"></div>
</div>
<!--轮播图和滑动门结束-->
<!--小米广告位开始-->
<div class="wrap ad">
    <ul>
        <li class="before"><i class="iconfont">&#xf0179;</i><br/>小米秒杀</li>
        <li class="before"><i class="iconfont">&#xf0179;</i><br/>企业团购</li>
        <li class="before"><i class="iconfont">&#xf0179;</i><br/>F码通道</li>
        <li class="four"><i class="iconfont">&#xf0179;</i><br/>米粉卡</li>
        <li class="five"><i class="iconfont">&#xf0179;</i><br/>以旧换新</li>
        <li class="six"><i class="iconfont">&#xf0179;</i><br/>话费充值</li>
    </ul>
        <img src="images/xmad_15500580021576_iymFx.jpg">
        <img src="images/xmad_15410029988871_TdzPQ.jpg">
        <img src="images/xmad_1550022313197_PMtDb.jpg">
</div>
<!--小米广告位结束-->
<!--小米闪购开始-->
<div class="wrap sg">
    <div class="sg_top">
        <h2>小米闪购</h2>
        <div>
        <span>&lt;</span>
        <span>&gt;</span>
    </div>
    </div>
</div>
<!--小米闪购结束-->

</body>
</html>

xiaomiStyle.css
/*黑条导航栏开始*/
.box{
    width: 100%;
    height: 40px;
    background: #333;
}
.nav{
    width:1249px;
    height: 40px;
    margin: 0 auto;
}
.nav_left li a{
    font-size: 12px;
    color: #b0b0b0;
    float: left;
    line-height: 40px;
    margin-left: 10px;
}
.nav_right{
   float: right;
position: relative;
    transition: all 2s ease-in 1s;
}
.nav_right li{
    font-size: 12px;
    color: #b0b0b0;
    line-height: 40px;
    float: left;
    margin-right: 10px;
}
.nav_right li a{
    font-size: 12px;
    color: #b0b0b0;
}
.nav li a:hover{
    color: white;
}

.buy_hidden{  /*隐形的图出来*/
    width: 320px;
    height: 78px;
    box-shadow: 0 15px 10px rgba(0,0,0,.3);
    border: 1px solid rgba(0,0,0,.3);
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 40px;
    display: none;
    transition: all .5s;
    z-index: 88;
}
.nav .nav_right:hover .buy_hidden{
    display: block;
    transition: all 2s ease-in 1s;
}
/*黑条导航栏结束*/
/*白色导航条开始*/
.white_nav{
    width: 100%;
    height: 100px;
    clear: both;
    position: relative;
}
.wrap{
    width:1249px;
    height: 100px;
    margin: 0 auto;
}
.logo{
   float: left;
    margin-top: 21.5px;
}
.center li a{
    color: black;
    font-size: 16px;
    font-weight: bold;
}
.center li a:hover{
    color:red;
}

.center{
    margin-left: 200px;
    margin-right: 70px;
}
.center li{
    float: left;
    line-height: 100px;
    margin-right: 20px;
}
.search>input{
    width: 250px;
    height: 50px;
    float: left;
    border-right: none;
}
.search>button{
    width: 52px;
    height:58px;
    float: left;
    font-size: 20px;
    font-weight: bold;
    background-color: #ffffff;

}
.search{
    float: right;
    margin-top: 25px;
    margin-right: 50px;
}
.search>button:focus,.search>input:focus{
    border-color: #ff6700;
}
.search>button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
}
.white_nav_hidden{
    position: absolute;
    width: 100%;
    height: 230px;
    left: 0;
    top: 100px;
    display: none;
    transition: all 1s;
}
.white_nav li:hover .white_nav_hidden{
    position: absolute;
display: block;
}
/*隐藏栏手机*/
.photo1{
    width:1249px;
    height: 230px;
    margin: 0 auto;
}
.photo1 div{
    width: 204px;
    height: 201px;
    background-color: white;
    float: left;
    margin-right: 4px;
}
.photo1 img{
    width: 160px;
    height: 110px;
}
.title{
    margin: 0;
    line-height: 20px;
    color: #333;
}
.price{
    margin: 0;
    line-height: 20px;
    color: #ff6700;
}
/*白色导航条结束*/
/*轮播图和滑动门开始*/

.lunbotu{
    width:1249px;
    height: 460px;
    margin: 0 auto;
    background-image:url("../images/xmad_15486597522208_HOEjJ.jpg");
    background-size: cover;
    -webkit-animation: picture 10s infinite forwards ;
    position: relative;
}

@-webkit-keyframes picture{
    0%{
        background-image: url("../images/xmad_15486597522208_HOEjJ.jpg");
    }
    25%{
        background-image: url("../images/xmad_15488151829917_hENZU.jpg");
    }
    50%{
    background-image: url("../images/xmad_15489036241498_XVwut.jpg");
    }
    75%{
  background-image: url("../images/xmad_15500560064953_Bgumq.jpg");
    }
    100%{
    background-image: url("../images/xmad_15410029988871_TdzPQ.jpg");
    }
}
.lunbotu:hover{
    animation: picture 10s ease-in 10s;
}
.hdm{
    position: relative;
    width: 234px;
    height: 460px;
    background-color: rgba(0,0,0,.5);
    padding-top: 20px;
    box-sizing: border-box;
}
.hdm li{
    height: 42px;
    line-height: 42px;
    text-align: left;
    padding-left: 30px;
}
.hdm li a{
    color: #fff;
    font-size: 14px;
}
.hdm li:hover{
    background-color: #ff6700;
}
 .hdm i{
     float: right;
     margin-right: 30px;
     color: rgba(255,255,255,.5);
     font-size: 20px;
     font-weight: bold;
 }
/*隐藏列表框*/
.hdm_hidden{
    position: absolute;
    width: 992px;
    height: 460px;
    background-color: white;
    left: 234px;
    top: 0;
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
    display: none;
}
.hdm li:hover .hdm_hidden{
    display: block;
    transition: all 1s;
}

.up,.down{
    width: 41px;
    height: 69px;
    background-image: url("../images/icon-slides.png");
    position: absolute;
    top: 50%;
    margin-top:-34.5px;
    cursor: pointer;
}
.up{
    left: 234px;
    background-position: -83px 0;
}
.down{
    right: 0;
    background-position: -124px 0;
}
.up:hover{
    background-position: 0 0;
}
.down:hover{
    background-position: -42px 0;
}
/*轮播图和和滑动门结束*/
/*小米广告位开始*/
.ad>ul,.ad>img{
    float: left;
}
.ad{
    margin-top: 15px;
    margin-bottom: 15px;
}
.ad>ul{
    width: 234px;
    height: 170px;
    background: #5f5750;
}
.ad ul li{
    float: left;
    width: 70px;
    padding: 19px 0;
    font-size: 12px;
    border-right: 3px solid #665E57;
}
.ad img{
    width: 316px;
    height: 170px;
    margin-left:22px;
}
.ad ul li:nth-child(3),.ad ul li:nth-child(6)
{
    border-right: 0;
}
.ad .before{
    border-bottom: 3px solid #665E57;
}
/*小米广告位结束*/
/*小米闪购开始*/
.sg{
    margin-top: 100px;
    margin-bottom: 20px;
    width:1240px;
    height:340px;
    background-color: #ff6700;
}
.sg>h2{
    float: left;

}

/*小米闪购结束*/
部分页面：
导航栏页面
在这里插入图片描述
l123zmj
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web前端历程（十七）

小米商城(未完)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="stylesheet" href="CSS/xiaomiStyle.css"/> ...
复制链接

扫一扫