HTML5基础之代码入门--常用导航栏代码【工具代码】nav01

最新推荐文章于 2025-07-28 14:30:27 发布

原创最新推荐文章于 2025-07-28 14:30:27 发布 · 2.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端开发同时被 2 个专栏收录

601 篇文章

订阅专栏

前端工具代码

15 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS3创建一个具有独特过渡效果和动态伪元素的导航栏。通过box-sizing、transition和伪元素::before及::after，实现了导航栏在鼠标悬停时的平滑变化和美观的边框效果。

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

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        body {
            background-color: #212121;
        }

        .nav {
            margin-top: 300px;
            font-size: 20px;
            text-align: center;
            /* letter-spacing 属性增加或减少字符间的空白（字符间距） */
            letter-spacing: 1px;
        }

        .nav * {
            /* css3,box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
            content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
            在宽度和高度之外绘制元素的内边距和边框。 */
            box-sizing: border-box;
            /* 所有属性都将获得过渡效果/持续时间/ ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 */
            transition: all 0.35s ease;
        }

        .nav li {
            /* 不独占一行的块级元素 */
            display: inline-block;
            /* list-style-position 属性设置在何处放置列表项标记。
            外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。 */
            list-style-position: outside;
            /* margin:4个：上右下左;3个：上、右和左、下；2个：上和下、右和左；1个：4边距离全都一样 */
            margin: 8px 16px;
        }

        .nav a {
            padding: 8px 12px;
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            position: relative;
        }

        /* 
        常见伪类——:hover,:link,:active,:target,:not(),:focus。
        常见伪元素——::first-letter,::first-line,::before,::after,::selection。

        ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
        
        这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
        所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。 */
        .nav a::before,
        .nav a::after {
            width: 14px;
            height: 14px;
            content: "";
            position: absolute;
            transition: all 0.35s ease;
            opacity: 0;
        }

        .nav a:hover {
            color: #ffffff;
        }

        .nav a::after {
            right: 0;
            top: 0;
            border-right: 3px solid #1e90ff;
            border-top: 3px solid #1e90ff;
            transform: translate(-100%, 50%);
        }

        .nav a::before {
            left: 0;
            bottom: 0;
            border-left: 3px solid #1e90ff;
            border-bottom: 3px solid #1e90ff;
            transform: translate(100%, -50%);
        }

        .nav a:hover::before,
        .nav a:hover::after {
            transform: translate(0%, 0%);
            opacity: 1;
        }
    </style>
</head>

<body>
    <div>
        <ul class="nav">
            <li><a href="javascript:;">首页</a></li>
            <li><a href="javascript:;">博客</a></li>
            <li><a href="javascript:;">新闻</a></li>
            <li><a href="javascript:;">音乐</a></li>
            <li><a href="javascript:;">关于我们</a></li>
        </ul>
    </div>
</body>

</html>

效果：