菜单栏制作
垂直菜单:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 100px; background-color: aliceblue; } a{ text-decoration: none; display: block; width: 100px; height: 30px; line-height: 30px; background-color: aqua; margin-bottom: 5px; padding-left: 20px; } a:hover{ background-color: yellow; color: red; } </style> </head> <body> <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> </ul> </body>
菜单通常可以用列表来制作,在li标签中加入a标签,把a标签变成块级标签,这样就可以对其设定宽高。
水平菜单栏
只需要把无序列表加一个float:left向左浮动,同时把ul的宽取消;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步