前端炒冷饭：04 水平导航栏

最新推荐文章于 2022-12-19 16:08:57 发布

lpZhouYi

最新推荐文章于 2022-12-19 16:08:57 发布

阅读量303

点赞数

分类专栏：前端学习文章标签：水平导航栏

本文链接：https://blog.csdn.net/lpZhouYi/article/details/84961276

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

水平导航栏

效果

代码目录：

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航栏</title>
    <link rel="stylesheet" href="../CSSFile/index.css" type="text/css">
</head>
<body>
<ul>
    <li>
        <a href="#" class="actvte">
            <h3>
                新的博文
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                旧的博文
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                日常吐槽
            </h3>
        </a>
    </li>
    <li class="about">
        <a href="#" class="about">
            <h3>
                关于
            </h3>
        </a>
    </li>
</ul>
</body>
</html>

CSS代码

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #f8715f;
}

li
{
    float: left;
}

li a
{
    display: block;
    color: #7347f8;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.actvte)
{
    background-color: #f85b38;
}

.actvte
{
    background-color: #f80815;
}

.about
{
    float: right;
}

JS代码

/**
 * 无
 */

lpZhouYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端炒冷饭：04 水平导航栏

水平导航栏效果代码目录：代码HTML代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;水平导航栏&lt;/title&gt; &lt;link rel=&quo
复制链接

扫一扫

专栏目录