前言
在前端页面开发中，导航、侧边栏这类组件是网页的 “骨架”—— 不仅承担着页面跳转的功能，样式与交互的质感更直接影响用户的浏览体验。而 CSS 正是塑造这些组件的核心工具：小到元素的模式转换，大到 hover 交互的细节，都需要通过精准的样式规则来实现。
这篇文章会围绕三个经典的 CSS 组件案例展开：小米风格侧边栏、五彩交互导航、列表式菜单。这三个案例看似是不同的组件形态，但核心都围绕着 CSS 的通用技能：比如行内元素与块级元素的模式转换、文本的水平 / 垂直居中、hover 伪类的交互控制、背景 / 列表的默认样式重置等。通过 “知识点拆解 + 完整代码演示” 的方式，你不仅能独立实现这三个组件，更能掌握 CSS 在 “布局 + 样式 + 交互” 中的实战逻辑，把这些技巧复用到更多网页组件的开发中。
目录
- 前言
- 一、知识准备
- 二、 小米商城侧边栏简洁版
- 2.1 效果和完整代码
- 2.2 开发流程和思路
- 三、五彩导航
- 3.1 案例素材
- 3.2 效果和完整代码
- 四、 列表菜单栏
- 4.1 效果和完整代码
- 4.2 空链接井号和void(0)的区别
一、知识准备
1.1 小米侧边栏你需要掌握的知识点：
- 行内元素转换为块级元素
display: block; - Emmet语法快速搭建html结构：a[href=“#”]*7
- a标签和基础选择器-标签选择器：a{样式}
- 设置块级元素a的宽width、高height、背景色
background-color - 设置字体大小
font-size，颜色color，去除a下划线text-decoration: none;，首行缩进2字符text-indent: 2em; - 文字行高等于容器高度实现垂直居中，
line-height: 容器高px; - 伪类选择器-链接伪类选择器
a:hover{鼠标悬停时的样式}，鼠标悬停时改变背景色
1.2 五彩导航案例-你需要知道的知识点：
- 行内元素a转换为块级元素
display: block; - 块级元素宽度、高度、背景色的设置
- 设置水平居中
text-align:center;和垂直居中line-heigth:px;垂直居中数值大小根据盒子大小和文字上下位置决定 - 基础选择器和复合选择器-类选择器和后代选择器
- 背景图属性设置：
background: color url no-repeat position;【背景色、背景图地址、背景不重复平铺、背景图位置】
1.3 列表菜单-你需要知道的知识点：
- 清除列表默认样式：通过
list-style-type: none去除列表项目符号，同时用padding: 0 和 margin: 0清除列表的默认内外边距； - 列表项的基础样式设置：给 <li> 设置 width（宽度）、height（高度）、border（边框）、margin（外边距），实现列表项的布局规范；
- 列表项文字的对齐方式：通过
text-align: center实现文字水平居中，结合 line-height: 列表项高度 实现文字垂直居中； - 超链接样式优化：给 <a> 标签设置
text-decoration: none去除下划线，搭配 color 定义文字颜色，让链接融入列表样式； - 鼠标交互效果：通过
li:hover伪类选择器，设置鼠标悬浮时列表项的样式变化（如背景色、背景图切换），增强交互体验。
二、 小米商城侧边栏简洁版
2.1 效果和完整代码
先看效果：
完整代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>简单版小米侧边栏</title><style>a{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高=文字高度-实现垂直居中 */line-height:40px;/* 设置字体大小和颜色，去除下划线 */font-size:14px;color:#fff;text-decoration:none;/*设置首行缩进2字符*/text-indent:2em;}/* 鼠标经过a标签上面更换背景颜色 */a:hover{background-color:#FF6F00;}</style></head><body><!--Emmet语法：a[href="#"]*7--><ahref="#">手机 电话卡</a><ahref="#">电视 盒子</a><ahref="#">笔记本 平板</a><ahref="#">出行 穿戴</a><ahref="#">智能 路由器</a><ahref="#">健康 儿童</a><ahref="#">耳机 音响</a></body></html>2.2 开发流程和思路
这个是小米商城网站的原版样式。小米商城 可以F12检查代码
案例的核心思路分为两步
1.把链接a 转换为块级元素,这样链接就可以单独占一行,并且有宽度和高度
2.鼠标经过a给 链接设置背景颜色
第一步：搭建结构：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>简单版小米侧边栏</title><style>a{}/* 鼠标经过a标签上面更换背景颜色 */a:hover{}</style></head><body><!-- emmet语法：a[href="#"]*7 --><ahref="#">手机 电话卡</a><ahref="#">电视 盒子</a><ahref="#">笔记本 平板</a><ahref="#">出行 穿戴</a><ahref="#">智能 路由器</a><ahref="#">健康 儿童</a><ahref="#">耳机 音响</a></body></html>第二步：行内元素转换成块级元素
<style> a{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高=文字高度-实现垂直居中 */line-height:40px;}</style>第三步：设置超链接文字的样式
<style> a{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高=文字高度-实现垂直居中 */line-height:40px;/* 设置字体大小和颜色，去除下划线 */font-size:14px;color:#fff;text-decoration:none;/*文字首行缩进2字符*/text-indent:2em;}</style>第四步：设置鼠标悬停改背景色
<style>/* 鼠标经过a标签上面更换背景颜色 */a:hover{background-color:#FF6F00;}</style>三、五彩导航
3.1 案例素材
这些素材是我用PPT做的，做好之后截图，做得不是那么完美，然后修改尺寸和代码中设置得数值一样、即为和a块元素同样大小，宽 width: 120px; 高 height: 58px;
【图3-1】五彩导航1
【图3-2】五彩导航2
【图3-3】五彩导航3
【图3-4】五彩导航4
【图3-5】五彩导航5
3.2 效果和完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>综合案例-五彩导航</title><style>/* 后代选择器 */.nav a{/* 把a转换为行内块元素 */display:inline-block;width:120px;height:58px;/*添加背景图前查看大小，加个背景色*/background-color:red;/* 设置水平、垂直居中 */text-align:center;line-height:38px;/* 文字白色、取消下划线 */color:#fff;text-decoration:none;}/* 后代选择器-给第一个链接加背景且不重复平铺 */.nav .bg1{background:url(/CSS/img/五彩导航1.png)no-repeat;}/* 设置超链接鼠标悬停换背景图 */.nav .bg1:hover{background-image:url(/CSS/img/五彩导航4.png);}/* 设置第二个链接 */.nav .bg2{background:url(/CSS/img/五彩导航2.png)no-repeat;}.nav .bg2:hover{background-image:url(/CSS/img/五彩导航3.png);}/* 第三个 */.nav .bg3{background:url(/CSS/img/五彩导航3.png)no-repeat;}.nav .bg3:hover{background-image:url(/CSS/img/五彩导航4.png);}/* 第四个 */.nav .bg4{background:url(/CSS/img/五彩导航4.png)no-repeat;}.nav .bg4:hover{background-image:url(/CSS/img/五彩导航5.png);}/* 第五个 */.nav .bg5{background:url(/CSS/img/五彩导航5.png)no-repeat;}.nav .bg5:hover{background-image:url(/CSS/img/五彩导航1.png);}</style></head><body><!-- emmet语法：div.nav>a[href="javascript:void(0)"].bg${五彩导航}*6 --><divclass="nav"><ahref="javascript:void(0)"class="bg1">五彩导航</a><ahref="javascript:void(0)"class="bg2">五彩导航</a><ahref="javascript:void(0)"class="bg3">五彩导航</a><ahref="javascript:void(0)"class="bg4">五彩导航</a><ahref="javascript:void(0)"class="bg5">五彩导航</a></div></body></html>五彩导航-练习价值:
1.链接属于行内元素,但是此时需要宽度高度,因此需要模式转换.
2.里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码
3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置.
4.鼠标经过变化背景图片,因此需要用到链接伪类选择器
鼠标悬停后改变的背景图片，可以换成页面上没有的颜色，可以让导航栏色彩丰富，这里我偷个懒，鼠标悬停后的背景图是当前导航栏的另外一个背景图。
四、 列表菜单栏
列表在网站前端使用得是比较频繁的，通常会使用列表来制作网站导航、新闻列表等等。
4.1 效果和完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS列表案例</title><style>a{/* 去除超链接下划线 */text-decoration:none;color:#ffffff;}ul{padding:0;/*清除列表外边距*/margin:0;/*清除列表内边距*/list-style-type:none;/*清除列表项目符号*/}li{width:120px;height:37px;border:1px solid #169;/*设置列表边框粗细为1*/margin:4px 2px;/*设置列表项外边距*/text-align:center;/*设置列表项文字水平居中*/line-height:37px;/*设置列表项文本行高，实现垂直居中*//* 设置背景图和鼠标悬停改变背景图 */background-color:black;}/* 设置背景色和鼠标悬停改变背景色 */li:hover{background-color:rgb(75,0,226);}</style></head><body><!-- Emmet语法： ul>li*6>a[href="javascript:void(0)"]{菜单设计$}--><ul><li><ahref="javascript:void(0)">菜单设计1</a></li><li><ahref="javascript:void(0)">菜单设计2</a></li><li><ahref="javascript:void(0)">菜单设计3</a></li><li><ahref="javascript:void(0)">菜单设计4</a></li><li><ahref="javascript:void(0)">菜单设计5</a></li><li><ahref="javascript:void(0)">菜单设计6</a></li></ul></body></html>4.2 空链接井号和void(0)的区别
一、基础概念与使用场景
1. 什么是空链接？
空链接是点击后不跳转到新页面 / 锚点的<a>标签，核心作用是 “保留链接外观（手型光标、下划线），同时仅作为交互元素”。
2. 空链接的使用场景
适用于 “需要可点击元素，但不需要跳转” 的场景：
下拉菜单的触发按钮；
弹窗的唤起文字；
临时占位的可点击项（后续补充实际链接）。
3. 井号空链接（href=“#”）
这是 HTML 原生的空锚点链接：
概念：#代表页面 “根锚点”，点击后会自动跳转到当前页面的顶部位置；
代码示例：
<ahref="#">井号空链接（点击会回顶）</a>4.JavaScript void 空链接（href="javascript:void(0)"）
这是通过 JavaScript 阻止跳转的方式：
- 概念：
javascript:表示执行后续代码，void(0)执行 “空逻辑” 并返回undefined，浏览器接收到undefined后不执行任何跳转 / 滚动； - 代码示例：
<ahref="javascript:void(0)">void(0)空链接（点击无跳转）</a>两者的核心区别
| 对比维度 | 井号空链接（href=“#”） | JavaScript void 空链接（href=“javascript:void(0)”） |
|---|---|---|
| 点击后行为 | 跳转到页面顶部 | 无任何跳转、滚动行为 |
| 页面滚动影响 | 触发页面滚动（回到顶部） | 不改变页面滚动状态 |
| 适用场景 | 需 “点击回顶” 的交互（如回到顶部按钮） | 纯交互、不需要页面变化的场景 |
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>空链接区别演示</title><style>/* 让页面足够长，方便观察滚动 */body{height:2000px;padding:20px;}.link-group{margin:100px 0;}a{margin-right:20px;}</style></head><body><h1>先向下滚动页面，再点击链接</h1><divclass="link-group"><p>井号空链接：<ahref="#">点击我（会回到页面顶部）</a></p><p>void(0)空链接：<ahref="javascript:void(0)">点击我（无任何变化）</a></p></div></body></html>案例效果：
- 先向下滚动页面（远离顶部）；
- 点击 “井号空链接”：页面立即滚动回顶部；
- 点击 “void (0) 空链接”：页面保持当前位置，无任何变化。
