导航栏的HTML的布局方式

最新推荐文章于 2023-11-16 19:02:00 发布

屁都不会

最新推荐文章于 2023-11-16 19:02:00 发布

阅读量4.8k

点赞数 5

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_58560220/article/details/126342478

版权

1.利用浮动完成布局

以小米导航栏为例

  <style>
        * {
            padding: 0;
            margin: 0;
            /* 通配符全选，取消内外边距的小缝隙    // 不建议使用通配符 */
        }

        header {
            width: 100%;
            background-color: #333333;
            /* 设置背景 */
        }

        div {
            width: 1226px;
            height: 40px;
            margin: auto;
            /* 设置靶心居中 */
            color: rgb(164, 163, 163);
            /* 字体颜色 */
            line-height: 40px;
            /* 字体居中 */
            font-size: 12px;
            /* 字体大小 */



        }

        ul {
            list-style: none;
            /* 取消列表的点 */

        }

        .left>li {
            float: left;
            /* 利用浮动，完成元素类型转换，使他们横向排列 */
        }

       .left> span {
            float: left;
            font-size: 12px;
            color: #4b4a46;
            margin: auto 5px;
            /* 设置左边 中间的小线，用左右外边距隔开 */
            
        }

        .right>li {
            float: right;
        }
        .right>span{
            float: right;
            font-size: 12px;
            color: #4b4a46;
            margin: auto 5px;
            /* 设置 右面中间的小线，用左右外边距隔开 */
        }

       .right>li:nth-child(1){
        width: 120px;
        text-align: center;
       }
      
    </style>
</head>

<body>
    <header>
        <div>

            <ul class="left">
                <li>小米官网</li><span>|</span>
                <li>小米商城</li><span>|</span>
                <li>MIUI</li><span>|</span>
                <li>lot</li><span>|</span>
                <li>云服务</li><span>|</span>
                <li>天星数科</li><span>|</span>
                <li>有品</li><span>|</span>
                <li>小爱开发平台</li><span>|</span>
                <li>企业团购</li><span>|</span>
                <li>资质证照</li><span>|</span>
                <li>协议规则</li><span>|</span>
                <li>下载app</li><span>|</span>
                <li>Select location</li>
            </ul>
            <ul class="right">
                <li>🛒购物车(0)</li>
                <li>消息通知</li><span>|</span>
                <li>注册</li><span>|</span>
                <li>登录</li>
   
                
            </ul>
        </div>
    </header>
</body>

2.利用弹性盒子布局

大体无改变，浮动换成弹性盒子

 <style>
        * {
            padding: 0;
            margin: 0;
            /* 通配符全选，取消内外边距的小缝隙    // 不建议使用通配符 */
        }

        header {
            width: 100%;
            background-color: #333333;
            /* 设置背景 */
        }

        div {
            width: 1226px;
            height: 40px;
            margin: auto;
            /* 设置靶心居中 */
            color: rgb(164, 163, 163);
            /* 字体颜色 */
            line-height: 40px;
            /* 字体居中 */
            font-size: 12px;
            /* 字体大小 */
            display: flex;
            justify-content: space-between;
            /* 子元素两端对齐 */



        }

        ul {
            list-style: none;
            /* 取消列表的点 */

        }

        .left {
          display: flex;
          /* 父元素设置弹性盒子，控制子元素布局 */
        }

       .left> span {
            font-size: 12px;
            color: #4b4a46;
            margin: auto 5px;
            /* 设置左边 中间的小线，用左右外边距隔开 */
            
        }

        .right{
           display: flex;
          
        }
        .right>span{
            float: right;
            font-size: 12px;
            color: #4b4a46;
            margin: auto 5px;
            /* 设置 右面中间的小线，用左右外边距隔开 */
        }

       .right>li:nth-child(1){
        width: 120px;
        text-align: center;
       }
      
    </style>
</head>

<body>
    <header>
        <div>

            <ul class="left">
                <li>小米官网</li><span>|</span>
                <li>小米商城</li><span>|</span>
                <li>MIUI</li><span>|</span>
                <li>lot</li><span>|</span>
                <li>云服务</li><span>|</span>
                <li>天星数科</li><span>|</span>
                <li>有品</li><span>|</span>
                <li>小爱开发平台</li><span>|</span>
                <li>企业团购</li><span>|</span>
                <li>资质证照</li><span>|</span>
                <li>协议规则</li><span>|</span>
                <li>下载app</li><span>|</span>
                <li>Select location</li>
            </ul>
            <ul class="right">
                <li>🛒购物车(0)</li>
                <li>消息通知</li><span>|</span>
                <li>注册</li><span>|</span>
                <li>登录</li>
   
                
            </ul>
        </div>
    </header>
</body>

效果