如何实现可能吧的样式？
downgoon opened this issue · comments
目标样式
这个标题样式有几个细节：
- 标题自带数字编号。
- 编号和标题名之间隔着一条彩带。
- 彩带有两种颜色：前面一点深色，后面浅色。
没成功的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width initial-scale=1" />
<title>标题自动编号</title>
<style type="text/css">
h1 {
counter-increment: countH1;
}
h2 {
counter-increment: countH2;
counter-reset: countH3;
}
h3 {
counter-increment: countH3;
}
h1::before {
content: "";
margin-left: 1em;
margin-right: 1em;
}
h2::before {
content: counter(countH2);
margin-left: 2em;
margin-right: 2em;
display: block; /* 标题编号换行 */
color: rgb(73, 200, 149); /* 标题编号上色 */
}
h2 {
margin-top: 20px; /* 上侧外边距 */
border-top: 10px solid rgb(73, 200, 149); /* 上侧边框，实现彩带 */
padding-top: 40px; /* 上侧内边距 */
}
h3::before {
content: counter(countH2)"."counter(countH3)"";
margin-left: 3em;
margin-right: 3em;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>正文内容 Content </p>
<h3>三级标题</h3>
<p>正文内容 Content </p>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>正文内容 Content </p>
</body>
</html>展示结果
