五彩导航栏与小米商城网页设计示例-CSDN博客

本文链接：https://blog.csdn.net/callmehansea/article/details/131648891

五彩导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: black;
        }

        .one {
            background-image: url(../图片/OIP-C.jpg);
        }

        .two {
            background-image: url(../图片/OIP-C\ \(1\).jpg);
        }

        .three {
            background-image: url(../图片/OIP-C\ \(2\).jpg);
        }

        .four {
            background-image: url(../图片/OIP-C\ \(3\).jpg);
        }

        .one:hover {
            background-image: url(../图片/OIP-C\ \(4\).jpg);
            color: red;
        }

        .two:hover {
            background-image: url(../图片/OIP-C\ \(5\).jpg);
            color: blueviolet;
        }

        .three:hover {
            background-image: url(../图片/OIP-C\ \(6\).jpg);
            color: yellow;
        }

        .four:hover {
            background-image: url(../图片/OIP-C\ \(1\).jpg);
            color: blue;
        }
    </style>

</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>

</body>

</html>

小米商城

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

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

        a {
            display: inline-block;
            text-decoration: none;
            width: 90px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: black;
        }

        b {
            display: inline-block;
            text-decoration: none;
            width: 230px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        .ups {
            display: flex;
            width: 1220px;
            height: 50px;
        }

        .up1 {
            width: 230px;
            height: 50px;
        }

        .up ul {
            display: flex;
            width: 990px;
            height: 50px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            background-color: white;
        }

        .goods {
            display: flex;
            width: 1220px;
            height: 600px;
        }

        .left {
            width: 230px;
            height: 600px;
            background-color: grey;
        }

        li {
            width: 990px;
            height: 600px;
            list-style: none;
            background-image: url(../屏幕截图\ 2023-07-10\ 125740.png);
            background-size: cover;
        }

        .right ul {
            display: flex;
            width: 990px;
            height: 600px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
    </style>
</head>

<body>
    <div class="ups">
        <div class="up1">
    <img src="../作业4/下载.jpg" width="50px" height="50px">
        </div>
        <div class="up ul">
            <ul>
                <up>
                    <a href="#">Xiaomi手机</a>
                    <a href="#">Redmi手机</a>
                    <a href="#">电视</a>
                    <a href="#">笔记本</a>
                    <a href="#">平板</a>
                    <a href="#">家电</a>
                    <a href="#">路由器</a>
                    <a href="#">服务中心</a>
                    <a href="#">社区</a>
                </up>
            </ul>
        </div>
    </div>
    <div class="goods">
        <div class="left">
            <b href="#">手机</b></br>
            <b href="#">电视</b></br>
            <b href="#">家电</b></br>
            <b href="#">笔记本 平板</b></br>
            <b href="#">出行 穿戴</b></br>
            <b href="#">耳机 音箱</b></br>
            <b href="#">健康 儿童</b></br>
            <b href="#">生活箱包</b></br>
            <b href="#">智能 路由器</b></br>
            <b href="#">电源 配件</b></br>
        </div>
        <div class="right">
            <ul>
                <li>
                    <a href="#">

                    </a>
                </li>

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

</body>

</html>

五彩导航栏和小米商城