登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

CSS实现导航条

案例

实现 网站顶部导航条 时,需要将里面的 div设置为 内联块状元素,否则 margin属性 会影响外部 div

https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            color: #666;
            background: #F4F4F4;
            font-size: 12px;
            font-family: "microsoft yahei";
            height: 36px;
        }
        .nav-cnt{
            width: 1180px;
            margin: 0 auto;
            height: 36px;
        }
        .slogan{
            float: left;
            margin: 11px 0 0 14px;
        }
        .nav-right{
            float: right;
            list-style: none;
            margin: 11px 0 0 0;
        }
        .nav-item{
            float: left;
            padding: 0 16px;
            border-right: 1px solid #DDDDDD;
            height: 12px;
            line-height: 12px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-cnt">
            <div class="slogan">
            让旅游更幸福
            </div>


            <ul class="nav-right">
                <li class="nav-item">您好,请登录</li>
                <li class="nav-item">免费注册</li>
                <li class="nav-item">消息</li>
            </ul>
        </div>
    </div>
</body>
</html>

原文出处:https://malaoshi.top/show_1IX1Ge5X6ZpD.html