✍ 📁 🙈 🙉 🙊

flex direction

<h3>div display : flex </h3>

<pre> 又稱flexbox，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式 (en-US)。
 針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型，
 彈性容器的邊緣也不會與內容的邊緣重疊。

Example :
 <<?>div id="outerDiv">
 <<?>div id="div1">1 <<?>/div>
 <<?>div id="div2">2 <<?>/div>
 <<?>div id="div3">3 <<?>/div>
 <<?>div id="div4">4 <<?>/div>
 <<?>div id="div5">5 <<?>/div>
 <<?>/div>

#outerDiv div { display:inherit;flex:1;
                 justify-content: center;
                 align-items : center;font-size: 20px ;
                 border: 1px solid black; }

outerDiv { width: 100%; height:200px;
 border:3px solid;
 display:flex;
 flex-direction:row ; }

</pre>

#sel , #sel select  {font-size: 20px ;}
#outerDiv { width: 100%; height:200px;
            border: 3px solid;
            display: flex;
            flex-direction: row;       }

#outerDiv div { display:inherit;flex:1;
 justify-content: center;
 align-items : center;font-size: 20px ;
 border: 1px solid black; }
}	
</style>

<table border="1" width="100%"><tbody>
<tr><td>	
<div id="sel">
 	
outerDiv.flex-direction :
<select onchange="outerDiv.style.flexDirection= this.value">
 <option value="row" > row</option>
 <option value="row-reverse" >row-reverse</option>
 <option value="column" > column</option>
 <option value="column-reverse" > column-reverse</option>
</select>

innerDiv.flex:
<select onchange="Fff(this.value)">
 <option value="1" > 1</option>
 <option value="0" >0</option>
</select>
 
innerDiv div quantity
<select onchange="Dq(this.value)">
 <option value="5" >5</option>
 <option value="3" >3</option>
 <option value="1" >1</option>
</select>
 
</td></tr></tbody></table>

if(x == 1){ div2.style.display="none" ;
            div3.style.display="none" ;
            div4.style.display="none" ;
            div5.style.display="none" ;}

if(x == 3){ div4.style.display="none" ;
            div5.style.display="none" ;}

}

function Fff(x){
div1.style.flex = x;
div2.style.flex = x;
div3.style.flex = x;
div4.style.flex = x;
div5.style.flex = x;
}

outerDiv.style.display="flex";
outerDiv.style.flexDirection="row";

window.addEventListener( "change", DDP)

function DDP() {
DP.innerHTML =outerDiv.style.flexDirection; }

function divD(x , c) {
x.style.display="flex";
if(c.checked) {x.style.display="none";} 
}
DDP();
</script>

display:flex + align-content: stretch;

<select onchange="outside_DIV.style.alignContent= this.value;
 DP1.innerHTML=outside_DIV.style.alignContent">
 <option value="stretch" >stretch </option>
 <option value="center" >center </option>
 <option value="flex-start" >flex-start </option>
 <option value="flex-end" >flex-end </option>
 <option value="space-between" >space-between</option>
 <option value="space-around" > space-around </option>
 <option value="space-evenly" > space-evenly </option>

<option value="initial" > initial </option>
 <option value="inherit " > inherit </option>
</select>

#outside_DIV div { text-align: center;
	 background: gray;
	 border: 1px solid black;
	 color: white;
	 padding: 0.5em;
	 box-sizing: border-box;
	 flex-basis: 33%; }
</style>
Example
<div id="outside_DIV">
 <div id="div1">01</div>
 <div id="div2">02</div>
 <div id="div3">03</div>
 <div id="div4">04</div>
 <div id="div5">05</div>
</div>

<pre>
<<c>style>
#outside_DIV{ height: 250px;background: #def;
 display: flex; 
 flex-wrap: wrap;
 <r>align-content: stretch ;</r> }
<</c>/style>
<</c>div id="outside_DIV">
 <</c>div id="div1">01<</c>/div>
 <</c>div id="div2">02<</c>/div>
 <</c>div id="div3">03<</c>/div>
 <</c>div id="div4">04<</c>/div>
 <</c>div id="div5">05<</c>/div>
<</c>/div></pre>

<style>

select  {font-size: 20px ;}

b{font-size:25px;color:blue;} 
r{font-size:20px;color:red;}
b{font-size:25px;color:blue;}
pre { font-size: 20px ;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>

<h3>display:flex align-self:flex-start</h3>
<pre> 在進入探討之前，先來簡單敘述一下這三者代表的是什麼，有些基本概念，
 再來了解或許會比較好理解：

align-self：交錯軸個別項目的對齊方式。
 align-self屬性：
 stretch 預設 | flex-start | center | flex-end | baseline

<<c>style>
 #div1 { align-self: flex-start }
 #div2 { align-self: flex-end }
 #div3 { align-self: center }
 #div4 { align-self: stretch }
 #div5 { align-self: baseline }

.outside_DIV{ <r>display: flex ;</r> 
 height: 150px ;
 background: #def ; }

<<c>/style>

</pre>

<div class="outside_DIV">
<div id="div1">div1 flex-start</div>
<div id="div2">div2 flex-end</div>
<div id="div3">div3 center</div>
<div id="div4">div4 stretch</div>
<div id="div5">div5 baseline</div>
</div>

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

b{font-size:25px;color:blue;} 
r{color:red;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;   }    /* Internet Explorer 5.5+ */
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

</style>

<h3>display:flex align-items</h3>
<pre> align-items：當交錯軸只有一行時的對齊方式。
 align-items 屬性：
 stretch 預設 | center | flex-start | flex-end | baseline

<<?>div id="outside_DIV" >
 <<?>div id="item1">1<<?>/div>
 <<?>div id="item2">2<<?>/div>
 <<?>div id="item3">3<<?>/div>
 <<?>div id="item4">4<<?>/div>
 <<?>div id="item5">5<<?>/div>
<<?>/div>

#outside_DIV{ height: 200px ; width: 100%px;  
              display: flex ; flex-wrap: wrap;
              background-color: #8c8c8c; }

#outside_DIV div { width: 20%;
 display: flex;
 align-items: center;
 justify-content: <r>stretch </r>; }

align-items: <select id="values" >
 <option value="stretch">stretch</option>
 <option value="center" >center</option>
 <option value="flex-start">flex-start</option>
 <option value="flex-end">flex-end</option>
 <option value="baseline">baseline</option>
 </select>
</pre>

<SCRIPT>
var values = document.getElementById("values");
values.addEventListener("change", (evt) => {
 outside_DIV.style.alignItems = evt.target.value;
 dd.innerHTML = evt.target.value });
</SCRIPT>

#outside_DIV div { width: 20% ; display: flex;
                   justify-content: center;
                   align-items: stretch; }

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

select {font-size: 20px}

r{font-size:20px;color:red;}

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;   }    /* Internet Explorer 5.5+ */
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

</style>

<h3>display:flex + order </h3>
<div class="outside_DIV">
<div id="div1">div1 flex-start</div>
<div id="div2">div2 flex-end</div>
<div id="div3">div3 center</div>
<div id="div4">div4 stretch</div>
<div id="div5">div5 baseline</div>
</div>

<pre>
<<c>style>
#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }
<<c>/style>
</pre>

#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }

.outside_DIV div {text-align: center;
	      background: gray;
	      border: 1px solid black;
	      color: white;
	      padding: 0.5em;
	      box-sizing: border-box;
	      flex-basis: 20%; }

b{font-size:25px;color:blue;} 
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; }
</style>

<sel>
CSS main div { justify-content :
<select onchange="mainDIV.style.justifyContent=this.value;DDP() ">
 <option value="center" > center </option>
 <option value="start" > start </option>
 <option value="end" > end </option>

<option value="flex-start" > flex-start </option>
 <option value="flex-end" > flex-end </option>
 <option value="left" > left</option>
 <option value="right" > right</option>

<option value="space-between" > space-between </option>
 <option value="space-around" > space-around </option>
 <option value="space-evenly" > space-evenly </option>
 <option value="stretch" > stretch </option>

<option value="inherit" > inherit </option>
 <option value="initial" > initial </option>
 <option value="revert" > revert </option>
 <option value="revert-layer" > revert-layer </option>
 <option value="unset" > unset </option>

</select> ; }

CSS main div { align-items :
<select onchange="mainDIV.style.alignItems=this.value;DDP() ">
 <option value="center" > center </option>
 <option value="flex-start" > flex-start </option>
 <option value="flex-end" > flex-end </option>
 <option value="stretch" > stretch </option>
 <option value="baseline" > baseline </option>
 <option value="initial" > initial </option>
 </select> ; }

CSS main div { flex-direction :
<select onchange="mainDIV.style.flexDirection =this.value;DDP() ">
 <option value="row" > row </option>
 <option value="row-reverse" > row-reverse </option>
 <option value="column" > column </option>
 <option value="column-reverse" > column-reverse </option>
 <option value="initial" > initial </option>
 <option value="inherit" > inherit	 </option>
 </select> ; }
</sel>

#mainDIV {height:500px;width:100%;
          background-color: linen;
          display: flex;
          justify-content: center ;
          flex-flow: row;
          align-items: center ; 
          flex-direction :row  }

#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9 {
  width:70px;
  background-color:pink;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px; 
  display:flex ; 
  justify-content: center;
  align-items : center; }
 
 #div1{height:40px;order: 1 }
 #div2{height:60px;order: 2}
 #div3{height:80px;order: 3}
 #div4{height:100px;order: 4}

#pp { font-size: 30px;
      font-weight : bold;
      color : black ; 
      position: fixed;
      top:40% ; left:150px }

</style>

</div>

} DDP( );</script>

Edit

#html #style #script #javascript #CSS #display flex #display inherit #justify-content center #align-items center #align-content stretch #CSS #align-self flex-start #align-self flex-end #align-self center #align-self stretch #align-self baseline

css display table

<h3>display:table</h3>

<table border="1" style="width: 100%;font-size: 20px"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組 類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre>Example :
<<?>div class="Table">
 <<?>div class="Tbody">
 <<?>div class="Tr">
 <<?>div class="td">123<<?>/div>
 <<?>div class="td">456<<?>/div>
 <<?>/div> 
 <<?>div class="Tr">
 <<?>div class="td">ABC<<?>/div>
 <<?>div class="td">DEF<<?>/div>
 <<?>/div> 
 <<?>/div>
<<?>/div>

<<?>style>
 .Table { display:table;border-style:double}
 .Tbody { display:table-row-group}
 .Tr { display:table-row}
 .td { display:table-cell;border-style:double ;
 padding:0 10px}
<<?>/style>
</pre>

</div>
</div>

pre { font-size: 20px ;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; }
</style>

input HTML

<table border="1" style="width: 100%;"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組 類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre>Example 1
 <<c>div class="Table"> <<c>!-- similar <<c>table>-->
 <<c>div class="tr" > <<c>!-- similar <<c>tr>----->
 <<c>!-- similar <<c>td> ------>
 <<c>div class="td alignCenter verticalAlignTop" >
 text-align:center;<<c>br>vertical-align:top;<<c>/div>
 
 <<c>div class="td alignCenter verticalAlignMiddle">
 text-align:center;<<c>br>vertical-align:middle;<<c>/div>
 
 <<c>div class="td alignCenter verticalAlignBottom">
 text-align:center;<<c>br>vertical-align: bottom;<<c>/div>
 <<c>/div>

<<c>div class="tr" > <<c>!-- similar <<c>tr>-->
 <<c>!-- similar <<c>td> ------>
 <<c>div class="td alignLeft verticalAlignTop">
 text-align:left;<<c>br>vertical-align:top;<<c>/div>
 
 <<c>div class="td alignCenter verticalAlignMiddle" >
 text-align: center;<<c>br>vertical-align: middle;<<c>/div>
 
 <<c>div class="td alignRight verticalAlignBottom " >
 text-align:right ;<<c>br>vertical-align: bottom;<<c>/div>
 <<c>/div>
<<c>/div>
<<c>style>
.Table {display:table;width: 100%;font-size: 23px;}
div {border: 1px solid #f00;}
.tr {display:table-row;height: 200px; }
.td {display:table-cell;width:33%;}
.alignCenter {text-align:center;}
.alignLeft {text-align:left;}
.alignRight {text-align:right;}

.verticalAlignTop {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
<<c>/style>

</pre>
<style> 
td {padding-left:10px}

pre { font-size: 20px ;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#ccs #HTML #blogger #字型樣式 #Font style

Font style

<h3 class="hhh">字型樣式</h3>
<style>
dpf {height:60px;width:45%;float:left;
 font-size: 20px ;
 border-style: inset;text-align: center;
 border-color: orchid ;
 background-color: thistle;
 border-radius: 30px;
 margin:10px 10px;
 display: flex;
 align-items: center;
 justify-content: center;
}
 
h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; }
</style>

<dpf>
<<?>strong> important text 強調<<?>/strong>
</dpf>

<dpf>
<<?>em> marks text 強調 <<?>/em> 
</dpf>

<dpf>
<<?>i>italic 斜體 <<?>/i> 
</dpf>

<dpf><cite>
<<?>cite> Define the title 作品名稱 <<?>/cite>
</cite></dpf>

<dpf><kbd>
<<?>kbd>keyboard input 鍵盤符號<<?>/kbd>
</kbd></dpf>

<dpf><samp>
<<?>samp> Define text 簡單文字 <<?>/samp>
</samp></dpf>

<dpf>
<<?>small>superscript 縮小字型<<?>/small>
</dpf>

</div>

<h3 class="hhh">字型樣式</h3>
<style>
dpf {height:60px;width:45%;float:left;
 font-size: 20px ;
 border-style: inset;text-align: center;
 border-color: orchid ;
 background-color: thistle;
 border-radius: 30px;
 margin:10px 10px;
 display: flex;
 align-items: center;
 justify-content: center;
}
h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; } 
</style>

<dpf><tt>
<<?>tt> teletype text 打字機文本 <<?>/tt>
</tt></dpf>

</dpf>
<dpf><abbr>
<<?>abb > 縮寫元素 abbreviation element <<?>/abbr>
</abbr></dpf>

<dpf>
<<?>u> underlined 底線 <<?>/u>
</dpf>

<dpf><ins>
<<?>ins> inserted 插入 <<?>/ins>
</ins></dpf>

<dpf><del>
<<?>del> deleted 刪除線 <<?>/del>
</del></dpf>

<dpf><s>
<<?>s> Strikethrough 刪除 <<?>/s>
</s></dpf>

<dpf><strike>
<<?>strike> Strikethrough 刪除<<?>/strike>
</strike></dpf>

<dpf>
<<?>mark> market 高亮文字 <<?>/mark>
</dpf>

<dpf><var>
<<?>var> variables 變數 <<?>/var>
</var></dpf>

<dpf><<?>h1> to <<?>h6> Title word 標題字 
<<?>h1>標題字<<?>/h1>
</dpf>

</div>

Edit

#ccs #HTML #blogger #字型樣式 #Font style

Free online tools

<h3 class="hhh">圖片背景消除 100% 全自動且免費</h3>

前往 :<ol>

<li><a href="https://www.remove.bg/zh" target="_blank" title="HTML">https://www.remove.bg/zh</a>

<li><a href="https://snapedit.app/remove-bg" target="_blank" title="HTML">Snapedit</a>

</ol>

Edit

#ccs #HTML #blogger #免費網上工具 #免費線上工具 #Free online tools #解析度調整 #MyEdit #Resolution adjustment #圖片背景消除 #Picture background removal #GIMP Portable #cleverpdf 免費程式, 免費PDF在線工具 #DaVinci Resolve 免費中文影片製作軟體 #NewFileTime #DaVinci Resolve #免費中文影片製作軟體

special symbols

<div class="list" >
<ha>熱門符號</ha> 
<div class="list" data-cat="popular">ღ•⁂€™↑→↓⇝√∞░▲▶◀●☀☁☂☃☄★☆☉☐☑☚☛☜☝☞☟☠☢☣☪☮☯☸☹☺☻☼☽☾♔♕♖♗♘♚♛♜♝♞♟♡♨♩♪♫♬✈✉✎✓✔✘✚✞✟✠✡✦✧✩✪✮✯✹✿❀❁❂❄❅❆❝❞❣❤❥❦➤♔♕♖♗♘♙♚♛♜♝♞♟♩♪♫♬♭♮♯𝄞𝄡𝄢𝄪𝄫🎵🎶🎼𓏢

<ha>天氣符號</ha> 
ϟ☀☁☂☃⛆⛇⛈︎☄☉☼☽☾♁♨❄❅❆༄࿓𐓷𐓏

<ha>商業符號</ha> 
©®℗℠™℡℻℀℁℅℆

<ha>單色表情符號</ha>

☏✁✂✃✄✆✇✈✉✎✏✐✑✒𓍝⚐⚑⚖⚗⚿⛟⛨⛫⛾⛿⎈࿄𖠦𖠿ꗃ𓄲𓊔𖤘𖣘߷𖠚𖠜𖡡𖥣𖥔𖥠⌖⊹𓊝𖠎𖡌𖣳𖤠𖥈𖥩𖧶ꚰ⛀⛁⛂⛃⏎⇧⏏⌂⌘⎋⊞⌨↹⌥⌫⎗⎘⎙⎵⇥

☺︎☹︎☠︎❣︎❤︎☘︎⛸︎♠︎♥︎♦︎♣︎♟︎⛷︎⛰︎⛩︎♨︎⛴︎✈︎☀︎⏱︎⏲︎☁︎⛈︎☂︎⛱︎❄︎☃︎☄︎⛑︎☎︎⌨︎✏︎✒︎✉︎✂︎⛏︎⚒︎⚔︎⚙︎⚖︎⛓︎⚗︎⚰︎⚱︎⚠︎☢︎☣︎⬆︎↗︎➡︎↘︎⬇︎↙︎⬅︎↖︎↕︎↔︎↩︎↪︎⤴︎⤵︎⚛︎✡︎☸︎☯︎✝︎☦︎☪︎☮︎▶︎⏭︎⏯︎◀︎⏮︎⏸︎⏹︎⏺︎⏏︎♀︎♂︎⚧︎✖︎♾︎‼︎⁉︎⚕︎♻︎⚜︎☑︎✔︎〽︎✳︎✴︎❇︎©︎®︎™︎🅰︎🅱︎ℹ︎Ⓜ︎🅾︎🅿︎🈂︎🈷︎㊗︎㊙︎◼︎◻︎▪︎▫︎⛐⛍⛕⛖⛗⛘⛙⛜⛠⛚⛛⛞⛡♲♳♴♵♶♷♸♹♺♻♼♽⚬⚭⚮⚯⛻⛼⛬⛭⛮⛯☰≡Ξ㊂≣⁝⋮︙⦙⁞⋯…∷▲▼▶△▽▷⌃⌄︿﹀︽︾⌵𓏬𓃑𓏧⸬⛶

<ha>星座符號</ha> 
♓♒♑♐♏♎♍♌♋♊♉♈☉☽☿♀⊕♁♂♃♄♅⛢♆♇

<ha>打勾符號</ha> 
✓✔✖✗✘∛∜⍻☐☑☒□■○●༝྾∨🆅🆇🅥🅧⊗

<ha>撲克牌花色符號</ha> 
♡♢♤♧♣♦♥♠🂠🂡🂢🂣🂤🂥🂦🂧🂨🂩🂪🂫🂬🂭🂮🂱🂲🂳🂴🂵🂶🂷🂸🂹🂺🂻🂼🂽🂾🃁🃂🃃🃄🃅🃆🃇🃈🃉🃊🃋🃌🃍🃎🃑🃒🃓🃔🃕🃖🃗🃘🃙🃚🃛🃜🃝🃞🃟⚀⚁⚂⚃⚄⚅

<ha>宗教</ha> 
☤☥☪☫☬☮☭☯☸☽☾♰♱⚚✡卍﷽✵ૐ𓉴𓉸۞࿊۩࿅࿉࿈
✝✞✠☦✙✜✟✚☧☨☩✛

<ha>天空中的星星</ha> 
★☆✡✦✧⌑✩✪⍟❂✫✬✭✮✯✰☪⚝⛤⛥⛦⛧⍣⋆≛𓇼𓇻𓇽꙳⭑⭒𖤐𖣔⟡⟢⟣⊹*∗٭※⁂⁎⁑⁕⃰⊛☸❋✱✲✳✴✵✶✷✸✹✺𖡽𖥤𖥟𖡟𖤗✽⧆＊﹡＊†‡𒀭𒀯𒄬✻✼✾✿❀❁❃❇❈❉❊✢✣✤✥⚜ꕥ𓇬⚘𓆸𓆹𓆼𓇊𓇚𓇕𓇗𓋇𓁙𓁋֍֎𓆭𓆰𓆱𓇋𓇑𓇛𓇟𓇣𖧷ꕤ𑁍᪥𖠁𖠇𖤣𖤥𖡗𖢨𖣶𖦞𖧧༗𖣂𖠺𖠻𓄟𖢔𐌙𐊵𐡘𐡙𐡚꧁꧂𒂭
⊿▲△▴▵▶▷▸▹►▻▼▽▾▿◀◁◂◃◄◅◢◣◤◥◬◭◮◸◹◺◿∇∆𓇮⫷⫸

<ha>圓形符號</ha> 
⊖⊘⊙⊚⊛⊜⊝◉○◌◍◎●◐◑◒◓◔◕◖◗◦◯◴◵◶◷❍ₒ॰°৹๐º𐤏Ｏ⦿⊕⊗⨷⭕🅞Ⓞⓞ𖣠𖣐᪤𖥕𖥞𖦹𖥚𖤞𒊹

<ha>其他形狀</ha> 
⬟⬠⭓⭔☖☗◊⟠⧫⋄◆◇◈❖⬬⬭⬮⬯⎔⎚⌑▰▱⬢⬡⬣

</div>

toclipboard.addEventListener('click', totoclipboard)

function gets(e){
Twtxtin.value += e.target.innerHTML ; }

function totoclipboard(){
     Twtxtin.select() ;
     document.execCommand('copy') ; }

</script>

<div class="list" >
<ha>箭頭符號</ha> 
<div class="list" data-cat="arrow" style="">⬅⬆⬇⮕⬈⬉⬊⬋⬌⬍⭠⭡⭢⭣⭤⭥⮂⮃⮐⮑⬎⬏⬐⬑⬱⬳⬸⬿⭅⭆↕↖↗↘↙↚↛↜↝↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↶↷↸↹↺↻⟲⟳↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⌅⌆⌤⏎▶☇☈➔➘➙➚➛➜➝➞➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➱➲➳➴➵➶➷➸➹➺➻➼➽➾⤴⤵↵↓↔←→↑⍇⍈⍐⍗⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿⇐⇑⇒⇓⇔𖣫𖤂⬀⬁⬂⬃⬄
 
<ha>標點符號</ha> 
˙‥‧‵、。﹐﹒﹔﹕！＃＄％＆＊，．：；？＠～•…·.ᐟ¡¿¦¨¯´·¸º‽‼⁏※†‡ˉ˘⁇⁈⁉ˆ⁊⸘№
 
<ha>括號符號</ha> 
〈〉《》「」『』【】〔〕︵︶︷︸︹︺︻︼︽︾︿﹀﹁﹂﹃﹄﹙﹚﹛﹜﹝﹞﹤﹥（）＜＞｛｝❬❭❮❯❰❱〖〗〘〙〚〛⟨⟩‹›«»｢｣⌃⌄⌵⌢⌣⎴⏜⏝⏞⏟⏠⏡
 <ha>引號</ha> 
"'«»‘’‚‛“”„‟‹›❛❜❝❞〝〞〟〃＂＇′″‴⁗‵‶‷`ˊ
 
<ha>單位符號</ha> 
μ°℃℉㎍㎎㎏℥㏌㎚㎛㎜㎝㎞²³㎖㎗㎘㏄㏖㏒㎅㎆㎇㎈㎉㎐㎑㎒㎓㎾Ω㏑㏈㏐㏂㏘㎳㎭㏅㎪㏗′″

<ha>線段符號</ha> 
ˍ‐⎯‒―⎺⎻⎼⎽‗‖─━│┃┄┅┆┇┈┉┊┋╌╍╎╴╵╶╷╸╹╺╻╼╽╾╿▏▕╏–—⌌⌍⌎⌏⌜⌝⌞⌟┌┍┎┏┐┑┒┓└└┕┖┗┘┙┚┛├├┝┞┟┠┡┢┣┤┥┦┧┨┩┪┫┬┭┮┯┰┱┲┳┴┵┶┷┸┹┺┻┼┽┾┿╀╁╂╃╄╅╆╇╈╉╊╋═║╒╓╔╔╔╕╕╖╖╗╗╘╙╚╚╛╛╜╜╝╝╞╟╟╠╡╡╢╢╣╣╤╤╥╥╦╦╧╧╨╨╩╩╪╪╫╬╱╲╳╭╮╯╰◜◝◞◟◠◡⌈⌊⌉⌋⎡⎣⎤⎦⎧⎩⎫⎭⎸⎹⎾⎿⏉⏊⏋⏌≡≣☰☱☲☳☴☵☶☷

<ha>點字符號</ha> 
⣿⠿⠾⠽⠼⠻⠺⠹⠸⠷⠶⠵⠴⠳⠲⠱⠰⠯⠮⠭⠬⠫⠪⠩⠨⠧⠦⠥⠤⠣⠢⠡⠠⠟⠞⠝⠜⠛⠚⠙⠘⠗⠖⠕⠔⠓⠒⠑⠐⠏⠎⠍⠌⠋⠊⠉⠈⠇⠆⠅⠄⠃⠂⠁⠀

<ha>數學符號</ha> 
±∓×÷∶…≤≥≠√∛∜∑∏∞♾ℕℤℚℝℂαβγδεμφπσθ∈∉∅∫∬∭∮∯∂∆∇≈≅≡≟∝∠‘’∪∩∼∣≃≄≇°⋅⊗⊕⊙⟨⟩∨∧¬∴∵⇒⇔∀∃∄⊆⊇⊂⊃∖℘ρX̄↔→↦⇥⊥⊤⊧⊢¦!∎ℑℍ𝔸⊖⌈⌉″′↟[]□■⌃⋀⋁∁⇔⅋∦∧∨≦≧≪≫≬≭≰≱≲≳⊀⊁◅‰‱
<div class="list" data-cat="fraction" style="">½⅓⅔¼¾⅕⅖⅗⅘⅙⅚⅐⅛⅜⅝⅞⅑⅒↉⅟

<ha>下標和上標</ha> 
⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ₐₑₒₓₔ°ⁱ⁄²³ᴬᴮᴰᴱᴳᴴᴵᴶᴷᴸᴹᴺᴼᴾᴿᵀᵁⱽᵂᵃᵇᶜᵈᵉᶠᵍʰⁱʲᵏˡᵐⁿᵒᵖʳˢᵗᵘᵛʷˣʸᶻₐₑₕᵢⱼₖₗₘₙₒₚᵣₛₜᵤᵥₓᵋᵝᵞᵟᵠᵡᵦᵧᵨᵩᵪᶥᶿΠπ𝜫𝝅𝝥𝝿𝞟𝞹Пп∏ϖ∐ℼㄇ兀</div>

</div>

toclipboard.addEventListener('click', totoclipboard)

function gets(e){
Twtxtin.value += e.target.innerHTML ; }

function totoclipboard(){
     Twtxtin.select() ;
     document.execCommand('copy') ; }

</script>

<div class="list" >
<ha>貨幣符號</ha> 
$¢€£¥₩₽₹¤₱₦ƒ₮৲৳₨௹฿៛₪₫₭₲₴₵﷼≋₿ŁÐ₳

<ha>字母字型</ha> 
ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ
 
🅐🅑🅒🅓🅔🅕🅖🅗🅘🅙🅚🅛🅜🅝🅞🅟🅠🅡🅢🅣🅤🅥🅦🅧🅨🅩

ᴀʙᴄᴅᴇғɢʜɪᴊᴋʟᴍɴᴏᴘǫʀsᴛᴜᴠᴡxʏᴢ
 
𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃𝒜ℬ𝒞𝒟ℰℱ𝒢ℋℐ𝒥𝒦ℒℳ𝒩𝒪𝒫𝒬ℛ𝒮𝒯𝒰𝒱𝒲𝒳𝒴𝒵𝒶𝒷𝒸𝒹𝑒𝒻𝑔𝒽𝒾𝒿𝓀𝓁𝓂𝓃𝑜𝓅𝓆𝓇𝓈𝓉𝓊𝓋𝓌𝓍𝓎𝓏
 
𝔸𝔹ℂ𝔻𝔼𝔽𝔾ℍ𝕀𝕁𝕂𝕃𝕄ℕ𝕆ℙℚℝ𝕊𝕋𝕌𝕍𝕎𝕏𝕐ℤ
 
𝕒𝕓𝕔𝕕𝕖𝕗𝕘𝕙𝕚𝕛𝕜𝕝𝕞𝕟𝕠𝕡𝕢𝕣𝕤𝕥𝕦𝕧𝕨𝕩𝕪𝕫
 
🄰🄱🄲🄳🄴🄵🄶🄷🄸🄹🄺🄻🄼🄽🄾🄿🅀🅁🅂🅃🅄🅅🅆🅇🅈🅉
 
🅰🅱🅲🅳🅴🅵🅶🅷🅸🅹🅺🅻🅼🅽🅾🅿🆀🆁🆂🆃🆄🆅🆆🆇🆈🆉
 
𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅
 
𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟
 
𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ
 
𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷 
𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙
 
𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳
 
𝘈𝘉𝘊𝘋𝘌𝘍𝘎𝘏𝘐𝘑𝘒𝘓𝘔𝘕𝘖𝘗𝘘𝘙𝘚𝘛𝘜𝘝𝘞𝘟𝘠𝘡
 
𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻
 
𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕
 
𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯 
</div>

toclipboard.addEventListener('click', totoclipboard)

function gets(e){
Twtxtin.value += e.target.innerHTML ; }

function totoclipboard(){
     Twtxtin.select() ;
     document.execCommand('copy') ; }

</script>

toclipboard.addEventListener('click', totoclipboard)

function gets(e){
Twtxtin.value += e.target.innerHTML ; }

function totoclipboard(){
     Twtxtin.select() ;
     document.execCommand('copy') ; }

</script>

Edit

#ccs #HTML #blogger #special symbols #特殊符號

document body appendChild

<h3>onclick copy to clipboard</h3>
<div id="Mid">
<input class="Input" value="width" > 
<input class="Input" value="height" > 
<input class="Input" value="length" > 
<input class="Input" value="nobn" > 
<input class="Input" value="span" >

</div>
 
<div id="ok">copy to clipboard </div>

<pre> 執行 document.execCommand('copy') 就可以將當前<r>選取範圍</r>複製到剪貼簿。

<ol><li><<?>div id="Mid">
<li><<?>input class="Input" value="width" > 
<li><<?>input class="Input" value="height" > 
<li><<?>input class="Input" value="select" > 
<li><<?>input class="Input" value="center" > 
<li><<?>input class="Input" value="button" > 
<li><<?>input class="Input" value="children" > 
<li><<?>input class="Input" value="length" > 
<li><<?>input class="Input" value="alert()" > 
<li><<?>input class="Input" value="nobn" > 
<li><<?>/div>
<li><<?>br>
<li><<?>div id="ok">copy to clipboard <<?>/div>

<li><<?>script>
<li> var Input=document.getElementsByClassName("Input");
<li> for(x=0 ; x < Input.length ;x++){ 
<li> Input[x].style.width=((Input[x].value.length+1)*8)+'px';
<li> Input[x].title=Input[x].value+" onclick copy to clipboard";
<li> Input[x].readOnly = true;}
 
<li> Mid.addEventListener('click', function(e){ 
<li> e.target.select() ;
<li> document.execCommand('copy') ;

<li> navigator.clipboard.readText().then(function(text){
<li> ok.innerHTML=text+" copy to clipboard "; });
<li> })
<li> <<?>/script>
</ol></pre>

Input { cursor:pointer;
        background-color:inherit;
        font-size: 18px ; 
        border: none}

#DP { width: 250px;
      margin: auto;
      border: 3px solid #73AD21;}

#ok { width:500px;
 margin: auto;
 text-align: center; }
r {color:red}
pre ,div ,ol { font-size: 20px ;}
 h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; }
</style>

<h3>navigator.clipboard.writeText(copyText) 
navigator.clipboard.readText()</h3>

<input type="text" id="inTxT" value="123456" />
<button onclick="COPY()" >COPY to clipboard </button>
<div id="DP">剪貼簿中的文本內容</div>

navigator.clipboard.readText().then(text => {
 DP.innerHTML ="剪貼簿中的文本內容 = " + text })
}
</script>

<pre> 
 navigator.clipboard.writeText("copyText")
 將文字 copyText 複製到剪貼簿。

navigator.clipboard.readText().then(text => {
    DP.innerHTML ="剪貼簿中的文本內容 = " + text   })

<ol><li><<?>input type="text" id="inTxT" value="123456" />
<li><<?>button onclick="COPY()" >COPY to clipboard <<?>/button>
<li><<?>div id="DP">剪貼簿中的文本內容<<?>/div>
<li>
<li><<?>script>
<li>function COPY(){
<li> navigator.clipboard.writeText(inTxT.value);
<li>
<li> navigator.clipboard.readText().then(text => {
<li> DP.innerHTML ="剪貼簿中的文本內容 = " + text })
<li>}
<li><<?>/script>
</pre>

pre , input , button {font-size: 20px;}
 h3 { text-align: center;
 font-size: 30px;
 font-weight: bold;
 text-shadow: 10px 6px 10px grey;
 color: blue; }
</style>

Edit

#ccs #HTML #blogger #document body appendChild #document.execCommand('copy') #onclick copy to clipboard #appendChild #copy #addEventListener

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

flex direction

css display table

Font style

Free online tools

special symbols

document body appendChild

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

flex direction

css display table

Font style

Free online tools

special symbols

document body appendChild

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單