搬送|赤いヘッダーのファイルスタイル

原作者为: 红头文件组件 - Area-CN-02
遵循: CC BY-SA 3.0 协议共有，本站仅做些许适配

ファイルのヘッダー XXX発〔XXXX〕X号

ファイルのタイトル

ファイルの内容

CSS部分コード

<style>
@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif+SC&display=swap');
@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif+TC&display=swap');
@import url(https://crimone.github.io/typefaces/fandol-fangsong/FandolFang-Regular.css);
div.reddoc {
    box-shadow: 0 0 10px;
    padding: 2em;
    margin: 2em auto;
    background-color: white;
    overflow: hidden;
    color: black;
}
span.redheader {
    color: red;
    font-family: "宋体", 'Noto Serif SC', 'Noto Serif TC', serif;
    font-weight: bold;
    font-size: 300%;
    -ms-transform: scaleX(0.7);
    -moz-transform: scaleX(0.7);
    -webkit-transform: scaleX(0.7);
    -o-transform: scaleX(0.7);
    transform: scaleX(0.7);
    margin-bottom: 0.7em;
    display: inline-block;
    line-height: 120%;
}
span.redtitle {
    font-family: "宋体", 'Noto Serif SC', 'Noto Serif TC', serif;
    font-weight: bold;
    display: block;
    font-size: 120%;
    line-height: 190%;
}
span.rednumber {
    font-family: "仿宋", 'FandolFang-Regular', serif;
    display: block;
    font-size: 110%;
}
span.redtext {
    font-family: "仿宋", 'FandolFang-Regular', serif;
    display: block;
    font-size: 110%;
    line-height: 190%;
}
div.reddoc hr {
    border-style: none;
    height: 2.5em;
    margin: 0;
    position: relative;
    background-color: white;
    overflow: visible;
}
div.reddoc hr::before {
    content: "  ";
    display: block;
    width: 100%;
    height: 5px;
    background-color: red;
    position: absolute;
    left: 0;
    top: calc(0.5em - 1px);
}
div.reddoc hr::after {
    content: "★";
    line-height: 0.5;
    color: red;
    font-size: 200%;
    text-align: center;
    display: block;
    width: 1.5em;
    height: 1em;
    position: absolute;
    left: calc(50% - 0.75em);
    top: 0;
    background-color: white;
}
</style>

HTML部分コード

<div class="reddoc">
<div style="text-align: center;">
<span class="redheader">ファイルのヘッダー</span>
<span class="rednumber">XXX発〔XXXX〕X号</span>
<hr>
<span class="redtitle">ファイルのタイトル</span>
</div>
<span class="redtext">ファイルの内容</span>
</div>