不失敗風格 by Mike

by ph822720355

HTML

<div style="overflow: auto;">
  <h2>＜不失敗風格 by Mike＞</h2> 

<!-- 通用顏色 -->
  <h3 style="margin-bottom:0">[通用顏色]</h3>
  <div style="color: crimson; font-weight: bolder">紅色: crimson   #dc143c   (220,20,60)</div>
  <div style="color: mediumseagreen; font-weight: bolder">綠色: mediumseagreen   #3CB371   (60,179,113) </div>
  <div style="color: #0073CF; font-weight: bolder">藍色: true blue   #0073CF   (0,115,207) </div>


<!-- 通用字體 -->
  <h3 style="margin-bottom:0">[通用字體]</h3>
  <div class='ff1'>我是王曉明 </div>
  <div class='ff1'>2023/01/01 11:30:50</div>
  <div class='ff1'>~!@#$%^&*()_+</div>
  <div class='ff1'>ABCDEFGHIJKLMNOPQRSYUVWXYZ</div>
  <div class='ff1'>abcdefghijklmnopqrstuvwxyz</div>

<!-- 欄位必填星號 -->
  <h3 style="margin-bottom:0">[欄位必填星號]</h3>
  <div>
      <label class="fill-hint-star">姓名</label>
      <input type="text">
  </div>
    <div>
      <label class="fill-hint-star-symbol">電話</label>
      <input type="text">
  </div>

  
  
<!-- 嵌入Unicode 
  可以參考: 
    1. https://www.fileformat.info/info/unicode/char/2193/index.htm
    2. https://www.w3schools.com/charsets/ref_utf_symbols.asp
-->
  <h3 style="margin-bottom:0">[嵌入Unicode]</h3>
  <p class="topic-games">Game News: A new inFamous is not planned</p>
  <p class="topic-weather">Weather for Today: Heat, violent storms and twisters</p>
  <p class="topic-hot">Trending Article: Must-watch videos of the week</p>
  <p>I will display &spades;</p>
  <p>I will display &#9824;</p>
  <p>I will display &#x2660;</p>
  
</div>

CSS

/* 通用字體 */
.ff1 {
  font-family: Helvetica, Tahoma, Arial,
               "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei,
               "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei", sans-serif;
}





/*必填提示星號*/
.fill-hint-star {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%23dc143c%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M208%2032c0-17.7%2014.3-32%2032-32h32c17.7%200%2032%2014.3%2032%2032V172.9l122-70.4c15.3-8.8%2034.9-3.6%2043.7%2011.7l16%2027.7c8.8%2015.3%203.6%2034.9-11.7%2043.7L352%20256l122%2070.4c15.3%208.8%2020.5%2028.4%2011.7%2043.7l-16%2027.7c-8.8%2015.3-28.4%2020.6-43.7%2011.7L304%20339.1V480c0%2017.7-14.3%2032-32%2032H240c-17.7%200-32-14.3-32-32V339.1L86%20409.6c-15.3%208.8-34.9%203.6-43.7-11.7l-16-27.7c-8.8-15.3-3.6-34.9%2011.7-43.7L160%20256%2038%20185.6c-15.3-8.8-20.5-28.4-11.7-43.7l16-27.7C51.1%2098.8%2070.7%2093.6%2086%20102.4l122%2070.4V32z%22%2F%3E%3C%2Fsvg%3E");
 background-repeat: no-repeat !important;
 background-position: top right !important;
 background-size: 6.5px;
 padding-right:7px 
}
/*必填提示星號
https://www.fileformat.info/info/unicode/char/2A/index.htm
*/
.fill-hint-star-symbol::after {
  /*content: '*';*/
  content: '\002A';
  color: crimson;
  font-weight: bolder;
}




/* 滾動條樣式 ScrollBar width */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background-color: transparent !important;
}

/* 滾動條樣式 ScrollBar Track */
::-webkit-scrollbar-track {
    background: #e8e8e8 !important;
}

/* 滾動條樣式 ScrollBar Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0, 0.3) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* 滾動條樣式 ScrollBar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2)...