003_w3C导航栏——实践

最新推荐文章于 2024-07-01 21:38:06 发布

StudiousTiger

最新推荐文章于 2024-07-01 21:38:06 发布

阅读量154

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/m0_45067620/article/details/107753669

版权

Tiger の前端实践项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <!-- 去除浏览器默认样式 -->
    <link rel="stylesheet" href="../../reset_style/reset.css">
    <title>0000</title>
    <style>
        a{
            text-decoration: none;
            color: #808080;
        }
        div{
            margin: 200px auto;
        }
        .nav{
            width: 1208px;
            height: 48px;
            background-color: rgb(228, 226, 226);
            /* 临时居中的方法 */
            margin: 200px auto;
        }
        .nav li{
            /* 左浮动 */
            float: left;
        }
        .nav a{
            /* 设置行高,使文字垂直居中 */
            line-height: 48px;
            /* 将行内元素转换成块元素，目的当鼠标触及到目标周围是，都有效*/
            display: block;
            /* 使链接在导航栏中分散开 */
            padding: 0px 59px;
        }
	.nav li:nth-child(4) a{
             /*最后多出8个像素，使第4个a的背景颜色的宽度加四，将其覆盖  */
            padding: 0px 61px;
        }
        .nav a:hover{
            color: #E8E7E3;
            background-color: #3F3F3F;
        } 
    </style>
</head>
<body>
    <div>
        <ul class="nav">
            <li><a href="javascript:;">HTML/CSS</a></li>
            <li><a href="javascript:;">Browser Side</a></li>
            <li><a href="javascript:;">Programming</a></li>
            <li><a href="javascript:;">XML</a></li>
            <li><a href="javascript:;">Web Building</a></li>
            <li><a href="javascript:;">reference</a></li>
        </ul>
</div>
</body>
</html>

效果图：
在这里插入图片描述

StudiousTiger

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
003_w3C导航栏——实践

<!DOCTYPE html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="../../reset_style/reset.css"> <title>0000</title> <style> a{ text-decorati
复制链接

扫一扫

专栏目录