html+css简单案例（简洁版小米侧边栏案例）

最新推荐文章于 2024-07-16 17:16:30 发布

黄丫丫07

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量479

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51495354/article/details/127771800

版权

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

<!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>简单版小米侧边栏</title>

    <style>

        a {

            width: 230px;

            height: 40px;

            background-color: #55585a;

            display: block;

            text-decoration: none;

            color: white;

            font-size: 14px;

            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>

</body>



</html>

注意：一个小技巧，单行文字垂直居中的代码。

Css没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

<!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>单行文字垂直居中</title>

    <style>

        div {

            width: 200px;

            height: 40px;

            background-color: pink;

            /* 让文字的行高等于盒子的高度 */

            line-height: 40px;

            text-indent: 2em;

        }

    </style>

</head>



<body>

    <div>我要居中</div>

</body>



</html>

单行文字垂直居中的原理：