导航分两部分的第一部分


  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <body>
        <div class="top-nav">
            <div class="container">
                <ul>
                    <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>
     
    </body>
     
    </html>

      css样式

  • 复制代码
            .top-nav {
                height: 52px;
                background-color: #333;
            }
    
            .container {
                width: 1000px;
                margin: 0 auto;
            }
    
            .top-nav .container ul li a {
                display: block;
                color: #fff;
                height: 52px;
                line-height: 52px;
                padding:  0 20px;
    
            }
            .top-nav .container ul{
                float:right;
            }
            .top-nav .container ul li {
                float: left;
            }
        </style>
    复制代码

     

posted @   指针园  阅读(25)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示