使用a标签写小米官网侧边栏--CSS

最新推荐文章于 2023-05-25 22:35:01 发布

原创最新推荐文章于 2023-05-25 22:35:01 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML&CSS&Sass 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用CSS将a标签转换为块级元素，使其能单独占据一行并设置背景颜色。通过调整文字行高实现垂直居中，讲解了块级行级元素的概念，以及如何处理因padding导致的盒子大小变化问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
案例的核心思路分为两步:

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

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

涉及到的知识点：块级行级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            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>

因为padding会影响盒子大小计算，padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度。

所以将上面代码做部分修改：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 200px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            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>