✍ 📁 🙈 🙉 🙊 : 4月 2024

2024年4月29日星期一

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

2024年4月25日星期四

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

2024年4月21日星期日

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 #免費中文影片製作軟體

2024年4月19日星期五

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 #特殊符號

2024年4月16日星期二

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)

2024年4月29日 星期一

2024年4月25日 星期四

2024年4月21日 星期日

2024年4月19日 星期五

2024年4月16日 星期二

2024年4月29日星期一

2024年4月25日星期四

2024年4月21日星期日

2024年4月19日星期五

2024年4月16日星期二