小米商城静态页面练习（二）

鹿蹊zz

已于 2022-06-30 16:05:03 修改

阅读量429

点赞数 2

分类专栏：小米商城静态页面仿写文章标签： css html 学习

于 2022-05-06 16:57:41 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/124606312

版权

小米商城静态页面仿写专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小米logo+中间导航条+右侧搜索框

海报左侧导航栏+右侧海报+圆点导航

<!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>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./font_3373002_ourrffhs0zc/iconfont.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>

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

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

                        <!-- 创建一个左侧导航菜单 -->
                        <ul class="left-meau">
                            <li>
                                <a href="#">
                                    手机
                                    <span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">电视<span>></span>

                                </a>
                            </li>
                            <li>
                                <a href="#">笔记本 平板<span>></span>

                                </a>
                            </li>
                            <li>
                                <a href="#">家电<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">出行 穿戴<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">智能 路由器<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">电源 配件<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">健康 儿童<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">耳机 音箱<span>></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">生活 箱包<span>></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="show-goods"><a href="#">Xiaomi手机</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>

                </ul>
            </div>
            <!-- 创建搜索框的容器 -->
            <div class="search-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-btn">
                        <i class="iconfont">&#xe61c;</i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</body>
</head>

样式：

.header-wrapper{
        position: relative;
    }

    /* 设置中间的header */
    .header{
        height: 100px;
    }

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

    /* 统一设置logo的超链接 */
    .header .logo a{
        position: absolute;
        width: 55px;
        height: 55px;
        left: 0;
        background: url(../img/logo-mi.png) no-repeat center;
        background-size: cover;  
        /* image-rendering: -webkit-optimize-contrast; */
    }

    /* 设置中间的导航条 */
    .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 span{
        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;   
    }

    /* 设置搜索框的容器 */
    .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{
        height: 460px;
        /* border: 1px solid red; */
        image-rendering: -webkit-optimize-contrast;
        overflow: hidden;
        position: relative;    
    }
   
    .banner img{
        width: 100%;
        position: absolute;
        vertical-align: top;
    }
     /* 设置banner圆点导航 */
     .pointer{
        position: absolute;
        bottom: 22px;
        right: 35px;
    }

    .pointer a{
        float: left;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .4); 
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .4);
        margin: 0 4px;
    }

    .pointer a:hover,
    .pointer .active{
        border-color: rgba(0, 0, 0, .4);
        background-color: rgba(255, 255, 255, .4);
    }

素材：

效果图：

鹿蹊zz

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
小米商城静态页面练习（二）

<!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&...
复制链接

扫一扫