简洁版小米侧边栏案例

最新推荐文章于 2023-02-23 16:42:40 发布

素心如月桠

最新推荐文章于 2023-02-23 16:42:40 发布

阅读量441

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_47010003/article/details/115771825

版权

html 同时被 3 个专栏收录

43 篇文章 15 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

css

19 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!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>Document</title>
    <style>
        a {
            display: block;
            width: 245px;
            height: 55px;
            /* 删除下划线 */
            text-decoration: none;
            /* 首行缩进2字符 */
           text-indent: 2em;
           /* 字体行高与a标签高度相同可以自动实现 */
           line-height: 55px;

            font-size: 20px;
            /* 字体颜色 */
            color: white;

        }

        a:hover {
            /* 注意是background-color如果是color改变的是字体颜色 */
            background-color: rgb(255, 103, 0);
        }

        .grad {
            /* 背景颜色渐变！ */
            background-image: linear-gradient(rgb(86, 97, 125), rgb(153, 143, 134));
        }

        div {
            width: 245px;
            height: 388px;
        }
    </style>
</head>

<body>
    <div class="grad">
        <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>
    </div>
</body>

</html>