小米官网静态网页项目实战5

2021-04-27 19:31:33 阅读：151 来源： 互联网

标签：网页设置 color height background position 官网小米 left

商品分类导航条以及中间广告栏
结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base1.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index1.css">

</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:;">loT</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 href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li class="app-wrapper">
                    <a class="app" href="javascript:;">下载app
                    <div class="qrcode">
                        <img src="../mi/img/download.png" alt="">
                        <span>小米商城APP</span>
                    </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>               
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车（０）
                    </a>
                </li>
            </ul>

            <!-- 用户登录注册 -->
            <ul class="use-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>
                <li class="line">|</li>
            </ul>
  
        </div>
    </div>

    <!-- 创建一个头部的外部容器 -->
    <div class="header-wrapper">
        <div class="header w clearfix">
            <!-- 创建一个logo -->
            <h1 class="logo" title="小米">
                小米官网
                <a class="home" href="/"></a>
                <a class="mi" href="/"></a>
            </h1>

            <!-- 创建一个中间导航条的容器 -->
            <div class="nav-wrapper">
                <!-- 创建导航条 -->
                <ul class="nav clearfix" c>
                    <li class="all-goods-wrapper">
                        <a class="all-goods" href="#">全部商品分类</a>
                    

                        <!-- 创建一个左侧导航菜单 -->
                        <ul class="left-meau">
                            <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 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-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <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">
                <li>
                    <a href="#">
                        <img src=".//img/banner1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src=".//img/banner2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src=".//img/banner3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src=".//img/banner4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src=".//img/banner5.jpg" 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>
                <a href="javascript:;"></a>
            </div>

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

</body>
</html>

样式：

    /* 主页index1.html的样式表 */

    /* 顶部导航条的样式 */
    .topbar-wrapper{
        /* 设置宽度全屏 */
        width: 100%;
        /* 设置高度和行高 */
        height: 40px;
        line-height: 40px;
        /* 设置背景颜色 */
        background-color: #333;
    }

    /* 设置超链接的颜色 */
    .topbar a{
        font-size: 12px;
        color:#b0b0b0;
        display: block;
    }

    /* 设置超链接移入的效果 */
    .topbar a:hover{
        color: #fff;
    }

    /* 设置中间分割线 */
    .topbar .line{
        font-size: 12px;
        color: #424242;
        margin: 0px 8px;
        margin-top: -1px;
    }

    /* 设置左侧导航栏 */
    .service, .topbar li{
        float: left;
    }

    .app{
        position: relative;
    }
    /* 设置app下的小三角 */
    /* .app-wrapper:hover > .app::after*/
    .app::after{ 
        display: none;
        content: "";
        /* 设置绝对定位 */
        position: absolute;
        width: 0;
        height: 0;
        /* 设置四个方向的边框 */
        border: 8px solid transparent;
        /* 去除上边框 */
        border-top: none;
        /* 单独设置下边框的颜色 */
        border-bottom-color: #fff;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    /* .app-wrapper:hover>.app .qrcode{
        display: block;
    } */
    .app:hover .qrcode,
    .app:hover::after{
        display: block;
        height: 148px;
    }
    /* 设置下载app二维码的下拉 */
    .app .qrcode{
        /* 使其脱离文档流 */
        /* display: none; */
        position: absolute;
        left: -40px;
        width: 124px;
        /* height: 148px; */
        height: 0;
        overflow: hidden;
        /* 设置行高 */
        line-height: 1;
        /* 使文字居中 */
        text-align: center;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        /* transition用来为样式设置过渡效果 */
        transition: height 0.3s;
        z-index: 9999;
    }

    /* 设置二维码图片 */
    .app .qrcode img{
        width: 90px;
        margin: 17px;
        margin-bottom: 10px;
    }

    /* 设置二维码中的文字 */
    .app .qrcode span{
        font-size: 14px;
        color: #000;
    }

    /* 设置右侧导航 */
    .shop-cart, .use-info{
        float: right;
    }

    /* 设置购物车的内边距 */
    .shop-cart{
        margin-left: 26px;
    }

    /* 设置购物车（０）这个超链接 */
    .shop-cart a{
        width: 120px;
        background: #424242;
        /* 设置购物车居中 */
        text-align: center;
    }

    /* 设置图标购物车与购物车之间的距离 */
    .shop-cart i{
        margin-right: 2px;
    }

    /* 设置超链接购物车移入效果 */
    .shop-cart:hover a{
        background-color: #fff;
        color:#FF6700;
    }

    .header-wrapper{
        /* background-color: red; */
        position: relative;
    }

    /* 设置中间的header */
    .header{
        height: 100px;
        /* background-color: #ff0; */
    }

    /* 设置logo的h1样式 */
    .header .logo{
        float: left;
        margin-top: 22px;
        width: 55px;
        height: 55px;
        position: relative;
        overflow: hidden;
        text-indent: -9999px;
    }

    /* 统一设置logo的超链接 */
    .header .logo a{
        position: absolute;
        width: 55px;
        height: 55px;
        left: 0;
        background-color: #FF6700;
        background-image: url(../img/mi-logo.png);
        background-position: center;
        transition: left 0.3s;
    }

    /* 设置home图片 */
    .header .logo .home{
        left: -55px;
        background-image: url(../img/mi-home.png);
    }

    /* 设置鼠标移入以后两个图标的位置 */
    .header .logo:hover .mi{
        left: 55px;
    }

    .header .logo:hover .home{
        left: 0;
    }

    /* 设置中间的导航条 */
    .header .nav-wrapper{
        float: left;
        margin-left: 7px;
    }

    /* 设置导航条 */
    .header .nav{
        /* width: 792px; */
        height: 100px;
        line-height: 100px;
        padding-left: 58px;
    }

    /* 设置导航条中的li */
    .nav > li{
        float: left;
    }

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

    /* 设置左侧导航条的样式 */
    .left-meau{
        width: 234px;
        height: 420px;
        padding: 20px 0;
        background-color: rgba(0, 0, 0, .6);
        position: absolute;
        z-index: 999;
        left: -120px;
        line-height: 1;

    }

    ul.left-meau  li a{
        display: block;
        height: 42px;
        line-height: 42px;
        color: white;
        margin-right: 0;
        padding: 0 30px;
        font-size: 14px;
    }

    ul.left-meau  li a:hover{
        color: white;
        background-color: #FF6700;
    }

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

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

    .nav-wrapper li a:hover{
        color: #FF6700;
    }

    /* 隐藏全部商品 */
    .all-goods{
        visibility: hidden;   
    }

    .nav .goods-info{
        /* height: 228px; */
        height: 0;
        overflow: hidden;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 100px;
        left: 0;
        transition: height 0.3s;
        z-index: 9999;
    }

    /* .nav li:not(:first-of-type):not(:nth-child(9)):not(:nth-child(10)):hover ~ .goods-info, */
    .nav .show-goods:hover ~ .goods-info,
    .goods-info:hover{
        height: 228px;
        border-top: 1px solid rgba(224, 224, 224);
        box-shadow: 0 5px 3px rgba(0, 0, 0, .3);
    }

    /* 设置搜索框的容器 */
    .search-wrapper{
        width: 296px;
        height: 50px;
        float: right;
        margin-top: 25px;
    }
    /* 设置左侧搜索框 */
    .search-wrapper .search-inp{
        box-sizing: border-box;
        width: 244px;
        border: none;
        float: left;
        height: 50px;
        padding: 0 10px;
        font-size: 16px;
        border: 1px solid rgb(224, 224, 224);
        outline: none;
    }

    /* 设置input获取焦点后的样式 */
    .search-wrapper .search-inp:focus,
    .search-wrapper .search-inp:focus + button{
        border-color: #FF6700;
    }
    /* 设置右侧搜索框 */
    .search-wrapper .search-btn{
        float: left;
        height: 50px;
        width: 52px;
        padding: 0;
        border: none;
        background-color: #fff;
        color: #616161;
        font-size: 16px;
        border: 1px solid rgb(224, 224, 224);
        border-left: none;
    }

    .search-wrapper .search-btn:hover{
        background-color: #FF6700;
        color: white;
        border: none;
    }

    /* 设置banner */
    .banner{
        position: relative;
        height: 460px;
    }

    .banner .img-list li{
        position: absolute;
    }

    .banner img{
        width: 100%;
        vertical-align: top;
    }

    /* 设置5个导航点 */
    .pointer{
        position: absolute;
        bottom: 22px;
        right: 35px;
    }

    .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: 16px;
    }

    .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: 0px 0;
    }

    .prev-next .next{
        right: 0;
        background-position: -125px 0;
    }

    .prev-next .next:hover{
        background-position: -42px 0;
    }

素材：

请添加图片描述

效果图：在这里插入图片描述
注意：图片切换箭头使用了雪碧图

标签：网页,设置,color,height,background,position,官网,小米,left
来源： https://blog.csdn.net/weixin_53732821/article/details/116207943

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小米官网静态网页项目实战5