社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
導覽列
導覽列=連結清單
垂直導覽列
垂直導航條實例
啟動/目前導航條實例
創造連結並加入邊框
全螢幕高度的固定導航條
水平導覽列
內嵌清單項目
浮動列表項目
水平導航條實例
链接右对齐
添加分割线
固定导航条
源码
示例 1
CSS 下拉菜单
基本下拉菜单
实例解析
下拉菜单
首頁 web前端 css教學 透過範例簡單了解基礎CSS導覽列、CSS下拉選單

透過範例簡單了解基礎CSS導覽列、CSS下拉選單

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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 {
    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>




登入後複製



<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>



創造連結並加入邊框


可以在<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>




登入後複製



<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>



全螢幕高度的固定導航條


接下來我們建立一個左邊是全螢幕高度的固定導航條，右邊是可捲動的內容。 


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>




登入後複製



<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>



水平導覽列


#有兩種方法建立橫向導覽列。使用 內嵌 (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;}
登入後複製


實例解析：


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


水平導航條實例


建立一個水平導航條，在滑鼠移動到選項後修改背景顏色。 


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;)：
透過範例簡單了解基礎CSS導覽列、CSS下拉選單


登入後複製
登入後複製

<li>关于

添加分割线


<li>  通过 border-right 样式来添加分割线:


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



透過範例簡單了解基礎CSS導覽列、CSS下拉選單


固定导航条


可以设置页面的导航条固定在头部或者底部。


固定在头部：


ul {
    position: fixed;
    top: 0;
    width: 100%;}
登入後複製


固定在底部：


ul {
    position: fixed;
    bottom: 0;
    width: 100%;}
登入後複製


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


源码


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


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>




登入後複製



<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


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


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 创建一个鼠标移动上去后显示下拉菜单的效果。


基本下拉菜单


当鼠标移动到指定元素上时，会出现下拉菜单。


透過範例簡單了解基礎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 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。


下拉菜单


创建下拉菜单，并允许用户选取列表中的某一项：


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


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
											
											

												
													
Undresser.AI Undress

												
												
人工智慧驅動的應用程序，用於創建逼真的裸體照片

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
用於從照片中去除衣服的線上人工智慧工具。

											

										

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
免費脫衣圖片

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI脫衣器

											

										

																		

											
												AI Hentai Generator
											
											

												
													
AI Hentai Generator

												
												
免費產生 AI 無盡。

											

										

																

								

									顯示更多
								

							

						

					

					

					

						

							

								
								
熱門文章

							

							

															

									R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
									

										1 個月前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									R.E.P.O.最佳圖形設置
									

										1 個月前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									刺客信條陰影：貝殼謎語解決方案
									

										3 週前
										By DDD
									

								

															

									Windows 11 KB5054979中的新功能以及如何解決更新問題
									

										2 週前
										By DDD
									

								

															

									威爾R.E.P.O.有交叉遊戲嗎？
									

										1 個月前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

														

							

								顯示更多
							

						

					



											

							

								

									
									
熱工具

								

								

																		

											
												記事本++7.3.1
											
											

												
													
記事本++7.3.1

												
												
好用且免費的程式碼編輯器

											

										

																			

											
												SublimeText3漢化版
											
											

												
													
SublimeText3漢化版

												
												
中文版，非常好用

											

										

																			

											
												禪工作室 13.0.1
											
											

												
													
禪工作室 13.0.1

												
												
強大的PHP整合開發環境

											

										

																			

											
												Dreamweaver CS6
											
											

												
													
Dreamweaver CS6

												
												
視覺化網頁開發工具

											

										

																			

											
												SublimeText3 Mac版
											
											

												
													
SublimeText3 Mac版

												
												
神級程式碼編輯軟體(SublimeText3)

											

										

																	

								

									顯示更多
								

							

						

										

					
					

						

							

								
								
熱門話題

							

							

															

									gmail信箱登陸入口在哪裡
									

										

											
											7559
										

										

											
											15
										

									

								

															

									CakePHP 教程
									

										

											
											1384
										

										

											
											52
										

									

								

															

									steam的賬戶名稱是什麼格式
									

										

											
											83
										

										

											
											11
										

									

								

															

									win11激活密鑰永久
									

										

											
											59
										

										

											
											19
										

									

								

															

									NYT連接提示和答案
									

										

											
											28
										

										

											
											96
										

									

								

														

							

								顯示更多
							

						

					

				

			

							

					

						

							Related knowledge
						

						


													

								
									HTML，CSS和JavaScript的角色：核心職責
								
								HTML，CSS和JavaScript的角色：核心職責
								Apr 08, 2025 pm	 07:05 PM
								
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

							

														

								
									vue中怎麼用bootstrap
								
								vue中怎麼用bootstrap
								Apr 07, 2025 pm	 11:33 PM
								
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

							

														

								
									bootstrap怎麼寫分割線
								
								bootstrap怎麼寫分割線
								Apr 07, 2025 pm	 03:12 PM
								
創建 Bootstrap 分割線有兩種方法：使用  標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

							

														

								
									bootstrap怎麼調整大小
								
								bootstrap怎麼調整大小
								Apr 07, 2025 pm	 03:18 PM
								
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

							

														

								
									了解HTML，CSS和JavaScript：初學者指南
								
								了解HTML，CSS和JavaScript：初學者指南
								Apr 12, 2025 am	 12:02 AM
								
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

							

														

								
									bootstrap怎麼設置框架
								
								bootstrap怎麼設置框架
								Apr 07, 2025 pm	 03:27 PM
								
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

							

														

								
									bootstrap怎麼插入圖片
								
								bootstrap怎麼插入圖片
								Apr 07, 2025 pm	 03:30 PM
								
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

							

														

								
									bootstrap按鈕怎麼用
								
								bootstrap按鈕怎麼用
								Apr 07, 2025 pm	 03:09 PM
								
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

							

													


													
								See all articles