gtxyzz

水平导航栏实例

gtxyzz web技术 2022-07-08 866浏览 0

水平导航栏实例

创建具有深色背景色的基础水平导航栏,并在用户将鼠标移到链接上方时改变链接的背景色:

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 当鼠标悬停时把链接颜色更改为 #111(黑色) */
li a:hover {
  background-color: #111;
}
活动/当前导航链接 向当前链接添加 "active" 类,这样用户就知道他/她在哪个页面上: 实例 .active { background-color: #4CAF50; }

继续浏览有关 css 的文章
发表评论