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

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

1. HTML设置菜单项

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

 

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

​

 2. 垂直导航栏

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

 

1

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

 

3. 水平导航栏

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

 

3.1 内联列表项

 

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

 

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