네비게이션 바

Navigation Bar = 링크 목록

垂直导航栏

垂直导航条实例

激活/当前导航条实例

创链接并添加边框

全屏高度的固定导航条

水平导航栏

内联列表项

浮动列表项

链接右对齐

添加分割线

固定导航条

源码

示例 1

CSS 下拉菜单

基本下拉菜单

实例解析

下拉菜单

집

웹 프론트엔드

CSS 튜토리얼

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 02, 2022 pm 05:53 PM

css

이 글은 css에 대한 관련 지식을 제공하며, CSS를 사용하면 기본 CSS 탐색 모음 및 드롭다운 메뉴의 구현 속성과 같은 관련 문제를 주로 소개합니다. 지루한 내용입니다. HTML 메뉴를 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

(학습 동영상 공유: css 동영상 튜토리얼, html 동영상 튜토리얼)

네비게이션 바

네비게이션 바를 능숙하게 사용하는 것은 모든 웹사이트에서 매우 중요합니다.

CSS를 사용하면 지루한 HTML 메뉴 대신 아름다운 탐색 모음으로 변신할 수 있습니다.

표준 HTML 기반으로 네비게이션 바는 필수입니다.
이 예에서는 표준 HTML 목록 탐색 모음을 구축하겠습니다.

내비게이션 바는 기본적으로 링크 목록이므로 <ul></ul> 및 <li> 요소를 사용하는 것이 많은 의미가 있습니다. 공통 HTML: <ul></ul> 和 <li> 元素非常有意义，公共HTML：

로그인 후 복사

现在，让我们从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;}

로그인 후 복사

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

例子解析：
list-style-type:none – 移除列表前小标志，一个导航栏并不需要列表标记。
移除浏览器的默认设置将边距和填充设置为0。

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>

로그인 후 복사

垂直导航栏

上面的代码，我们只需要 <a></a> 元素的样式，建立一个垂直的导航栏：

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;}

로그인 후 복사

示例说明：

display:block 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度 width:60px 。

块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

注意：请务必指定 <a></a> 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>

로그인 후 복사

垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>

로그인 후 복사

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：
예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

li a.active {
    background-color: #4CAF50;
    color: white;}li a:hover:not(.active) {
    background-color: #555;
    color: white;}

로그인 후 복사

示例代码：

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

로그인 후 복사

创链接并添加边框

可以在 <li> or <a> </a> </li> 上添加 text-align:center 样式来让链接居中。

可以在 border <ul></ul> 上添加 border 属性来让导航栏有边框。
如果要在每个选项上添加边框，可以在每个 <li> 元素上添加 border-bottom :

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            border: 1px solid #555;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

로그인 후 복사

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */}

로그인 후 복사

注意: 该实例可以在移动设备上使用。

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해
源码

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* 全屏高度 */
            position: fixed; 
            overflow: auto; /* 如果导航栏选项多，允许滚动 */
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

로그인 후 복사

水平导航栏

有两种方法创建横向导航栏。使用 内联 (inline) 或 浮动 (float) 的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

内联列表项

建立一个横向导航栏的方法之一是指定元素，上述代码是标准的内联:

ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}

로그인 후 복사

实例解析：

display:inline; -默认情况下，<li> 元素是块元素。
在这里，我们删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <li> 元素，并指定为 <a></a>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}

로그인 후 복사

이제 목록에서 여백과 패딩을 제거해 보겠습니다. <p></p>

   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

로그인 후 복사

예제 분석:

list-style-type:none – 목록 앞의 작은 표시를 제거합니다. 탐색 모음에는 목록 표시가 필요하지 않습니다.

브라우저 기본 설정 여백과 패딩을 0으로 제거합니다. 🎜🎜위 예제의 코드는 수직 및 수평 네비게이션 바에 사용되는 표준 코드입니다. 🎜

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}

로그인 후 복사

🎜세로 네비게이션 바🎜🎜위 코드의 경우, 수직 네비게이션 바를 생성하려면 <a></a> 요소의 스타일만 필요합니다: 🎜

로그인 후 복사

<li>关于🎜예제 설명: 🎜🎜 display: block 은 블록 요소의 링크를 표시하여 전체 링크 영역(텍스트뿐만 아니라)을 클릭할 수 있게 만듭니다. 너비: 60px를 지정할 수 있습니다. 🎜🎜블록 요소는 기본적으로 최대 너비입니다. 너비를 60픽셀로 지정하겠습니다. 🎜🎜참고: 세로 탐색 모음에서 <a></a> 요소의 너비를 지정하세요. 너비를 생략하면 IE6에서 예상치 못한 결과가 발생할 수 있습니다. 🎜🎜 여기에 이미지 설명 삽입

🎜

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

로그인 후 복사

🎜세로 탐색 모음 예 🎜🎜간단한 수직 탐색 모음 예제를 만들고 마우스가 옵션으로 이동할 때 배경색을 수정합니다. 🎜🎜 여기에 이미지 설명 삽입

🎜

ul {
    position: fixed;
    top: 0;
    width: 100%;}

로그인 후 복사

🎜활성/현재 탐색 모음 인스턴스🎜🎜옵션을 클릭한 후 "active" 클래스를 표준에 추가할 수 있습니다. 옵션이 선택되었습니다: 🎜 여기에 이미지 설명 삽입

🎜

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

로그인 후 복사

🎜Sample code: 🎜

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #111;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

로그인 후 복사

<li> 또는 에 text-align:center 스타일을 추가할 수 있습니다. 링크가 중앙에 있습니다. 🎜🎜테두리 <ul></ul>에 테두리 속성을 추가하면 내비게이션 바에 테두리가 생기도록 할 수 있습니다. 🎜 각 옵션에 테두리를 추가하려면 각 <li> 요소에 border-bottom을 추가하세요: 🎜🎜🎜nbsp;html>


    <meta>
    <title>原生js实现菜单动态添加active类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            list-style: none;
            box-shadow: 0 2px 4px #eeeeee;
        }
        ul > li {
            padding: 6px 16px;
            margin: 0 5px;
            border-right: 1px solid #f7f7f7;
            border-bottom: 1px solid transparent;
            cursor: pointer;
        }
        ul > li:last-child{
            border-right: none;
        }
        li:hover, li:focus, .active {
            color: #ff6615;
            border-bottom: 1px solid #ff6615;
        }
    </style>



로그인 후 복사
로그인 후 복사

    <li>首页
    <li>产品中心
    <li>新闻资讯
    <li>文档下载
    <li>联系我们


<script>
    function removeActiveClass(node) {
        node.className = &#39;&#39;;
    }

    let menus = document.querySelectorAll(&#39;#nav&#39;);
    menus.forEach(function (value, index) {
        value.addEventListener(&#39;click&#39;, function (e) {
            var target = e.target;
            Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li&#39;), removeActiveClass);
            target.className = &#39;active&#39;;
        })
    });
</script>

🎜전체 화면 높이의 고정 탐색 모음🎜🎜다음으로 전체 화면 높이의 고정 탐색 모음을 만듭니다. 왼쪽 막대, 오른쪽에 스크롤 가능한 콘텐츠가 있습니다. 🎜nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /*鼠标下拉菜单*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>



<div>
    <span>鼠标移动到我这看到下拉菜单！</span>
    <div>
        <p>CSDN博客</p>
        <p>wgchen.blog.csdn.net</p>
    </div>
</div>


로그인 후 복사
로그인 후 복사
🎜참고: 이 예는 모바일 장치에서 사용할 수 있습니다. 🎜🎜🎜 소스 코드 🎜nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>



    <div>
        <button>下拉菜单</button>
        <div>
            <a>CSDN博客 1</a>
            <a>CSDN博客 2</a>
            <a>CSDN博客 3</a>
        </div>
    </div>


로그인 후 복사
로그인 후 복사
🎜레벨 탐색 표시줄 🎜🎜가로 탐색 표시줄을 만드는 방법에는 두 가지가 있습니다. 목록 항목에는 inline  또는 float 을 사용하세요. 🎜🎜두 가지 방법 모두 괜찮지만 링크의 크기를 동일하게 하려면 float 방법을 사용해야 합니다. 🎜🎜인라인 목록 항목🎜🎜수평 탐색 모음을 만드는 방법 중 하나는 요소를 지정하는 것입니다. 위 코드는 표준 인라인입니다. 🎜rrreee🎜예제 분석: 🎜🎜display:inline; 기본값 이 경우 <li> 요소는 블록 요소입니다. 🎜 여기서는 각 목록 항목 앞뒤에 개행 문자를 제거하여 한 줄을 표시합니다. 🎜🎜 부동 목록 항목 🎜🎜 위의 예에서 링크의 너비는 다릅니다. 🎜🎜모든 링크의 너비가 같도록 하려면 <li> 요소를 띄우고  <a></a> 요소의 너비를 지정하세요. 🎜rrreee🎜예제 분석: 🎜 rrreee🎜 수평 네비게이션 바 예시 🎜🎜 수평 네비게이션 바를 생성하고 해당 옵션으로 마우스를 이동한 후 배경색을 수정하세요. 🎜ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}
로그인 후 복사
로그인 후 복사
链接右对齐
将导航条最右边的选项设置右对齐 (float:right;)：

로그인 후 복사
로그인 후 복사
로그인 후 복사
<li>关于
添加分割线
<li>  通过 border-right 样式来添加分割线:
/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}
로그인 후 복사
로그인 후 복사

  <li>主页
  <li>新闻
  <li>联系
  <li>关于


固定导航条
可以设置页面的导航条固定在头部或者底部。
固定在头部：
ul {
    position: fixed;
    top: 0;
    width: 100%;}
로그인 후 복사
로그인 후 복사
固定在底部：
ul {
    position: fixed;
    bottom: 0;
    width: 100%;}
로그인 후 복사
로그인 후 복사
注意: 该实例可以在移动设备上使用。
源码

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #111;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>



로그인 후 복사
로그인 후 복사

    <li>主页
    <li>新闻
    <li>联系
    <li>关于


<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>


示例 1

nbsp;html>


    <meta>
    <title>原生js实现菜单动态添加active类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            list-style: none;
            box-shadow: 0 2px 4px #eeeeee;
        }
        ul > li {
            padding: 6px 16px;
            margin: 0 5px;
            border-right: 1px solid #f7f7f7;
            border-bottom: 1px solid transparent;
            cursor: pointer;
        }
        ul > li:last-child{
            border-right: none;
        }
        li:hover, li:focus, .active {
            color: #ff6615;
            border-bottom: 1px solid #ff6615;
        }
    </style>



로그인 후 복사
로그인 후 복사

    <li>首页
    <li>产品中心
    <li>新闻资讯
    <li>文档下载
    <li>联系我们


<script>
    function removeActiveClass(node) {
        node.className = &#39;&#39;;
    }

    let menus = document.querySelectorAll(&#39;#nav&#39;);
    menus.forEach(function (value, index) {
        value.addEventListener(&#39;click&#39;, function (e) {
            var target = e.target;
            Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li&#39;), removeActiveClass);
            target.className = &#39;active&#39;;
        })
    });
</script>

CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。

nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /*鼠标下拉菜单*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>



<div>
    <span>鼠标移动到我这看到下拉菜单！</span>
    <div>
        <p>CSDN博客</p>
        <p>wgchen.blog.csdn.net</p>
    </div>
</div>


로그인 후 복사
로그인 후 복사
实例解析
HTML 部分
我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span></span> , 或 a  <button></button> 元素。
使用容器元素 (如： <p></p> ) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <p> </p> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分
.dropdown 类使用 position:relative：
 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute ) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。
 默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。
注意：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%
 ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项：

nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>



    <div>
        <button>下拉菜单</button>
        <div>
            <a>CSDN博客 1</a>
            <a>CSDN博客 2</a>
            <a>CSDN博客 3</a>
        </div>
    </div>


로그인 후 복사
로그인 후 복사
（学习视频分享：css视频教程、html视频教程）

위 내용은 예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7322

자바 튜토리얼

1625

Cakephp 튜토리얼

1350

라라벨 튜토리얼

1262

PHP 튜토리얼

1209

Related knowledge

vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다.

js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다.

js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

CSS의 REM은 루트 요소(html)의 글꼴 크기에 상대적인 단위입니다. 여기에는 다음과 같은 특징이 있습니다. 루트 요소의 글꼴 크기를 기준으로 하며 상위 요소의 영향을 받지 않습니다. 루트 요소의 글꼴 크기가 변경되면 REM을 사용하는 요소가 그에 따라 조정됩니다. 모든 CSS 속성과 함께 사용할 수 있습니다. REM 사용의 장점은 다음과 같습니다. 반응성: 다양한 장치 및 화면 크기에서 텍스트를 읽을 수 있도록 유지합니다. 일관성: 웹사이트 전체에서 글꼴 크기가 일관되게 유지되어야 합니다. 확장성: 루트 요소 글꼴 크기를 조정하여 전역 글꼴 크기를 쉽게 변경할 수 있습니다.

Vue에 이미지를 삽입하는 방법 May 02, 2024 pm 10:48 PM

Vue에 이미지를 도입하는 방법에는 URL, 필수 함수, 정적 파일, v-bind 지시어 및 CSS 배경 이미지 등 5가지 방법이 있습니다. 동적 이미지는 Vue의 계산된 속성이나 리스너에서 처리할 수 있으며, 번들 도구를 사용하여 이미지 로딩을 최적화할 수 있습니다. 경로가 올바른지 확인하세요. 그렇지 않으면 로딩 오류가 나타납니다.

스팬 태그의 기능은 무엇입니까 Apr 30, 2024 pm 01:54 PM

SPAN 태그는 스타일, 색상, 글꼴 크기 등의 속성을 적용하여 텍스트를 강조 표시하는 데 사용되는 인라인 HTML 태그입니다. 여기에는 텍스트 강조, 텍스트 그룹화, 호버 효과 추가 및 동적인 콘텐츠 업데이트가 포함됩니다. 강조하려는 텍스트 주위에 <span>, </span> 태그를 배치하여 사용하며, CSS 스타일링이나 JavaScript를 통해 조작됩니다. SPAN 태그의 이점에는 의미의 명확성, 스타일 유연성 및 유지 관리 용이성이 포함됩니다.

js에서 프롬프트를 래핑하는 방법 May 01, 2024 am 06:24 AM

JavaScript에서 프롬프트() 메서드를 사용할 때 다음 세 가지 방법을 통해 줄 바꿈을 수행할 수 있습니다. 1. 줄을 끊으려는 위치에 "\n" 문자를 삽입합니다. 2. 줄 바꿈 문자를 사용합니다. 프롬프트 텍스트; 3. CSS의 "white" -space: pre" 스타일을 사용하여 줄바꿈을 강제합니다.

브라우저 플러그인은 어떤 언어로 작성되어 있나요? May 08, 2024 pm 09:36 PM

브라우저 플러그인은 일반적으로 다음 언어로 작성됩니다. 프런트엔드 언어: JavaScript, HTML, CSS 백엔드 언어: C++, Rust, WebAssembly 기타 언어: Python, Java

js의 노드 란 무엇입니까? May 07, 2024 pm 09:06 PM

노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다.

See all articles

예제를 통해 기본 CSS 네비게이션 바와 CSS 드롭다운 메뉴를 간단하게 이해

네비게이션 바

Navigation Bar = 링크 목록

垂直导航栏

垂直导航条实例

激活/当前导航条实例

创链接并添加边框

全屏高度的固定导航条

水平导航栏

内联列表项

浮动列表项

链接右对齐

添加分割线

固定导航条

源码

示例 1

CSS 下拉菜单

基本下拉菜单

实例解析

下拉菜单

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제