练习：小米局部静态导航

最新推荐文章于 2024-03-12 20:30:10 发布

玉安_ZhangDe

最新推荐文章于 2024-03-12 20:30:10 发布

阅读量494

点赞数

分类专栏： # CSS练习案例文章标签： css 前端 css3 学习

本文链接：https://blog.csdn.net/qq_47373340/article/details/123745250

版权

CSS练习案例专栏收录该内容

10 篇文章 3 订阅

订阅专栏

效果图：

代码：

<!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>
        .father {
            background-color: #333333;
            color: #3c413c;
            height: 80px;
        }

        .son {
            /* 里面的元素距离父元素的外边框100px */
            margin-left: 100px;
        }
        a {
            /* 去掉超链接的下划线 */
            text-decoration: none;
            color: #a0a1a2;
        }
        span {
            /* 给行内块设置行高，字体垂直居中 */
            line-height: 80px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            <span><a href="#">小米商城</a></span> |
            <span><a href="#">MIUI</a></span> |
            <span><a href="#">IoT</a></span> |
            <span><a href="#">云服务</a></span> |
            <span><a href="#">金融</a></span> |
            <span><a href="#">有品</a></span> |
            <span><a href="#">小爱开放平台</a></span> |
            <span><a href="#">企业团购</a></span> |
            <span><a href="#">资质证照</a></span> |
            <span><a href="#">协议规则</a></span> |
            <span><a href="#">下载app</a></span> |
            <span><a href="#">小米商城APP</a></span> |
            <span><a href="#">Select Location</a></span> |
        </div>
    </div>
</body>

</html>

玉安_ZhangDe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习：小米局部静态导航

效果图：代码：<!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">.
复制链接

扫一扫

专栏目录