数据结构
网络
关系数据库管理系统(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 次浏览
