导航条制作

作者: zhaodadaya | 来源:发表于2018-09-12 17:30 被阅读0次

脱离文档流（1-3）
导航条制作
导航条设置
html的导航条制作
html导航条制作（二）
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
导航条制作（1-1）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条2</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            margin: 50px auto;
            

        }
        li{
            list-style-type: none;
            width: 100px;
            float: left;
        }
        a:link{
            height: 20px;
            display: block;
            text-align: center;
            color:white;
            font:14px "Microsoft YaHei";
            text-decoration: none;
            font-weight: bold;
            padding: 10px 0;
        }
        a:hover{
            background-color: #00619f;
        }
        a:visited{
            color: white;
        }
        #new{
            position: relative;
        }
        img{
            position: absolute;
            left: 32px;
            top:-10px;
        }
        
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">程序开发</a></li>
            <li><a href="#">网络营销</a></li>
            <li id="new">
                <a href="#" >企业VI</a>
                <img src="img/new.png" alt="新">
            </li>
            <li><a href="#">案例展示</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

效果如下：

导航条2.png