html+css做导航栏
list-style: none
列表样式:无,用在"ul li"标签上效果是去除列表前的圆点。
line-height
属性用于设置多行元素的空间量,如多行文本的间距 ,设置为height大小相等,可实现文字上下居中。
float
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
text-decoration: none
属性规定添加到文本的修饰 ,none的效果是去除下划线。
a:hover
英文hover就是悬停的意思,代表鼠标指针放在这个链接上时的属性 。
a:focus
获得焦点的时候 鼠标松开时显示的颜色 。
css代码
<style>
ul li {
list-style: none;
display: list-item;
}
.subnav {
height: 51px;
line-height: 51px;
border-top: 1px solid #f2f2f2;
padding-left: 230px;
margin-right: -50px;
}
.subnav_item {
float: left;
font-size: 15px;
color: #c1c1c1;
margin-right: 47px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: #31c27c;
}
a:focus {
color: #31c27c;
}
</style>
html代码
<ul class="subnav">
<li class="subnav_item">
<a href="#">首页</a>
</li>
<li class="subnav_item">
<a href="#">歌手</a>
</li>
<li class="subnav_item">
<a href="#">新碟</a>
</li>
<li class="subnav_item">
<a href="#">排行榜</a>
</li>
<li class="subnav_item">
<a href="#">分类歌单</a>
</li>
<li class="subnav_item">
<a href="#">电台</a>
</li>
<li class="subnav_item">
<a href="#">MV</a>
</li>
<li class="subnav_item">
<a href="#">数字专辑</a>
</li>
</ul>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?