小米商城官网部分代码

于 2020-02-29 15:27:29 发布
阅读量6.9k 收藏 34
点赞数 5
分类专栏： HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44986561/article/details/104575135
版权

CSS部分

.top-bar-wrapper
{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333333;

}
.tool-bar a
{
    font-size: 14px;
    color: #b0b0b0;
    display: block;
}

.tool-bar a:hover
{
    color: white;
}

.tool-bar .line
{
    color: #b0b0b0;
    margin-left: 4px ;
    margin-right: 4px ;
    margin-top: -1px;
}


.service,.tool-bar li
{
    float: left;
}


.app
{
    position: relative;
}

/*设置app图片上面的小三角
注意这里的li:hover 的用法，因为我们要hover出这个伪元素
*/
li:hover> .app::after
{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 8px transparent solid;
    border-top: none;
    border-bottom-color: white;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}


.app .qr-code
{
    /*display: none;*/
    position: absolute;/*给二维码开启绝对定位，使其脱离文档流，不占用父元素的宽度*/
    width: 124px;
    /*height: 148px;*/
    height: 0px;
    overflow: hidden;
    z-index: 9999;
    line-height: 1;/*因为前面设置了行高，但是，这里面的文字也是父类容器的子类，会继承属性，所以要从新定义行高，保证字体紧贴图片下边*/
    text-align: center;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0 ,0, 0.3);

/*    接下来演示一下，下拉的动画效果,transition 设置属性，以及变化的时间
*/transition: height 300ms;
}

li:hover>.app .qr-code{
    /*display: block;*/
    height: 148px;
    z-index: 9999;
}


.app .qr-code span{
    color: black;
}


.qr-code img
{
    width: 90px;
    margin: 17px 17px;
}


.shopCar
{
    float: right;

}

.shopCar a
{
    width: 120px;
    text-align: center;
}

.shopCar i
{
    margin-right: 4px;
}

.shopCar:hover /*绑定父元素，保证弹出层不消失*/
{
    background-color: black;
    color: orange;
}


.user-info
{
    float: right;
}




/*设置header*/
.header
{
    height: 100px;
    /*background-color: #bfa;*/
}

.logo
{

    width: 55px;
    height: 55px;
    float: left;
    position: relative;
    overflow: hidden;
    margin-top: 22px;

}
.header .logo a
{

    position: absolute;
    left: 0;
    /*background-color: red;*/
    transition: left 0.3s;/*这个transition加在这个a这里，直接就让两个a都具有了动画的属性*/
}


.header .logo .mihome
{
    left: -55px;
}

.header .logo:hover .milogo
{
    left: 55px;
}
.header .logo:hover .mihome
{
    left: 0;
}
/*---------------上面是动画效果-------------------*/
/*设置中间导航条*/
.header-wrapper
{
    position: relative;
}


.header .nav-wrapper
{
    float: left;
    margin-left: 7px;
}


.header .nav
{
    width: 792px;
    /*background-color: #bfa;*/
    height: 100px;
    line-height: 100px;
    padding-left: 58px;
}





.nav > li/* 只让子元素浮动，后代不浮动 */
{
    float: left;
}

.all-goods-wrapper
{
    position: relative;
}


.left-menu
{
    width: 234px;
    height: 420px;
    background-color: rgba(154,151,153,0.3);
    line-height: 1;
    position: absolute;
    left: -120px;
    z-index: 999;
    padding:20px 0px;
}
.header .nav-wrapper .left-menu a
{
    display: block;
    height: 42px;
    line-height: 42px;
    color: white;
}
.header .nav-wrapper .left-menu li:hover/*   写长一点，增加优先级 */
{
    color:white ;
    background-color: rgb(255,103,0);
}

.left-menu li
{
    padding: 0 30px;
}


.left-menu a i
{
    float: right;
    line-height: 42px;
}



.nav-wrapper li a
{
    color: black;
    font-size: 16px;
    margin-right: 20px;
}





.nav-wrapper li a:hover
{
    color: rgb(255,103,0);
}




.all-goods
{
    visibility: hidden;
}


.header .goods-info
{
    height: 0px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:100px;
    left: 0px;
    z-index: 9999;
    transition: height 1s;
    /*height: 228px;*/
    /*background-color: #bfa;*/
    /*border-top: 1px solid rgb(224,224,224);*/
}

.header .nav-wrapper li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info,/*除了not（），不能混合写，只能一个一个写，因为混合写全部都要失效*/
.goods-info:hover
    /*注意：这里有选择器优先级的问题，如果我们把上面那个定义goods-info写在下面，那么就不会出现这个效果*/
{
    width: 100%;
    height: 228px;
    background-color: white;
    /*background-color: #bfa;*/
    border-top: 1px solid rgb(224,224,224);
    box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
    z-index: 9999;
}


.search-wrapper
{
    width: 296px;
    height: 50px;
    background-color: red;
    float: right;
    margin-top: 25px;
    border: 1px solid rgb(224,224,224);
}

.search-wrapper .search-inp
{
    float: left;
    border: none;
    padding:0px 10px;
    height: 50px;
    width: 224px;
    font-size: 16px;
    /*border: 1px solid rgb(224,224,224);*/
}

.search-wrapper .search-inp:focus/* 鼠标点击之后 的效果设置  */
{
    outline: 2px tomato solid;
}

.search-wrapper .search-btn
{
    float: left;
    height: 50px;
    width: 52px;
    color: #616161;
    font-size: 16px;
}

/*-------------------设置轮播图部分 中间部分----------------------*/
.banner .img-list
{
    position: relative;
}
.banner .img-list li
{
    position: absolute;
}
.banner .img-list img
{
    width: 100%;
}


.banner
{
    height: 460px;
    position: relative;
}

.pointer
{
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 30px;
    margin-bottom: 30px;
}

.pointer a
{
    float: left;
    width: 8px;
    height: 8px;
    border: 2px rgba(255,255,255,0.6) solid ;
    border-radius: 50%;
    background-color: rgba(0,0,0,.4);
    margin-right: 4px;
}
.pointer a:hover,
a.active
{
    border: 2px rgba(0,0,0,.4) solid ;
    background-color: rgba(255,255,255,0.6);
}


/*右侧固定工具栏*/
.back-top
{
    width: 26px;
    height: 206px;
    background-color: orangered;
    position: fixed;/*开启固定定位*/

    bottom: 60px;/*       */
    right: 50%;/* 无论你窗口有多大，我的右边都是窗口的一半 */

    margin-right: -639px;
    /*
    要满足等式:
    left+margin-left+width+margin-right+right=包含块的宽度

    width固定
    right窗口一半
    left为auto
    margin-left为0

    如果我们给margin-right设置成负值，那么这个元素就会自动的向右移动，因为left为auto
    */
}


/*设置中间广告栏*/

.ad
{
    height: 170px;
    margin-top: 14px
}

.ad .short-cut,
.ad li,
.ad img
{
    float: left;
}
.ad .short-cut
{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    margin-right: 14px;
}
.ad .img-list2 li{
    width: 316px;
    margin-right: 15px;
}
.ad .img-list2 li:last-child
{
    margin-right: 0;
}

.ad .img-list2 img
{
    width: 100%;
}


.ad .short-cut a
{
    display: block;
    color: #cfccca;
    height: 84px;
    width: 76px;
    text-align: center;
    overflow: hidden;
}
.ad .short-cut i{
    display: block;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 20px;
}
.ad .short-cut a:hover{
    color: white;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MI</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/Index.css">
    <link rel="stylesheet" href="./FA/css/all.css">
</head>
<body>
<!--顶部导航条-->
<div class="top-bar-wrapper">
    <div class="tool-bar w ">
        <ul class="service">
            <li><a href="">小米商城</a></li>
            <li class="line">|</li>
            <li><a href="">MIUI</a></li>
            <li class="line">|</li>
            <li><a href="">Lot</a></li>
            <li class="line">|</li>
            <li><a href="">云服务</a></li>
            <li class="line">|</li>
            <li><a href="">金融</a></li>
            <li class="line">|</li>
            <li><a href="">有品</a></li>
            <li class="line">|</li>
            <li><a href="">小爱开放平台</a></li>
            <li class="line">|</li>
            <li><a href="">企业团购</a></li>
            <li class="line">|</li>
            <li><a href="">资质证明</a></li>
            <li class="line">|</li>
            <li><a href="">协议规则</a></li>
            <li class="line">|</li>
            
            <li><a href="" class="app">下载APP
            <div class="qr-code">
                <img src="./小米.png" alt="">
                <span>小米商城APP</span>
            </div>
            
            </a></li>
            <li class="line">|</li>
            
            
            <li><a href="">Select Location</a></li>
            <li class="line">|</li>
        </ul>

        <ul class="shopCar">
            <li><a href="">
                <i class="fas fa-shopping-cart"></i>
                购物车</a></li>
        </ul>

        <ul class="user-info">
            <li><a href="">登录</a></li>
            <li class="line">|</li>
            <li><a href="">注册</a></li>
            <li class="line">|</li>
            <li><a href="">消息通知</a></li>
            <li class="line">|</li>
        </ul>



    </div>



</div>

<!--设置头部-->
<div class="header-wrapper">
    <div class="header w">
        <h1 class="logo" title="小米">
            <a href="" class="milogo"><img src="小米logo.png" alt="" ></a>
            <a href="" class="mihome"><img src="Mihome.png" alt="" ></a>
        </h1>



        <div class="nav-wrapper">
            <ul class="nav clearfix">
                <li class="all-goods-wrapper">
                    <a href="" class="all-goods">全部商品分类</a>
                
                    <ul class="left-menu">
                        <li>
                            <a href="">手机 电话卡
                            <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">电视 盒子
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">笔记本 显示器 平板
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">家电 插线板
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">出行 穿戴
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">智能 路由器
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">电源 配件
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">健康 儿童
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">耳机 音响
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">生活箱包
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                
                
                
                </li>
                <li><a href="">小米手机</a></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>


<!--                创建弹出层-->

                <div class="goods-info">

                </div>
            </ul>
        </div>


        <div class="search-wrapper">
            <form action="#" class="search">
                <input type="text" class="search-inp"><button class="search-btn">
                <i class="fas fa-search"></i>
            </button>
<!--                表单元素都是行内块，也就是说这个搜索框和按钮之间如果不写在一行，那么就会出现空隙
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>-->
            </form>
        </div>
    </div>
</div>

<!--设置而轮播图banner-->
<div class="banner-wrapper">
    <div class="banner w">
        <ul class="img-list w">
            <li><a href=""><img src="./background-pics/backpic1.jpg" alt=""></a></li>
            <li><a href=""><img src="./background-pics/backpic2.jpg" alt=""></a></li>
            <li><a href=""><img src="./background-pics/backpic3.jpg" alt=""></a></li>
            <li><a href=""><img src="./background-pics/backpic4.jpg" alt=""></a></li>
        </ul>
        <div class="pointer">
            <a  class="active" href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </div>
    </div>
</div>

<div class="back-top"></div>

<div class="ad w">
    <ul class="short-cut">
        <li><a href="">
            <i class="fas fa-clock"></i>
            小米秒杀</a></li>
        <li><a href="">
            <i class="fas fa-angle-right"></i>
            企业团购</a></li>
        <li><a href="">
            <i class="fas fa-map-marked"></i>
            F码通道</a></li>
        <li><a href="">
            <i class="fas fa-star"></i>
            米粉卡</a></li>
        <li><a href="">
            <i class="fab fa-accusoft"></i>
            以旧换新</a></li>
        <li><a href="">
            <i class="fab fa-weibo"></i>
            话费充值</a></li>
    </ul>
    
    <ul class="img-list2">
        <li><a href=""><img src="../MI/background-pics/ad01.jpg" alt=""></a></li>
        <li><a href=""><img src="../MI/background-pics/ad02.jpg" alt=""></a></li>
        <li><a href=""><img src="../MI/background-pics/ad03.jpg" alt=""></a></li>
    </ul>
</div>


</body>
</html>
茅庐猫
关注
  • 5
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值