链接a转换为块级元素之小练习：简洁版小米侧边栏

最新推荐文章于 2024-06-06 11:52:29 发布

奶盖不加糖

最新推荐文章于 2024-06-06 11:52:29 发布

阅读量1.5k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_44156869/article/details/108695270

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

简洁版小米侧边栏

案例的核心思路分为两步：

把链接 a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度。
鼠标经过 a 链接设置背景颜色。

小知识点：
想让文字在当前的盒子内垂直居中，让文字的行高等于盒子的高度。

<head>
  <title>简单版小米侧边栏</title>
  <style>
    a {
      /*转换为块级元素*/
      display:block;
      /*宽高*/
      width: 230px;
      height: 40px;
      /*背景颜色*/
      background-color: #55585a;
      /*字体大小*/
      font-size: 14px;
      /*字体颜色*/
      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>

奶盖不加糖

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
链接a转换为块级元素之小练习：简洁版小米侧边栏

简洁版小米侧边栏案例的核心思路分为两步：把链接 a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度。鼠标经过 a 链接设置背景颜色。<head> <title>简单版小米侧边栏</title> <style> a { /*转换为块级元素*/ display:block; /*宽高*/ width: 230px; height: 40px; /*背景颜
复制链接

扫一扫

专栏目录