CSS（十）：案例2-小米侧边栏
实现下面效果
-
核心思路
- 把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度
- 鼠标经过a时 设置背景颜色
-
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例二-侧边栏</title> <style> /* 把a标签转换为块级元素 */ a { display: block; width: 230px; height: 40px; background-color: #A2A0A0; color: #fff; text-decoration: none; text-indent: 2em; /* 单行文字垂直居中 */ line-height: 40px; } /* 鼠标经过连接变换背景颜色 */ 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> <a href="#"> 电源 配件</a> <a href="#"> 健康 儿童</a> <a href="#"> 生活 箱包</a> </body> </html>
