資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS建立非矩形頁首
超文字標記語言簡稱為HTML。它用於構建網頁；它解釋了網頁是如何組合在一起的。它有幾個組成部分。其中的元件指示瀏覽器如何呈現材料。
層疊樣式表 (CSS) 定義了HTML元件在各種印刷和數字媒體（包括顯示器和其他印刷和數字形式）中的外觀。使用CSS可以節省大量時間。它可以一次控制多個網頁的設計。在本文中，我們將學習如何使用HTML和CSS建立非矩形頁首。
基本的HTML文件
首先，讓我們來看一個基本的HTML文件：
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
如果我們檢視上面的示例，我們會看到不同的術語，例如DOCTYPE、HTML、head、body、h1和p，這些稱為HTML元素，這些元素可以透過起始標籤、一些內容和結束標籤來定義，所以讓我們逐一瞭解上述示例中使用的元素：
<!DOCTYPE html> 此元素定義文件是HTML5文件。
<html> 這被稱為HTML頁面的根元素，或者我們可以說完整的HTML文件都寫在這個標籤內。
<head> 所有關於HTML頁面的元資訊都寫在該標籤內。
<title> 用於為HTML頁面指定標題，該標題顯示在瀏覽器標籤上。
<body> 定義為HTML頁面的主體，所有內容，如標題、段落、影像、超連結、表格、列表等。
<h1> 用於編寫大標題。
<p> 用於定義段落。
方法
使用<header>標籤建立頁首。
要向頁首中新增內容，我們將使用div。
然後我們將使用clip-path()函式為頁首賦予形狀。
HTML程式碼
建立HTML檔案
使用link標籤在head部分連結CSS檔案，該檔案將包含頁首所需的所有動畫和樣式。
然後在我們的HTML頁面的body部分：
使用<header>建立頁首
建立一個div併為其分配一個類。
向div新增內容，可以是標題或段落。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="main_box">
<h1>HELLO, WORLD!</h1>
<p>How to create a Non-Rectangular Header using HTML & CSS</p>
</div>
</header>
</body>
</html>
我們首先描述了HTML頁面的型別。
在<html> </html>標籤內，我們使用了<head>標籤和<body>標籤。
head標籤包含頁面的標題“document”，以及指向CSS樣式表的連結“style.css”。
body包含一個header，該header進一步包含一個具有類“main_box”的div標籤。
Div包含標題“HELLO，WORLD！”和段落“如何使用HTML和CSS建立非矩形頁首”。
CSS程式碼
在“style.css”檔案中，新增並使用了以下程式碼。為了使HTML頁面對所有檢視者具有互動性，CSS用於新增各種動畫和效果。
恢復所有瀏覽器效果。
要賦予HTML元件效果，請使用類和ID。
使用CSS clip-path()技術為頁首賦予特定形狀。
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: peachpuff;
}
header {
height: 65vh;
background-color: black;
clip-path: polygon(
0 0,
100% 0,
100% 50vh,
80% 60vh,
60% 50vh,
40% 60vh,
20% 50vh,
0 60vh
);
border-radius: 10em;
}
.main_box {
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
h1 {
font-size: 3.85em;
margin: 0.25em;
color: yellow;
}
p {
font-size: 2em;
color: blue;
}
在*中（這是一個通用選擇器），我們應用邊距為0，填充為0，盒尺寸為border-box。
對於body，我們給它設定了綠色背景顏色。
對於header，我們設定了65vh的高度和黑色背景顏色，然後我們使用了clip-path polygon，以便頁首的形狀是非矩形的，之後，我們給它設定了10em的圓角。
然後對於與div連結的類main_box，我們設定了position: absolute; top: 25%; left: 50%; text-align: center; transform: translate(- 50%, -50%);。
標題的字型大小為3.85em，邊距為0.25，顏色為黃色。
最後，段落的樣式是字型大小為2em，顏色為紅色。
組合HTML和CSS程式碼後，我們將得到類似以下的輸出：
示例
以下是上述完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: peachpuff;
}
header {
height: 65vh;
background-color: black;
clip-path: polygon(0 0,
100% 0,
100% 50vh,
80% 60vh,
60% 50vh,
40% 60vh,
20% 50vh,
0 60vh);
border-radius: 10em;
}
.main_box {
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
h1 {
font-size: 3.85em;
margin: 0.25em;
color: yellow;
}
p {
font-size: 2em;
color: blue;
}
</style>
<body>
<header>
<div class="main_box">
<h1>HELLO, WORLD!</h1>
<p>How to create a Non-Rectangular Header using HTML & CSS</p>
</div>
</header>
</body>
</html>
結論
在本文中，我們瞭解了HTML和CSS是什麼，以及如何使用HTML和CSS的基礎知識建立非矩形頁首，我們還學習了有助於我們建立非矩形頁首的不同CSS屬性和各種HTML標籤，其中一個主要功能是clip-path()。
437 次瀏覽
