CSS 垂直导航栏

2024-06-17 06:52| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 CSS 基础教程 CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 使用 CSS 注释 CSS 颜色 CSS RGB 颜色 CSS HEX 颜色 CSS HSL 颜色 CSS 背景 CSS 背景图像 CSS 背景重复 CSS 背景附着 CSS 简写背景属性 CSS 边框 CSS 边框宽度 CSS 边框颜色 CSS 边框各边 CSS 简写边框属性 CSS 圆角边框 CSS 外边距 CSS 外边距合并 CSS 内边距 CSS 高度/宽度 CSS 框模型 CSS 轮廓 CSS 轮廓宽度 CSS 轮廓颜色 CSS 简写轮廓属性 CSS 轮廓偏移 CSS 文本 CSS 文本对齐 CSS 文本装饰 CSS 文本转换 CSS 文字间距 CSS 文本阴影 CSS 字体 CSS 字体样式 CSS 字体大小 CSS 谷歌字体 CSS 简写字体属性 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS 中级教程 CSS Display CSS max-width CSS 定位 CSS 溢出 CSS 浮动 CSS 清除浮动 CSS 布局 - 浮动实例 CSS inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 垂直导航栏 CSS 水平导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像精灵 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性 CSS3 高级教程 CSS 圆角 CSS 边框图像 CSS 背景 CSS 颜色 CSS 渐变 CSS 径向渐变 CSS 阴影 CSS box-shadow CSS 文本效果 CSS 网络字体 CSS 2D 转换 CSS 3D 转换 CSS 过渡 CSS 动画 CSS 工具提示 CSS 图像样式 CSS object-fit CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量 CSS 覆盖变量 CSS 变量 - JavaScript CSS 变量 - 媒体查询 CSS Box Sizing CSS Flexbox CSS 媒体查询 CSS 媒体查询实例 CSS 响应式设计 RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 CSS 网格教程 CSS 网格布局模块 CSS 网格容器 CSS 网格项目 CSS 实例 CSS 实例 CSS 测验 CSS 测验 CSS 参考手册 CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 单位 CSS 听觉 CSS 网络安全字体 CSS 可动画制作 CSS 单位 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 垂直导航栏 CSS 导航栏 CSS 水平导航栏垂直导航栏 Home News Contact About

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置元素的样式：

实例 li a { display: block; width: 60px; }

亲自试一试

例子解释： display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。 width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

您还可以设置的宽度，并删除的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

实例 ul { list-style-type: none; margin: 0; padding: 0; width: 60px; } li a { display: block; }

亲自试一试

垂直导航栏实例

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：

Home News Contact About 实例 ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* 鼠标悬停时改变链接颜色 */ li a:hover { background-color: #555; color: white; }

亲自试一试

活动/当前导航链接

向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上：

Home News Contact About 实例 .active { background-color: #4CAF50; color: white; }

亲自试一试

居中链接以及添加边框

把 text-align:center 添加到或，使链接居中。

将 border 属性添加到，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有元素添加 border-bottom，最后一个元素除外：

Home News Contact About 实例 ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }

亲自试一试

全高固定垂直导航栏

创建全高的“粘性”侧面导航：

实例 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全高 */ position: fixed; /* 使它产生粘性，即使在滚动时 */ overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */ }

亲自试一试

注意：本例在移动设备上可能无法正常工作。

CSS 导航栏 CSS 水平导航栏 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

CSS 垂直导航栏

CSS 垂直导航栏

今日新闻

推荐新闻