简单导航

最新推荐文章于 2024-12-06 11:05:08 发布

原创最新推荐文章于 2024-12-06 11:05:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #浮动

web前端专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个简洁的导航栏样式设计案例，采用HTML和CSS实现。导航栏包含左侧联系方式和右侧用户操作选项，如登录、注册等。适用于前端开发初学者学习。

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*基础样式*/
        *{ margin: 0px; padding:0px;}
        body{font-family: "Microsoft YaHei" ;font-size:14px;}
        a{text-decoration:none; }
        /*样式*/
        .mynav{ padding:0px 20px;}
        .lx{ float: left; }
        .lx a{color: rgb(255,111,141);}
        .nav-list{ float: right; list-style: none; }
        .nav-list li{ float: left;}
        .nav-list li span,.nav-list li a{ color: #ddd; padding:0px 5px;}
        .nav-list li span+a{ margin-left:-10px;}
        .nav-list li i{ width:1px; height: 10px; background: #ddd; display: inline-block;}
        .lx,.nav-list li{height: 30px; line-height: 30px;}
    </style>
</head>
<body>

    <div class="mynav">
        <div class="lx">
            <a href="#">尚学堂联系方式 : 400-009-1906</a>
        </div>
        <ul class="nav-list">
            <li>
                <span>您好,请</span>
                <a href="#">登录</a>
                <i></i>
            </li>
            <li>
                <a href="#">免费注册</a>
                <i></i>
            </li>
            <li>
                <a href="#">学习在线</a>
                <i></i>
            </li>
            <li>
                <a href="#">关注</a>
                <i></i>
            </li>
        </ul>
    </div>
</body>
</html>