2021-02-23

最新推荐文章于 2024-11-08 16:59:14 发布

weixin_46840701

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量102

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46840701/article/details/113985464

版权

小米商城首页（CSS练习9）

效果截图
小米商城

代码部分

首页HTML主体代码index.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站
    </title>
    <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 、小米10 Pro、小米MIX Alpha，Redmi 红米系列Redmi Note 9、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />
    <meta name="keywords" content="小米,redmi,小米11,Redmi Note 9,小米MIX Alpha,小米商城" />
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/font-awesome.css">
    <!-- 当前页面样式表 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="./img/favicon.ico">
</head>
<body>
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 --> 
    <div class="topbar-wrapper">
        <!-- 内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左侧导航 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">IoT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">天星数科</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li>
                    <a class="app" href="javascript:;">
                        下载app
                    <!-- 添加弹出层 -->
                        <div class="qrcode">
                            <img src="./img/qrcode.png" alt="">
                            <span>小米商城app</span>
                        </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="javascript:;">智能生活</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
                <li class="line">|</li>
            </ul>
            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fa fa-shopping-cart"></i>&nbsp&nbsp购物车
                    <div class="commodity">
                    </div>
                </a></li>
            </ul>
            <!-- 用户相关信息 -->
            <ul class="user-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部外部容器 -->
    <div class="header-warpper">
        <!-- 头部内部容器 -->
        <div class="header w clearfix">
            <!-- 头部logo -->
            <div class="logo">
                <a class="home" href="javascrpt:;"></a>
                <a class="mi" href="javascrpt:;"></a>
            </div>
            <!-- 创建一个中间导航条容器 -->
            <div class="nav-warpper">
                <ul class="nav">
                    <li class="allgoods-warpper">
                        <a class="allgoods" href="#">全部商品分类</a>
                        
                        <!-- 创建一个左侧导航菜单 -->
                        <ul class="left-menu">
                            <li class="menu-content">
                                <a href="#">手机 电话卡
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                <ul class="content content1">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content2">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content3">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content4">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                            </li>
                            <li class="menu-content">
                                <a href="#">电视 盒子
                                    <i class="fa fa-angle-right"></i>
                                </a>                            
                                <ul class="content content1">
                                    <li><a href="#">小米透明电视</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content2">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content3">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>
                                <ul class="content content4">
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                    <li><a href="#">小米11</a></li>
                                </ul>    
                            </li>
                            <li>
                                <a href="#">笔记本 显示器
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">家电 插线板
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">出行 穿戴
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">智能 路由器
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">电源 配件
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">健康 儿童
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">耳机 音箱
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">生活 箱包
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="show-goods"><a href="#">小米手机</a></li>
                    <li class="show-goods"><a href="#">Redmi红米</a></li>
                    <li class="show-goods"><a href="#">电视</a></li>
                    <li class="show-goods"><a href="#">笔记本</a></li>
                    <li class="show-goods"><a href="#">家电</a></li>
                    <li class="show-goods"><a href="#">路由器</a></li>
                    <li class="show-goods"><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                    <!-- 创建一个弹出层 -->
                    <div class="goods-info">
                    </div>
                </ul>
            </div>   
            <!-- 创建搜索框的容器 -->
            <div class="search-warpper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-btn">
                        <i class="fa fa-search"></i>                       
                    </button>
                    <!-- <span class="span1">Redmi note8 Pro</span>
                    <span class="span2">小米</span> -->
                </form>
            </div>
        </div>
    </div>

    <!-- 创建banner容器-->
    <div class="banner-warpper">
        <div class="banner w">
            <ul class="img-list">
                <li>
                    <a href="">
                        <img src="./img/banner1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./img/banner2.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./img/banner3.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./img/banner4.webp" alt="">
                    </a>
                </li>
            </ul>
            <div class="pointer">
                <a class="active" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>

            <div class="prev-next">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>

    <!-- 返回顶部的固定条 -->
    <div class="back-top">
        <ul>
            <li>
                <a href="#"><img src="./img/b-1.png" alt="" class="static"></a>
                <a href="#"><img src="./img/b1.png" alt="" class="hover">
            </a></li>
            <li>
                <a href="#"><img src="./img/b-2.png" alt="" class="static"></a>
                <a href="#"><img src="./img/b2.png" alt="" class="hover"></a></li>
            <li>
                <a href="#"><img src="./img/b-3.png" alt="" class="static"></a>
                <a href="#"><img src="./img/b3.png" alt="" class="hover"></a></li>
            <li>
                <a href="#"><img src="./img/b-4.png" alt="" class="static"></a>
                <a href="#"><img src="./img/b4.png" alt="" class="hover"></a></li>
            <li>
                <a href="#"><img src="./img/b-5.png" alt="" class="static"></a>
                <a href="#"><img src="./img/b5.png" alt="" class="hover"></a></li>
        </ul>
    </div>

    <!-- 广告块 -->
    <div class="ad w">
        <ul class="shortcut">
            <li>
                <a href="#">
                    <img src="./img/f1.png" alt="小米秒杀">
                    小米秒杀
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/f2.png" alt="企业团购">
                    企业团购
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/f3.png" alt="F码通道">
                    F码通道
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/f4.png" alt="米粉卡">
                    米粉卡
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/f5.png" alt="以旧换新">
                    以旧换新
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/f6.png" alt="话费充值">
                    话费充值
                </a>
            </li>

        </ul>
        <ul class="imgs">
            <li>
                <a href="#">
                    <img src="./img/ad1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/ad2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/ad3.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

首页css代码index.css

/* 顶部导航条外部容器 */
.topbar-wrapper{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

/* 左侧导航条 */
.service,.topbar li{
    float: left;
}
/* 导航条内文字 */
.topbar a{
    font-size: 12px;
    color: #b0b0b0;
    display: block;
}
/* 超链接移入效果 */
.topbar a:hover{
    color: white;
}
/* 分割线 */
.topbar .line{
    font-size: 12px;
    color: #424242;
    margin: 0 8px;
}

/* 下载app内样式 */

/* 小三角 */
.app{
    position: relative;
    z-index: 9999;
}
.app::after{
    display: none;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    border: 10px solid transparent;
    border-top: none;
    border-bottom-color: white;
}
/* 下拉框 */
.app .qrcode{
    position: absolute;
    left: -40px;
    width: 124px;
    height: 0;
    overflow: hidden;  
    line-height: 1;
    text-align: center;
    background-color:white ;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    transition: height .3s;
}
.app .qrcode img{
    width: 90px;
    margin: 17px 17px 10px 17px;
}
.app .qrcode span{
    font-size: 14px;
    color: #000;
}
.app:hover .qrcode{
    height: 148px;
}
.app:hover::after{
    display: block;   
}
/* 右侧导航条 */
.shop-cart,.user-info{
    float: right;
}
/* 购物车文字样式 */
.shop-cart a{
    width: 120px;
    background-color: #424242;
    /* 文字居中 */
    text-align: center;
}
.shop-cart{
    margin-left: 26px;
    position: relative;
}
.shop-cart i{
    margin-right: 2px;
}
.shop-cart:hover a{
    background-color: white;
    color: #ff6700;
}
/* 购物车栏框 */
.commodity{
    width: 300px;
    height: 0;
    background-color: white;
    position: absolute;
    left: -180px;
    text-align: center;
    /* 上边无阴影 */
    box-shadow:-5px 5px 10px -4px rgba(0, 0, 0, .3),
    5px 5px 10px -4px rgba(0, 0, 0, .3);
    transition: height .3s;
    z-index: 9999;
}
.shop-cart:hover .commodity{
    height: 100px;
}

/* 头部内容 */
.header-warpper{
    position: relative;
}
/* 头部整体样式 */
.header{
    height: 100px;
    background-color: white;
}
.header .logo{
    float: left;
    margin-top: 22px;     
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
}
/* 设置logo的超链接 */
.header .logo a{
    position: absolute;
    left: 0;
    width: 55px;
    height: 55px;
    background-image: url(../img/mi-logo.png);
    background-color: #ff6700;
    background-position: center;
    transition: left .3s;
}
.header .logo .home{
    background-image: url(../img/mi-home.png);
    left: -55px;
}
/* 鼠标移入后两个图标的位置 */
.logo:hover .mi{
    left: 55px;
}
.logo:hover .home{
    left: 0;
}

/* 中间导航条样式 */
.header .nav-warpper{
    float: left;
    margin-left: 7px;
}
.nav{
    width: 850px;
    height: 100px;
    line-height: 100px;   
    padding-left: 58px;
}
/* 隐藏全部商品类 */
.nav .allgoods{
    visibility: hidden;
}
.nav > li{
    float: left;
}
.nav li a{
    padding: 20px 20px 20px 0;
    color: #000;
}
.nav li a:hover{
    color: #FF6700;
}

/* 设置左侧导航条的样式 */
.allgoods-warpper{
    position: relative;
}
.left-menu{
    width: 234px;
    height: 419px;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    z-index: 998;
    left: -120px;
    margin-top: 1px;
    line-height: 1;
}
.left-menu li a{
    display: block;
    padding: 0;
    height: 42px;
    line-height: 42px;
    color: white;
    padding: 0 30px;
}
.left-menu a i{
    float: right;
    line-height: 42px;
}
.left-menu li a:hover{
    color: white;
    background-color: #ff6700;
}
/* 左侧导航条移入后显示内容 */
.left-menu .content{
    display: none;
    border-top: 1px solid #e0e0e0;  
    border-bottom: 1px solid #e0e0e0; 
    width: 248px;
    height: 458px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 234px; 
    margin-top: -1px;   
}
.left-menu .content2{
    left: 482px;
}
.left-menu .content3{
    left: 730px;
}
.left-menu .content4{
    left: 978px;
    width: 247px;
    border-right: 1px solid #e0e0e0;
} .content li a{    
    height: 76px;
    line-height: 76px;
    color: #000;
} .content li a:hover{
    background-color: #fff;
    color: #ff6700;
}
.left-menu .menu-content:hover .content{
    display: block;
}
/* 中间导航条下拉容器 */
.nav .goods-info{
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    transition: height .3s;
    z-index: 999;
}
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover {
    height: 228px;
    border-top: 1px solid rgb(224, 224, 224);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
}

/* 设置搜索框 */
.search-warpper{
    width: 296px;
    height: 50px;
    float: right;
    background-color: red;    
    margin-top: -75px;
}
.search-warpper .search-inp{
    box-sizing: border-box;
    width: 244px;
    height: 50px;
    border: none;
    padding: 0 10px;
    float: left;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    outline: none;
}

.search-warpper .search-btn{
    float: left;
    width: 52px;
    height: 50px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #616161;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    border-left: none;
    outline: none;
}
.search-warpper .search-inp:focus,
.search-warpper .search-inp:focus + button{
    border-color: #ff6700;
}

.search-btn:hover{
    background-color: #ff6700;
    color: white;
    border: none;
}
/* .search{
    position: relative;
}
.search span{
    position: absolute;   
    top:13px;
    padding: 1px 5px;
    font-size: 14px;
    background-color: #ddd;
    color: white;
}
.search .span1{
    right: 120px;
}
.search .span2{
    right: 70px;
} 
.search-warpper .search-inp:focus span{
    visibility: hidden;
} */

/* 设置banner */
.banner img{
    width: 100%;
    vertical-align: top;
}
.banner .img-list li{
    position: absolute;
}
.banner{
    position: relative;
    height: 460px;
}
/* 设置导航点 */
.pointer{
    position: absolute;
    right: 35px;
    bottom: 22px;
}
.pointer a{
    float: left;
    width: 6px;
    height: 6px;
    border: 2px rgba(255, 255, 255, .4) solid;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    margin-left: 6px;
}
.pointer a:hover,
.pointer a.active{
    border-color:rgba(0, 0, 0, .4) ;
    background-color: rgba(255, 255, 255, .4);
}
.prev-next a{
    width: 41px;
    height: 69px;
    background-image: url(../img/icon-slides.png);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.prev-next .prev{
    left: 234px;
    background-position: -84px 0;
}
.prev-next .prev:hover{
    background-position: 0 0;
}
.prev-next .next{
    right: 0;
    background-position: -125px 0;
}
.prev-next .next:hover{
    background-position: -42px 0;
}

/* 返回顶部固定条 */
.back-top{
    width: 26px;
    height: 206px;
    position: fixed;
    bottom: 60px;
    /* 运用布局等式，使元素先居于视口中间位置，再调整具体位置 */
    right: 50%;
    margin-right: -639px;
}
.back-top li{
    height: 42px;
    border: 1px solid #f5f5f5;
    position: relative;
}
.back-top li a img{
    width: 20px;
    height: 20px;
    /* 将图片居中 */
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;  
    transition: opacity .2s;
}
/* 鼠标移入后图标效果 */
.back-top li a .static{
    opacity: 1;
}
.back-top li a .hover{
    opacity: 0;   
}
.back-top li:hover .hover{
    opacity: 1;
}
.back-top li:hover .static{
    opacity: 0;
}

/* 广告块 */
.ad{
    height: 170px;
    margin-top: 17px;
}
.shortcut,
.shortcut li,
.ad .imgs li{
    float: left;
}
.shortcut{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    margin-right: 14px;
    padding-top: 1px;
}
.shortcut li a{
    width: 70px;
    height: 66px;
    padding: 18px 3px 0;
    font-size: 12px;
    color: #fff;
    opacity: .7;
    transition: opacity .2s;
    display: block;
    text-align: center;
}
.shortcut a:hover{
    opacity: 1;
}
.shortcut li{
    position: relative;
}
/* 设置上边框 */
.shortcut li::before{
    content: '';
    position: absolute;
    width: 64px;
    height: 1px;
    background-color: #665e57;
    left: 0;
    right: 0;
    margin: 0 auto;
}
/* 设置左边框 */
.shortcut li::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto 0;
    width: 1px;
    height: 70px;
    background-color: #665e57;
}
.shortcut a img{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}
.ad .imgs li{
    width: 316px;
    margin-right: 15px;
}
.ad .imgs li:last-child{
    margin: 0;
}
.ad .imgs img{
    /* 基线对齐 */
    width: 100%;
    vertical-align: top;
}

公共样式表base.css

/* 公共样式 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

body{
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    min-width: 1226px;
}

/* 设置一个表示中间宽度的类 */
.w{
    /* 固定容器的宽度 */
    width: 1226px;
    margin: 0 auto;
}

a{
    text-decoration: none;
}