資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用純 CSS 設計垂直和水平選單
選單是任何網站的關鍵組成部分。它幫助訪問者找到您的高質量資料，並引導他們到網站的關鍵部分。當然，CSS 是建立精美導航選單的最佳語言。它具有極強的適應性，可用於任何型別的網站。它可以在網頁或頁首的主要內容之前水平或垂直顯示。
我們在本文中將要執行的任務是使用純 CSS 設計垂直和水平選單。這可以透過使用 <div> 和 <span> 標籤來完成。
使用 <div> 標籤
<div> 標籤也稱為分隔標籤。在 HTML 中，<div> 標籤用於建立內容部分，例如文字、圖形、頁首、頁尾和導航欄。<div> 標籤有開始 (<div>) 和結束 (</div>) 標籤，結束標籤是必需的。此標籤在 Web 開發中最有用，因為它允許我們將網頁上的資料劃分開來，併為不同型別的資訊或功能建立特定部分。
語法
以下是 <div> 標籤的語法。
<div>… </div>
使用 <span> 標籤
HTML 元素 <span> 用作內容的一般內聯容器，它本身不表示任何特定含義。它可以用來對具有相似屬性值或需要一起設定樣式的元素進行分組（使用 class 或 id 屬性）。只有在沒有其他合適的語義元素時才應該使用它。<div> 元素與 <span> 元素非常相似，但 <div> 是塊級元素，而 <span> 是內聯元素。
語法
以下是 <span> 標籤的語法。
<span class="">Some Text</span>
現在，讓我們看看以下使用 CSS 建立垂直和水平選單的示例。
示例
在下面的示例中，我們將建立一個垂直選單。
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3;">
<div class="pure-menu">
<span class="pure-menu-heading"> TUTORIALSPOINT </span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/index.htm" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/codingground.htm" class="pure-menu-link">CodingGround</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/online_dev_tools.htm" class="pure-menu-link">Tools</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
</li>
</ul>
</div>
</body>
</html>
執行上述程式碼後，它將生成一個包含垂直選單的輸出，該選單是網頁上顯示的預設選單，並應用了 CSS。
示例
以下是一個示例，我們將在此網頁上建立水平選單。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<style>
.pure-menu-horizontal{
width: 500px;
height: 200px;
}
</style>
</head>
<body style="background-color:#E8DAEF;">
<div class="pure-menu pure-menu-horizontal">
<span class="pure-menu-heading">TUTORIALSPOINT</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/index.htm" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/codingground.htm" class="pure-menu-link">Coding Ground</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/online_dev_tools.htm" class="pure-menu-link">Tools</a>
</li>
<li class="pure-menu-item">
<a href="https://tutorialspoint.tw/online_dev_tools.htm" class="pure-menu-link">Contact Us </a>
</li>
</ul>
</div>
</body>
</html>
執行上述程式碼後，它將生成一個包含應用了 CSS 的水平選單的輸出，該選單將顯示在網頁上。
更新於：2023年10月9日
244 次瀏覽
廣告