前端基础篇-深入了解用 HTML 与 CSS 实现标题排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题排版示例</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.title {
color: #333333;
font-size: 24px;
font-weight: bold;
}
.subtitle {
color: #666666;
font-size: 18px;
font-weight: normal;
}
</style>
</head>
<body>
<h1 class="title">这是一个关于前端基础的标题</h1>
<h2 class="subtitle">这是对上述标题的补充说明</h2>
</body>
</html>
这段代码展示了如何使用HTML和CSS定义标题,并通过CSS为它们设置样式。.title
类用于大标题,而.subtitle
类用于次级说明文字。通过这个例子,学习者可以理解如何使用CSS对网页文本进行样式化,为后续的学习和开发奠定基础。
评论已关闭