CSS案例：padding应用之新浪导航栏

_Tough_Girl

已于 2022-09-17 17:32:41 修改

阅读量989

点赞数 2

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

于 2021-09-17 10:19:05 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/120343468

版权

CSS 案例专栏收录该内容

5 篇文章 1 订阅

订阅专栏

案例：新浪导航案例-padding影响盒子好处

padding内边距可以撑开盒子，我们可以做非常巧妙的运用。

因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding 最合适。

在这里插入图片描述
相关取值:

上边框为3像素, 颜色为 #ff8500
下边框为1像素颜色为 #edeef0
盒子高度为 41像素, 背景颜色为 #fcfcfc
文字颜色为 #4c4c4c

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            background-color: #edeef0;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /* a属于行内元素，此时必须要转换，转换为行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            text-decoration: none;
            color: #4c4c4c;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

</html>

_Tough_Girl

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS案例：padding应用之新浪导航栏

案例：新浪导航案例-padding影响盒子好处padding内边距可以撑开盒子，我们可以做非常巧妙的运用。因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding 最合适。相关取值:上边框为3像素, 颜色为 #ff8500下边框为1像素颜色为 #edeef0盒子高度为 41像素, 背景颜色为 #fcfcfc文字颜色为 #4c4c4c代码：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫