直播平台开发，实现网页的导航栏和下拉菜单

直播平台开发，实现网页的导航栏和下拉菜单

1. HTML设置菜单项

使用CSS可以美化HTML的菜单！导航栏类似于链接列表，所以使用<ul>属性来创建，效果如下：

 

<ul>
<li><a href="#">新晋作者</a></li>
<li><a href="#">作者周榜</a></li>
<li><a href="#">作者总榜</a></li>
<li><a href="#">原力榜</a></li>
</ul>

​

 2. 垂直导航栏

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

 

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    
}
 
li a {
    display: block;
    color:black;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: rgb(144,144,144);
    color: white;
}
</style>

 

3. 水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。如果要链接到具有相同的大小，则必须使用浮动的方法。

 

3.1 内联列表项

 

<style>
ul
{
list-style-type:none;
margin: 20px;
padding:0;
}
li
{
display:inline;
}
</style>

 

以上就是 直播平台开发，实现网页的导航栏和下拉菜单，更多内容欢迎关注之后的文章