首页 > 其他分享 >直播平台开发,实现网页的导航栏和下拉菜单

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

时间:2022-11-10 14:22:25浏览次数:47  
标签:网页 color li 直播 导航 下拉菜单

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

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

相关文章

  • 国标视频云平台EasyGBS如何批量开启按需直播?
    国标视频云服务EasyGBS支持设备/平台通过国标GB28181协议注册接入,并能实现视频的实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。平台部署简单......
  • docker新建Ubuntu18.04镜像的容器使用jupyter可以网页访问链接
    0,使用官网ubuntu18.04镜像dockerpullubuntu:18.04查看镜像列表dockerimages可以看到新的镜像的名称和ID1,创建一个带端口链接的容器(ubuntu1804为自定义容器名称......
  • 直播预告 | 第四范式Tech Day火热来袭,OpenMLDB 与你 8月11日线上见
    如今,人工智能已经成为各行各业不可或缺的基础设施。业界对于技术的关注热点已经从仅关注算法和模型本身,逐步变为了广泛讨论AI如何深度赋能企业创新应用、AI如何支撑企业更......
  • 直播平台怎么搭建,Android与Js互调之传递图片
    直播平台怎么搭建,Android与Js互调之传递图片添加addJavascriptInterface注解方法H5VerificationJavascriptInterface对象映射 publicclassH5VerificationJavascrip......
  • 融云「百幄」之视频会议和直播,让办公桌无限延伸
    2020年,为避免人员流动造成聚集性感染,全世界各地不少企业开始允许员工居家办公,跨地域、跨终端协同办公行业迎来井喷式增长,视频会议 “疫”外爆发。关注【融云RongCloud】,......
  • 网页制作02--banner制作
    样本:  第一步:先做一个超大的通栏banner盒子。第二步:在通栏盒子里面做一个版心的盒子第三部:版心盒子里面在分左边盒子和右边盒子◼1号盒子是通栏的大盒子banner,不......
  • python3爬取网页图片
    爬取url网页里面所有的图片,把url填上就能用了,下面的自己看着改改进行筛选。importrequestsimportreimporttimeimportrandomimportosdefFind(string):#f......
  • 常用网页播放器代码
     我们在网页上看到的播放器无外乎WMP/RealOne/MacromediaFlashPlayer,其他的无非是面板不同,或者添加了其他控件,对于计算机上安装的一些播放器也都是编码和解码器的整合,其......
  • 谷歌浏览器意外关闭,如何快速恢复关闭的网页
    ????声明:作为全网AI领域干货最多的博主之一,❤️不负光阴不负卿❤️????#专栏:#图像修复一文读懂????????Followme????,一起Get更多有趣AI????????浏览器推......
  • 5个程序员也应该掌握的网页设计技能
    英文|  https://javascript.plainenglish.io/5-web-design-skills-every-developer-should-master-d4ecda8d095a翻译|杨小二一个好的网站包括两个方面,视觉设计效果和网......