查看“︁User:Wecury/Sandbox/Notice”︁的源代码

===title+detail(ul)===
<div class="notice"
     style="
     display: flex;
     max-width: min(50em,100%);
     flex-direction: column;
     align-content: center;
     justify-content: center;
     place-content: center center;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     border-color: #91caff;
     border-radius: 8px;
     margin: 0.25em auto;
     background: #e6f4ff;
     border-collapse: inherit;">
  <div class="notice-body"
        style="
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        align-content: flex-start;
        justify-content: space-between;
        place-content: flex-start space-between;
        align-items: flex-start;">
    <div class="notice-icon"
          style="
          border: 0;
          flex: 0 0 auto;
          margin: 0;
          padding: 0.5em 1em;
          text-align: center;">[[File:Lucide-info-blue.svg|30px|link=]]</div>
    <div class="notice-text text-base"
          style="
          width: 95%;
          flex: 1 1 95%;
          padding: 0.5em 0.5em 0.5em 0;
          border: 0;">
       <div class="notice-title text-base"
               style="font-weight:600">标题</div>
       <div class="notice-detail text-sm"
               style="font-weight:400">
         <ul style="margin:0.25em">
           <li>列1</li>
           <li>列2</li>
           <li>列3</li>
         </ul>详细说明
       </div>
    </div>
  </div>
</div>
===title+detail===
<div class="notice"
     style="
     display: flex;
     max-width: min(50em,100%);
     flex-direction: column;
     align-content: center;
     justify-content: center;
     place-content: center center;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     border-color: #91caff;
     border-radius: 8px;
     margin: 0.25em auto;
     background: #e6f4ff;
     border-collapse: inherit;”><!--
--><div class="notice-body"
        style="
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        align-content: flex-start;
        justify-content: space-between;
        place-content: flex-start space-between;
        align-items: flex-start;"><!--
  --><div class="notice-icon"
          style="
          border: 0;
          flex: 1 0;
          margin: 0;
          padding: 0.5em 1em;
          text-align: center;"><!--
       -->[[File:Lucide-info-blue.svg|30px|link=]]<!--
  --></div><!--
  --><div class="notice-text text-base"
          style="
          width: 95%;
          flex: 1 1 95%;
          padding: 0.5em 0.5em 0.5em 0;
          border: 0;"><!--
       --><div class="notice-title text-base"
               style="font-weight:600"><!--
            -->标题<!--
       --></div><!--
       --><div class="notice-detail text-sm"
               style="font-weight:400"><!--
            -->详细说明<!--
      --></div><!--
  --></div><!--
--></div>
</div>
===text===
<div class="notice"
     style="
     display: flex;
     max-width: min(50em,100%);
     flex-direction: column;
     align-content: center;
     justify-content: center;
     place-content: center center;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     border-color: #91caff;
     border-radius: 8px;
     margin: 0.25em auto;
     background: #e6f4ff;
     border-collapse: inherit;"><!--
--><div class="notice-body"
        style="
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        align-content: flex-start;
        justify-content: space-between;
        place-content: flex-start space-between;
        align-items: flex-start;"><!--
  --><div class="notice-icon"
          style="
          border: 0;
          flex: 1 0;
          margin: 0;
          padding: 0.5em 1em;
          text-align: center;"><!--
       -->[[File:Lucide-info-blue.svg|30px|link=]]<!--
  --></div><!--
  --><div class="notice-text text-base"
          style="
          width: 95%;
          flex: 1 1 95%;
          padding: 0.5em 0.5em 0.5em 0;
          border: 0;"><!--
       -->Notice文字<!--
  --></div><!--
--></div>
</div>

<div class="notice"
     style="
     display: flex;
     max-width: min(50em,100%);
     flex-direction: column;
     align-content: center;
     justify-content: center;
     place-content: center center;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     border-color: #ffe58f;
     border-radius: 8px;
     margin: 0.25em auto;
     background: #fffbe6;
     border-collapse: inherit;"><!--
--><div class="notice-body"
        style="
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        align-content: center;
        justify-content: space-between;
        place-content: center space-between;
        align-items: center;"><!--
  --><div class="notice-icon"
          style="
          border: 0;
          flex: 1 0;
          margin: auto;
          padding: 1em;
          text-align: center;"><!--
       -->[[File:Lucide-circle-alert-orange.svg|30px|link=]]<!--
  --></div><!--
  --><div class="notice-text text-base"
          style="
          width: 95%;
          flex: 1 1 95%;
          padding: 0.5em 0.5em 0.5em 0;
          border: 0;"><!--
       -->Caution文字<!--
  --></div><!--
--></div>
</div>

<div class="notice"
     style="
     display: flex;
     max-width: min(50em,100%);
     flex-direction: column;
     align-content: center;
     justify-content: center;
     place-content: center center;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     border-color: #ffccc7;
     border-radius: 8px;
     margin: 0.25em auto;
     background: #fff2f0;
     border-collapse: inherit;"><!--
--><div class="notice-body"
        style="
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        align-content: center;
        justify-content: space-between;
        place-content: center space-between;
        align-items: center;"><!--
  --><div class="notice-icon"
          style="
          border: 0;
          flex: 1 0;
          margin: auto;
          padding: 1em;
          text-align: center;"><!--
       -->[[File:Lucide-triangle-alert-red.svg|30px|link=]]<!--
  --></div><!--
  --><div class="notice-text text-base"
          style="
          width: 95%;
          flex: 1 1 95%;
          padding: 0.5em 0.5em 0.5em 0;
          border: 0;"><!--
       -->Warning文字<!--
  --></div><!--
--></div>
</div>