html+css制作简洁版⼩⽶官⽹侧边栏⽬录
（1）最终效果图：
（2）⽂本基础内容
2.1.插⼊⽂本内容：
打开vscode，⾸先我们⽤超链接来显⽰出侧边栏的⽂字内容
<body>
<a href="#">⼿机电话卡</a>
<a href="#">电视盒⼦</a>
<a href="#">笔记本平板</a>
<a href="#">出⾏穿戴</a>
<a href="#">智能路由器</a>
<a href="#">健康⼉童</a>
<a href="#">⽿机⾳响</a>
</body>
正常显⽰超链接的效果。
（3）总体样式的设置
3.1.先把每个超链接设置为块级元素
因为块级元素⾃动换⾏，所以可以利⽤此特性让超链接⽂本呈现垂直显⽰。
<style>
a {
/* 转换为块级元素 */
display: block;
}
</style>
3.2.设置每个⽂本背景的长⽅形的⽐例和颜⾊
a {
/* 转换为块级元素 */
display: block;
/* 长⽅形的⽐例 */
width: 230px;
height: 40px;
/* 背景颜⾊ */
background-color: #55585a;
css设置文字垂直居中}
3.3.设置超链接⽂字的格式（⽂字颜⾊&删除下划线）
/* 字体颜⾊ */
color: white;
/* 取消下划线 */
text-decoration: none;
3.4.设置⽂字的缩进
通过官⽹可以看到每个字前⾯有空隙，需要空两个字的距离。
/* 字体前的空格 */
text-indent: 2em;
3.5.设置⿏标划过字体的样式
看过⼩⽶官⽹的都知道，⿏标悬浮在⽂字上边会变成橙⾊。
/* 2.⿏标经过链接变换背景颜⾊ */
a:hover {
background-color: #ff6700;
}
效果：
3.5.设置⽂字位置垂直居中
现在已经基本完成了侧边栏，但是⽂字的位置还是不对。我们可以⽤以下⽅法将⽂字设为居中。
/* 设置⽂本居中 */
/* 如果⾏⾼等于盒⼦的⾼度就可以实现⽂字垂直居中的效果 */
line-height: 40px;
因为在最前⾯，我们把背景的⾼设为40px，⾏距是⽂字⾼度加上上边距和下边距，只要将⾏距设为长⽅体的⾼即可实现垂直居中。
（4）完成
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>⼩⽶侧边栏青春版</title>
<style>
a {
/* 转换为块级元素 */
display: block;
/* 长⽅形的⽐例 */
width: 230px;
height: 40px;
/* 背景颜⾊ */
background-color: #55585a;
/* 字体颜⾊ */
color: white;
/* 取消下划线 */
text-decoration: none;
/* 字体前的空格 */
text-indent: 2em;
/
* 设置⽂本居中 */
/* 如果⾏⾼等于盒⼦的⾼度就可以实现⽂字垂直居中的效果 */
line-height: 40px;
}
/* 2.⿏标经过链接变换背景颜⾊ */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">⼿机电话卡</a>
<a href="#">电视盒⼦</a>
<a href="#">笔记本平板</a>
<a href="#">出⾏穿戴</a>
<a href="#">智能路由器</a>
<a href="#">健康⼉童</a>
<a href="#">⽿机⾳响</a>
</body>
</html>
感谢⼤家点进我的⽂章，求收藏，求关注。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。