案例：简洁版小米侧边栏

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

grt要一直一直努力呀

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

阅读量170

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_44870115/article/details/120422747

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述
需要用到的辅助工具是像素尺子和截图工具 snipaste。

使用snipaste不仅可以截图，还可以吸取颜色值。按住alt键即可。

<!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>
</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>
<style>
    a {
        background-color: #a19e9e;
        color: white;
        height: 42px;
        width: 234px;
        display: block;
        text-decoration: none;
        text-indent: 2em;
        line-height: 42px;
    }
    
    a:hover {
        background-color: #ff6700;
    }
</style>

</html>

PS：实现单行文字垂直居中

让文字的行高(line-height)等于盒子的高度(height)，就可以让文字在当前盒子中垂直居中。

grt要一直一直努力呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
案例：简洁版小米侧边栏

需要用到的辅助工具是像素尺子和截图工具 snipaste。使用snipaste不仅可以截图，还可以吸取颜色值。按住alt键即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con.
复制链接

扫一扫