案例-小米商城导航栏

最新推荐文章于 2023-07-15 00:20:55 发布

发呆少女

最新推荐文章于 2023-07-15 00:20:55 发布

阅读量332

点赞数

分类专栏： CSS学习文章标签： css html css3

本文链接：https://blog.csdn.net/qq_43632490/article/details/124823107

版权

CSS学习专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<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 {
            display: block;
            width: 290px;
            height: 55px;
            text-decoration: none;
            background-color: rgb(147, 152, 150);
            color: rgb(255, 255, 255);
            /* 文字垂直居中技巧：
               让文字的行高等于文字容器的高度（行高=上空隙+文字高度+下空隙）
               （如果行高大于容器高度，则文字会偏下；如果行高小于容器高度，则文字会偏上。） */
            line-height: 55px;
            text-indent: 2em;
        }

        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </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>

</html>

在这里插入图片描述

发呆少女

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
案例-小米商城导航栏

<!DOCTYPE html><html lang="zh-CN"><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&gt
复制链接

扫一扫

专栏目录