HTML 如何使用HTML和CSS创建一个非矩形的标题

HTML 如何使用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标签链接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”

  • 主体包含一个标题,它还包含一个类别为 “main_box “的div标签。

  • Div包含标题 “HELLO, WORLD!”和一段 “如何使用HTML和CSS创建一个非矩形标题”。

CSS代码

在 “style.css “文件中,添加并使用了以下代码。为了使HTML页面对所有浏览者具有互动性,CSS被用来添加各种动画和效果。

  • 带回所有的浏览器效果。

  • 为了给HTML组件传授效果,要使用类和ID。

  • 使用CSS的clip-path()技术,使标题具有某种形状。

样式.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;
}
  • 在*里面,这是一个通用的选择器,我们应用margin为0,padding为0,而box-sizing为border-box。

  • 对于正文,我们给它的背景色是绿色。

  • 对于标题,我们给它的高度为65vh,背景色为黑色,然后我们使用了一个夹子路径的多边形,使标题的形状不是矩形的,之后,我们给它的边界半径为10em。

  • 然后,对于main_box,它是一个链接到div的类,我们给了它位置:绝对;顶部:25%;左侧:50%;文本对齐:居中;变换: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()。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程