HTML+CSS系列实战之侧边栏的实现

2024-07-08 05:50| 来源: 网络整理| 查看: 265

这里要实现一个：当鼠标经过某个位置时，其某些属性发生变化的效果。（仿小米侧边栏）代码实现：

侧边栏效果 a{ display: block; width: 200px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; text-decoration: none; color: white; background-color: #55585a; } a:hover{ background-color: #ff6700; } 手机电话卡电视盒子笔记本平板出行穿戴智能路由器健康儿童耳机音响

实现效果为：在这里插入图片描述

实现代码比较简单，但是要注意的是：因为小熊这里是用标签构建的列表项，由于标签是行内元素，无法直接设置宽高，所以这里就需要将它转化为行内块元素，再设置宽高，最后，通过给每个标签添加：hover属性来实现最终效果。

【本文地址】

公司简介

联系我们