导航条

作者: v_c61b | 来源:发表于2018-04-02 20:31 被阅读0次

导航条设置
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
分页导航栏开班信息
Bootstrap - 导航条
Bootstrap - 导航条2
练习二导航条
Swift - 使用导航条和导航条控制器来进行页面切换

···html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
.q{
width:1300px;
height:40px;
margin:50px auto;
background-color:blue;
background-image:url(78.png);
}

.w{
    width:600px;
    height:40px;
    float:left;

}

.w ul{
    
    list-style:none;
    font-size:15px;

}

.w a{

    float:left;
    text-decoration:none;
    margin-right:30px;  
    font-weight:bold;
    margin-top:1px;


}

.w a:hover{

    background-color:red;
}

.e{

    width:700px;
    height:40px;
    float:right;

}

.e ul{

    list-style:none;

}
.e a{

    float:left;
    margin-right:20px;
    text-decoration:none;


}   

.e a:hover{
    background-color:blue;
}

</style>

</head>
<body>

<div class="q">
        <div class="w">
            <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>
                <li><a href="#">少儿</a></li>
                <li><a href="#">公开课</a></li></ul></div>
        <div class="e">
            <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>
                <li><a href="#">排片表</a></li>
                <li><a href="#">驴榜</a></li>
                <li><a href="#">更新列表</a></li></ul></div></div>

</body>
</html>