小米商城的导航栏

最新推荐文章于 2024-08-25 22:44:31 发布

达人007

最新推荐文章于 2024-08-25 22:44:31 发布

阅读量287

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45805209/article/details/141189694

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        .navbar {
            background-color: #333;
            padding: 10px 0;
            display: flex;                              /* 子元素会在一行中水平排列，非常适合导航栏 */
            justify-content: space-between;             /* 子元素左右对齐 */
            align-items: center;                        /* 子元素垂直居中 */
        }


        .logo {
            height: 40px;
            margin-left: 20px;
        }

        .center-section {
            display: flex;
            justify-content: center;
            flex-grow: 1;
        }

        .center-section a {
            color: #fff;
            text-decoration: none;
            margin: 0 15px;
            font-size: 14px;
            white-space: nowrap;
        }

        .center-section a:hover {
            color: orange;
        }

        .right-section {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .right-section a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 14px;
        }

        .right-section span {
            color: #fff;
            margin: 0 5px;
        }

        .right-section a:hover {
            color: orange;
        }
    </style>
</head>

<body>
    <div class="navbar">
        <div class="left-section">
            <img src="https://i1.mifile.cn/f/i/2019/milogo.png" alt="logo" class="logo">
        </div>
        <div class="center-section">
            <a href="#">小米官网</a>
            <a href="#">小米商城</a>
            <a href="#">小米澎湃OS</a>
            <a href="#">小米汽车</a>
            <a href="#">小米影像</a>
            <a href="#">云服务</a>
            <a href="#">IoT</a>
            <a href="#">有品</a>
            <a href="#">小爱开放平台</a>
            <a href="#">Location</a>
        </div>
        <div class="right-section">
            <a href="#">登录</a>
            <span>|</span>
            <a href="#">注册</a>
        </div>
    </div>
</body>

</html>