css小米商城

最新推荐文章于 2024-02-28 21:11:05 发布

夜深邃星如尘

最新推荐文章于 2024-02-28 21:11:05 发布

阅读量134

点赞数 1

分类专栏： web 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_74281884/article/details/131713930

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        input {
            outline: none;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .header .left img {
            width: 56px;
            height: 56px;
        }

        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .head .mid ul {
            display: flex;
        }

        .head .mid ul li {
            margin-right: 30px;
        }

        .head .mid ul a {
            color: #757575;
        }

        .head .mid ul a:hover {
            color: orange;
        }

        .head .right {
            position: relative;
        }

        .head .right input {
            width: 245px;
            height: 40px;
            border: 1px solid #757575;
            border-radius: 5px;
        }

        .head .right span {
            display: inline-block;
            width: 52px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 0;
        }


        /* banner */
        .banner {
            position: relative;
            margin-top: 20px;
        }

        .nav {
            position: absolute;
            top: 0;
            left: 0;
        }

        .nav ul {
            background-color: rgba(105, 101, 101, .6);
            width: 234px;
            height: 460px;
            font: 18px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            padding: 20px 0px;
        }

        .nav ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;

        }

        .nav ul li a {
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;

            color: aliceblue;
        }

        .nav ul li:hover {
            background-color: orange;

        }

        .banner i {
            display: inline-block;
            width: 41px;
            height: 69px;
            font-size: 30px;

        }

        .a {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            left: 240px;
        }

        .b {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            right: 0;

        }

        .banner .circle {
            width: 200px;
            position: absolute;
            right: 15px;
            bottom: 15px;
        }

        .banner .circle span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: pink;
            border-radius: 50%;


        }

        /* banner end */
    </style>
</head>

<body>
    <div class="header">
        <div class="container  head">
            <div class="left"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
                    alt=""></div>
            <div class="mid">
                <ul>
                    <li><a href="#">Xiaomi手机</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>


                </ul>
            </div>
            <div class="right">
                <input type="text">
                <span>搜索</span>
            </div>
        </div>
    </div>
    <div class="banner container">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0942f8338bc19a2cde9394479fc123c8.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
            alt="">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
            </ul>
        </div>
        <i class="a"> &lt;</i>
        <i class="b">&gt;</i>
        <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>

        </div>


    </div>



</body>

</html>

结果