直播平台开发,实现网页的导航栏和下拉菜单
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>
以上就是 直播平台开发,实现网页的导航栏和下拉菜单,更多内容欢迎关注之后的文章
标签:网页,color,li,直播,导航,下拉菜单 From: https://www.cnblogs.com/yunbaomengnan/p/16876874.html