資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用HTML建立垂直線？
有時，任務是在網頁上顯示一條垂直線並設定該垂直線的樣式。本文將演示使用HTML在網頁上建立垂直線的方法。首先介紹了為div標籤指定邊框樣式以顯示垂直線的方法。在第二個示例中，鍵盤字元“|”和“!”作為表格單元格內容填充，以建立由短劃線或點組成的垂直線。在第三個示例中，建立了一個看起來像垂直線的窄矩形。
示例1：使用HTML和邊框樣式繪製垂直線
資料夾和頁面設計步驟
步驟1 − 首先建立一個具有html副檔名的檔案。在這個html檔案中編寫html標籤、head標籤和body標籤。
步驟2 − 現在在body標籤內，建立一個<center>標籤。
步驟3 − 對於<center>標籤內的div標籤，使用類名“lineusingborder”。
步驟4 − 建立一個<style>標籤併為.lineusingborder指定樣式。
步驟5 − 嘗試使用border-left或border-right，2px實線和深色。
步驟6 − 設定margin以更改垂直線顯示位置。
步驟7 − 為垂直線指定高度。嘗試使用300px。在瀏覽器中開啟html檔案並檢查結果。
使用的檔案：verticalLine1.html
verticalLine1.html程式碼
<!DOCTYPE html>
<html>
<head>
<style>
.lineusingborder{
margin-left: 50%;
border-left: 2px solid rgb(10, 2, 29);
height: 300px;
}
</style>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 1</h2>
<div class="lineusingborder"></div>
</center>
</body>
</html>
示例2：使用HTML和表格繪製虛線和點狀樣式的垂直線
資料夾和頁面設計步驟
步驟1 − 建立一個HTML檔案並開始編寫程式碼。
步驟2 − 在<body>內建立一個<center>標籤。
步驟3 − 現在在<center>標籤內，建立一個類名為“lineusingrectangle”的<table>標籤。
步驟4 − 現在在<table>標籤內，建立多個<tr><td><strong>標籤，並將鍵盤字元“|”指定為表格單元格內容，以建立垂直虛線。
步驟5 − 再次建立一個table標籤，在該<table>標籤內，建立多個<tr><td><strong>標籤，並將鍵盤字元“!”指定為表格單元格內容，以建立垂直點劃線。
步驟6 − 在瀏覽器中開啟html檔案並檢查結果。
使用的檔案：verticalLine2.html
verticalLine2.html程式碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 2</h2>
<h3>Dashed Line Style 1</h3>
<table >
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
</table>
<h3>Dash and Dot Line Style 2</h3>
<table >
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
</table>
</center>
</body>
</html>
示例3：使用HTML和矩形概念繪製垂直線
資料夾和頁面設計步驟
步驟1 − 建立一個名為verticalLine3.html的html檔案。
步驟2 − 建立此html檔案的基本頁面結構，並在<body>內包含一個<center>標籤。
步驟3 − 現在在這個<center>標籤內，建立一個
標籤，類名為“lineusingrectangle”。步驟4 − 建立一個<style>標籤併為.lineusingrectangle指定樣式。
步驟5 − 設定矩形的樣式，例如較大的高度值和非常小的寬度值。
步驟6 − 嘗試使用3px作為寬度和500px作為高度。
步驟7 − 也為線條指定深色。在瀏覽器中開啟html檔案並檢查結果。
使用的檔案：verticalLine3.html
verticalLine3.html程式碼
<!DOCTYPE html>
<html>
<head>
<style>
.lineusingrectangle {
height: 500px;
width: 3px;
background-color: #3b0404;
}
</style>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 3</h2>
<div class="lineusingrectangle"></div>
</center>
</body>
</html>
結論
在這篇HTML文章中，透過三個不同的示例，介紹了建立垂直線的方法。在第一個示例中，設定邊框樣式以顯示垂直線。在第二個示例中，使用不同的鍵盤字元建立虛線和點狀樣式的垂直線；在第三個示例中，透過使用矩形概念建立垂直線，其中為矩形提供較大的高度值和非常小的寬度值。
2K+ 次瀏覽
