✍ 📁 🙈 🙉 🙊

2022年4月4日星期一

align-content

<pre> <t1>CCS align-content 屬性介紹</t1>
      不對齊彈性項目，而是對齊彈性線 （垂直）。
 屬性 : center              置中對齊
       flex-start          靠上對齊
       flex-end            靠下對齊
       space-between       均勻上下分布 
       space-around        均勻分散上下對齊( 上下邊 間距一半）
       space-evenly        均勻分散上下對齊
       start               靠上對齊
       end                 靠下對齊
       baseline            對齊 flex 基準線
       first baseline;
       last baseline
       stretch           撐滿對齊     
       initial           繼承 
       inherit           最初的
       normal            設置對齊
      safe center        安全的 置中對齊
      unsafe center      不安全 置中對齊

<t1> CCS flex-wrap 屬性介紹</t1>
 flex-wrap 屬性規定flex容器是單行或者多行，
 同時橫軸的方向決定了新行堆疊的方向。
 屬性 : nowrap	      默認值。規定靈活的項目不拆行或不拆列。
        wrap	      規定靈活的項目在必要的時候拆行或拆列。
        wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
        initial      設置該屬性為它的默認值。請參閱 initial 。
        inherit      從父元素繼承該屬性。請參閱 inherit 。
</pre>
<style>
pre {font-size: 18px ;}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</style>

<style>

img  {width:auto; 
      border: 5px solid snow;  
      margin:5px;    }

#sel , #sel select  {font-size: 20px ;}
  
#main { display:flex;
        width: 100% ;
        height: 500px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: wrap;
        align-content: center ;
        border:1px solid black; }

}
</style>
<div id="sel">
flex-wrap :
<select onchange="main.style.flexWrap= this.value">
    <option value="wrap"     > wrap</option>
    <option value="nowrap" >nowrap</option>
    <option value="wrap-reverse"   > wrap-reverse</option>
    <option value="initial"       >  initial</option>
    <option value="inherit" >inherit</option>
</select>
<br>
	
align-content :
<select onchange="main.style.alignContent= this.value">

<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></option>
    <option value="start"    >  start    </option>
    <option value=" end"       >  end       </option>

<option value="baseline"       >  baseline</option>
    <option value="first baseline" >first baseline</option>
    <option value="last baseline"   > last baseline</option>

<option value="stretch"   > stretch</option>
    <option value="initial"   > initial </option>
    <option value="inherit"   > inherit</option>
    <option value="normal"   > normal</option>
    <option value="safe center"   > safe center</option>
    <option value="unsafe center"   > unsafe center</option>

</select> </div><br>

</div>

Edit

#html #style #script #javascript #CSS #auto #stretch #align-self #center #initial #inherit #flex-start #flex-end #baseline #css 位置 #css center #flex-wrap () #擠壓對齊掛列 img

2022年4月2日星期六

flex-wrap 屬性介紹

Edit

#flex-wrap #flex-wrap () #擠壓對齊掛列 img #擠壓對齊掛列 div #script javascript #javascript #wrap #wrap-reverse #nowrap #html #img

2022年3月31日星期四

CSS display 屬性

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值compact，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
marker	CSS 中有值marker，不過由於缺乏廣泛支持，已經從CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示（類似<table>），表格前後帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似<table>），表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似<tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似<thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似<tfoot>）。
table-row	此元素會作為一個表格行顯示（類似<tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似<colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似<col>）
table-cell	此元素會作為一個表格單元格顯示（類似<td> 和<th>）
table-caption	此元素會作為一個表格標題顯示（類似<caption>）
inherit	規定應該從父元素繼承display 屬性的值。

Edit

2022年3月30日星期三

iframe youtube 常用屬性 Commonly used Attributes

   youtube 重複播放 [autoplay + loop + playlist Attributes]
   自動播放 autoplay=1 
   重複播放 loop=1
   播放列表 playlist=影片ID 
   本片ID   i1_02Myn3Pg
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&loop=1&playlist=i1_02Myn3Pg

   youtube 不顯影片完結推廣 [rel=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0

   youtube 不顯示播放器控制選項 [controls=0 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&controls=0

   youtube  靜音 [mute=1 Attributes]
   不顯影片完結推廣 rel=0  
   https://www.youtube.com/embed/i1_02Myn3Pg?autoplay=1&rel=0&mute=1

前往 YouTube 嵌入式播放器及播放器参数網頁

Edit

#youtube #iframe youtube #youtube 常用屬性 #youtube Attributes #youtube 自動播放 #youtube 播放列表 #youtube 重複播放 #youtube autoplay #youtube loop #youtube autoplay #youtube rel

iframe 標籤的屬性 attributes

< iframe > 標籤的屬性 attributes

属性	描述
src	指定要被嵌入的網頁的網址 (URL)
height	指定 iframe 的高度，單位為像素 (pixel / %)
width	指定 iframe 的寬度，單位為像素 (pixel / %)
name	指定 iframe 的名稱 Name是可以重複的
id	指定 iframe 的身份證號碼 ID顯然是唯一的
frameborder	frameborder= 1 / 0 ，規定是否顯示框架周圍的邊框
longdesc	規定一個頁面，該頁面包含了有關 iframe 的較長描述
marginheight	定義 iframe 的頂部和底部的邊距
marginwidth	定義 iframe 的左側和右側的邊距
sandbox	該屬性對呈現在iframe框架中的內容啟用一些額外的限制條件 sandbox="" 啟用所有限制條件 sandbox="allow-same-origin" 允許將內容作為普通來源對待。如果未使用該關鍵字，嵌入的內容將被視為一個獨立的源 sandbox="allow-top-navigation" 嵌入的頁面的上下文可以導航（加載）內容到頂級的瀏覽上下文環境（browsing context）。如果未使用該關鍵字，這個操作將不可用 sandbox="allow-forms" 允許表單提交。 sandbox="allow-scripts" 允許腳本執行。
scrolling	規定是否在 iframe 中顯示滾動條 scrolling = "yes" scrolling = "no" scrolling = "auto"
seamless	規定 <iframe> 看上去像是包含文檔的一部分
srcdoc	規定在 <iframe> 中顯示的頁面的 HTML 內容
allow-forms	允許提交表單
allow-modals	允許打開 modal 視窗
allow-orientation-lock	允許鎖定螢幕方向，像是智慧型手機的水平朝向或垂直朝向
allow-pointer-lock	允許使用 Pointer Lock API
allow-popups	允許彈跳視窗，像是可以用 target="_blank"
allow-popups-to-escape-sandbox	允許彈跳視窗不繼承 sandbox 的設定
allow-presentation	允許開啟 presentation session
allow-same-origin	允許將 iframe 的內容視作 same origin
allow-scripts	允許 iframe 內容可以執行 JavaScript
allow-top-navigation	允許 iframe 可以將內容載入到 top level 的父層視窗，像是可以用 target="_top"
allow-top-navigation-by-user-activation	允許 iframe 可以將內容載入到 top level 的父層視窗，如果是使用者手動去點擊的話 sandbox: 當有這屬性時，表示針對 iframe 裡面的網頁啟用一些限制條件，屬性值如果留空表示啟用所有限制，當有設定值的時候表示移除這些限制，你可以用空格設定移除多個限制條件。可以用的值有

Edit

#iframe #iframe 標籤的屬性 #iframe 標籤的屬性 attributes #iframe attributes #iframe height #iframe width #iframe src #iframe name #iframe id #iframe frameborder #iframe longdesc #iframe marginheight #iframe marginwidth #iframe sandbox #iframe scrolling #iframe seamless #iframe srcdoc #iframe allow-forms #iframe allow-modals #iframe sallow-orientation-lock #iframe allow-pointer-lock #iframe allow-popups #iframe allow-popups-to-escape-sandbox #iframe allow-presentation #iframe allow-presentation #iframe allow-scripts #iframe allow-top-navigation #iframe allow-top-navigation-by-user-activation

iframe innerHTML 框架內容窗口文檔寫入

   HTML 內聯框架元素 < iframe > 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
       <iframe id="iframe"  ></iframe> 
       iframe = document.getElementById('iframe')
       ifdoc =iframe.contentWindow.document.body 
       ifdoc =iff.contentWindow.document.body 
       ifdoc.innerHTML = '  html 內容  '

var ifdoc =iff.contentWindow.document.body ;
ifdoc.innerHTML ='<body>' ;
ifdoc.innerHTML+='<font size="6" color="blue"><b>this iframe id is iframe ';
ifdoc.innerHTML+='<p id="Pid">PPP</p>';
ifdoc.innerHTML+='<div id="DIV1" >div1</div>' ;
ifdoc.innerHTML+='<div id="DIV2" >div2</div>' ;
ifdoc.innerHTML+='<a   id="aid" >aaa</a>' ;
ifdoc.innerHTML+='</body>' ;
            //or
//var ifdoc = document.getElementById('iframe').contentWindow.document;
//ifdoc.open();
//ifdoc.write('<p id="Pid">PPP</p>');
//ifdoc.write('<body>');
//ifdoc.write('<div id="DIV1" >div1</div>');
//ifdoc.write('<div id="DIV2" >div2</div>');
//ifdoc.write('<a id="aid" >aaa</a>');
//ifdoc.write('</body>');
//ifdoc.close();
</script>

outT =  "<font size='6' color='blue'>" ;
outT += "<B>var iff = document.getElementById('iframe')</B>" ;
outT +=  "<br><font size='5' color='black'>" ;
outT += "<br>iff = " + iff   ;
outT += "<br>iff.nodeName = "+iff.nodeName   ;
outT += "<br>iff.children.length  = " + iff.children.length  ;

outT += "<br>iff.contentWindow.document = " + iff.contentWindow.document  ;
outT += "<br> iff.contentWindow.document.body  = " + 
                  iff.contentWindow.document.body ;
outT += "<br> iff.contentWindow.document.body.innerText  = " + 
                  iff.contentWindow.document.body.innerText;

outT += "<br> iff.contentWindow.document.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

outT += "<div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].nodeName  = " + 
                  iff.contentWindow.document.body.children[0].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[1].nodeName  = " + 
                  iff.contentWindow.document.body.children[1].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[2].nodeName  = " + 
                  iff.contentWindow.document.body.children[2].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[3].nodeName  = " + 
                  iff.contentWindow.document.body.children[3].nodeName  ;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].id= " + 
                  iff.contentWindow.document.body.children[0].id;
outT += "<br> iff.contentWindow.document.body.children[1].id= " + 
                  iff.contentWindow.document.body.children[1].id;
outT += "<br> iff.contentWindow.document.body.children[2].id= " + 
                  iff.contentWindow.document.body.children[2].id;outT += "<br> iff.contentWindow.document.body.children[3].id= " + 
                  iff.contentWindow.document.body.children[3].id;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.innerHTML = " + 
                  iff.contentWindow.document.body.innerHTML ;
outT += "</div>" ;

DP.innerHTML  = outT ;
</script>

Edit

#iframe #內聯框架元素 #document #contentWindow #iframe.contentWindow.document #innerHTML #iframe.contentWindow.document.body

iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()

   HTML 內聯框架元素 <iframe> 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
   使用document.write()建立的iframe文件，
      <iframe id="iframe"  ></iframe> 
      var ifdoc = document.getElementById('iframe').contentWindow.document，
      ifdoc.open()
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.close()

outT =  "<font size='6' color='blue'>" ;
outT += "  < script > <br>" ;
outT += "<B>var iff = document.getElementById('iframe')</B>" ;
outT +=  "<br><font size='5' color='black'>" ;
outT += "<br>iff = " + iff   ;
outT += "<br>iff.nodeName = "+iff.nodeName   ;
outT += "<br>iff.children.length  = " + iff.children.length  ;

outT += "<br> iff.contentWindow.document.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.innerHTML = " + 
                  iff.contentWindow.document.body.innerHTML ;
outT += "</div>" ;

DP.innerHTML  = outT ;
</script>

Edit

#iframe #內聯框架元素 #document #contentWindow #iframe.contentWindow.document #script open() #script write() #script close()

2021年8月13日星期五

CSS animation 動畫屬性

<div style="font-size:22px;">
<pre>
CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性，
     用來控制動畫的移動方式、顏色變化、移動方向、顏色變化 ... 等效果。
    
animation:name duration function delay count direction mode state
@keyframes 動畫名稱{  10%{..動作..}
                     50%{..動作..} 
                    100%{..動作..} }
</pre>

<table border="1" style="font-size:22px;">
<thead>
<tr>
<th>屬性</th>
<th>說明</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>animation-name</strong></td>
<td>動畫名稱</td>
</tr>
<tr>
<td><strong>animation-duration</strong></td>
<td>動畫持續時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-delay</strong></td>
<td>動畫延遲播放時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-iteration-count</strong></td>
<td>動畫播放次數，<em>預設 1</em>。<br>其他還有 infinite。</td>
</tr>
<tr>
<td><strong>animation-timing-function</strong></td>
<td>動畫加速度函式，<em>預設 ease</em>。<br>其他還有： linear、ease-in、ease-out、ease-in-out<br>step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。</td>
</tr>
<tr>
<td><strong>animation-direction</strong></td>
<td>動畫播放方向，<em>預設 normal</em>。<br>其他還有 reverse、alternate、alternate-reverse。</td>
</tr>
<tr>
<td><strong>animation-fill-mode</strong></td>
<td>動畫播放前後模式，<em>預設 none</em>。<br>其他還有 forwards、backwards、both。</td>
</tr>
<tr>
<td><strong>animation-play-state</strong></td>
<td>動畫播放或暫停狀態，<em>預設 running</em>。<br>其他還有 paused。</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="color: blue;"><span style="font-size: x-large;">關鍵影格 keyframes</span></span> 的設定可以說是 CSS3 animation 動畫效果的關鍵，要動畫就跑起來，雖要設定關鍵影格，要設定關鍵影格有兩個重點，分別是（from）從哪邊開始跑以及（to）跑到哪裡結束，關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點，0% 代表的是動畫起點，100% 則代表動畫結束點，如 10% 20% ....90% 100% 用 from 與 to 來設定，這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀，也就是說，除了可以利用關鍵影格來控制 animation 動畫的跑動，也可以控制動畫的顏色,大小 改變。 
</div>

https://www.oxxostudio.tw/articles/201803/css-animation.html

@keyframes MO1{
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:87%; top:0px;}
  50%  {background-color:blue; left:87%; top:75%;}
  75%  {background-color:green; left:0px; top:75%;}
  100% {background-color:red; left:0px; top:0px;}  }

#D2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO2 4s infinite ; }

@keyframes MO2{
  0%   {background-color:yellow; left:87%; top:-100px;}
  25%  {background-color:blue; left:0px; top:50%;}
  50%  {background-color:red; left:0%; top:-100px;}
  75%  {background-color:gold; left:87%; top:50%;}
  100% {background-color:olive; left:87%; top:-100px;} }
</style>

<div id="D1" style="font-size:30px;">id=D1</div>
<div id="D2" style="font-size:30px;">id=D2</div>
<pre style="color:#a52a2a;margin-top:-200px;font-size:22px;">
#D1{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO1 4s infinite ;
}

#D2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO2 4s infinite ; }

<div class="bomb">按我</div>
<pre style="font-size:20px;">.bomb{ width:100px;
       text-align: center;
       background-color:#CCCCCC;
       border: 5px outset darkgray;
       border-radius: 15px; 
       cursor:pointer}
.bomb:active { border: 5px inset darkgray;  }
.bomb:after  { content: ">";
               animation: Rafter 1s linear infinite ;}
.bomb:before { content: "<";
               animation: Lbefore 1s linear infinite ;}
 
@keyframes Rafter{ 10% { content: ">>";  }
                   50% { content: ">>>"; }
                   90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  } </pre>

.bomb:active{ border: 5px inset darkgray;  }

.bomb:after { content: ">";
               animation: Rafter 1s linear infinite ;}
.bomb:before  { content: "<";
                 animation: Lbefore 1s linear infinite ;}

@keyframes Rafter{   10% { content: ">>";  }
                     50% { content: ">>>"; }
                     90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  }

</style>

Edit

2021年8月11日星期三

CSS font 字形字串字樣文字

CSS font text 字體文本

font CSS // 字體 CSS

font-size: 20px ;

color : black ;

font-weight : normal ;

font-style: normal ;

font-family: serif ;

text-transform: initial ;

text-decoration : inherit ;

line-height: normal;

word-spacing: normal;

letter-spacing:normal;

font style // 字體樣式

object.style.fontSize = "20px";

object.style.color = "black";

object.style.fontWeight = "normal";

object.style.fontStyle = "normal";

object.style.fontFamily = "serif";

object.style.textTransform = "initial";

object.style.textDecoration = "inherit";

object.style.lineHeight = "normal";

object.style.wordSpacing = "normal";

object.style.letterSpacing = "normal";

Edit

#html #script #CSS font 字形字串字樣文字 #CSS font text 字體文本 #fontSize #color #fontStyle #fontFamily #textTransform #textDecoration #lineHeight #wordSpacing #font-size #font-weight #font-style #font-family #text-transform #text-decoration #word-spacing #capitalize #lowercase #overline #underline #line-through

2021年8月8日星期日

display: grid

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item1 {
  grid-column-start: 1;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 1;     /*行起始位置 row start position */
  grid-row-end: 3;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div class="item1">item 1<br>200+250x X 80+80</div>
  <div class="item2">item 2<br>350 X 80</div>
  <div class="item3">item 3<br>350 X 80</div>  
  <div class="item4">item 4<br>200 X =100</div>
  <div class="item5">item 5<br>250 X 100</div>
  <div class="item6">item 6<br>350 X 100</div>
  <div class="item7">item 7<br>200 X 150</div>
  <div class="item8">item 8<br>250 X 150</div>
  <div class="item9">item 9<br>350 X 150</div>
  </div> 
<pre style="font-size: 22px;">.grid-container {
grid-template-columns: 200px 250px 300px;       // 3 列寬度 
grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 }

.item1{
grid-column-start: 1;  //列起始位置 column start position
grid-column-end: 3;    //列終結位置 column end position
grid-row-start: 1;     //行起始位置 row start position
grid-row-end: 3;       //行終結位置 row end position }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item5 {
  grid-column-start: 2;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 2;     /*行起始位置 row start position */
  grid-row-end: 4;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div class="item1">item 1<br>200 X 80</div>
  <div class="item2">item 2<br>250 X 80</div>
  <div class="item3">item 3<br>300 X 80</div>  
  <div class="item4">item 4<br>200 X 80</div>
  <div class="item5">item 5<br>250 X 80+100</div>
  <div class="item6">item 6<br>300 X 80</div>
  <div class="item7">item 7<br>200 X 100</div>
  <div class="item8">item 8<br>300 X 100</div>
  <div class="item9">item 9<br>200 X 150</div>
  <div class="item8">item 10<br>250 X 150</div>
  <div class="item9">item 11<br>300 X 150</div>
  </div>
<pre style="font-size: 22px;">.grid-container {
grid-template-columns: 200px 250px 300px;       // 3 列寬度  
grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.item5f {
  grid-column-start: 2;  /*列起始位置 column start position */
  grid-column-end: 3;    /*列終結位置 column end position */
  grid-row-start: 2;     /*行起始位置 row start position */
  grid-row-end: 4;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>  
  <div>column 1fr <br> row 2fr</div>
  <div>column 2fr <br> row 2fr</div>
  <div>column 1fr <br> row 2fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 2fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
   </div>
<pre style="font-size: 22px;">
fr 代表格線內容器，可用空間的分塊, 1fr 1格..2fr 2格.....
grid-template-columns: 1fr 2fr 1fr; 
grid-template-rows:  1fr 2fr 1.5fr  </pre>

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;font-size: 24px;
   }

.txt {
  grid-column-start: 1;  /*列起始位置 column start position */
  grid-column-end: 7;    /*列終結位置 column end position */
  grid-row-start: 5;     /*行起始位置 row start position */
  grid-row-end: 5;       /*行終結位置 row end position */
}
</style>

<div class="grid-container">
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>  
  <div>column 1fr <br> row 2fr</div>
  <div>column 2fr <br> row 2fr</div>
  <div>column 1fr <br> row 2fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 2fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1.5fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div>column 1fr <br> row 1fr</div>
  <div>column 2fr <br> row 1fr</div>
  <div>column 1fr <br> row 1fr</div>
<div class="txt">   
<pre style="font-size: 22px;">
grid-template-columns: repeat(3, 1fr 1.5fr) ; 
  grid-template-rows: repeat(3, 1fr 1.5fr); </pre>
</div>

</div>

Edit

2021年8月3日星期二

Javascript 字串或文章編碼加密 String or article encoding and encryption 1

Javascript 字串或文章編碼加密
String or article encoding and encryption 1

<div style="font-size: 20px ;" >
  
<ol>
<li>function Aencode(str,key) {   //加密
<li>str=btoa(escape(str)) ;
<li>var l="" ;
<li>for(var c=0;c<key.length;c++) { 
                   l+=key.charCodeAt(c).toString() }
<li>var g=Math.floor(l.length/5);
<li>var b=parseInt(l.charAt(g)+l.charAt(g*2) + 
               l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5));
<li>var a=Math.ceil(key.length/2);var h=Math.pow(2,31)-1;
<li>var d=Math.round(Math.random()*1000000000)%100000000;
<li>    l+=d;
<li>while(l.length>10){ l=(parseInt(l.substring(0,10)) +
         parseInt(l.substring(10,l.length))).toString() }
<li>l=(b*l+a)%h;
<li>var e="";
<li>var k="";
<li>for(c=0;c<str.length;c++){ 
           e=parseInt(str.charCodeAt(c)^Math.floor((l/h)*255));
             if(e<16) { k+="0"+e.toString(16) }
                 else { k+=e.toString(16) }
       l=(b*l+a)%h }
<li>d=d.toString(16);
<li>while(d.length<8) { d="0" + d } ;
<li>k+=d;
<li>Astr.value = k;
<li> }

<br>
<br>
    
  
<li>function Adecode(Str,key){     // 解密
<li>var l="";
<li>for(var c=0;c<key.length;c++){
                 l+=key.charCodeAt(c).toString() } ;
<li>var g=Math.floor(l.length/5);
<li>var b= parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3) + 
                l.charAt(g*4)+l.charAt(g*5));
<li>var a=Math.round(key.length/2);
<li>var h=Math.pow(2,31)-1;
<li>var d=parseInt(encodeStr.substring(encodeStr.length - 8 , 
               encodeStr.length),16);
<li>encodeStr=encodeStr.substring(0,encodeStr.length-8);
<li>l+=d;
<li>while(l.length>10){l=(parseInt(l.substring(0,10)) +
           parseInt(l.substring(10,l.length))).toString()};
<li>l=(b*l+a)%h;
<li>var e="";
<li>var k="";

<li>for(c=0;c<encodeStr.length;c+=2){ 
     e=parseInt(parseInt(encodeStr.substring(c,c+2),16) ^ 
     Math.floor((l/h)*255)); k+=String.fromCharCode(e);l=(b*l+a)%h }

<li>if(encodeURIComponent(k).charAt(0)=="%" || 
       encodeURIComponent(k).charAt(1)=="%" || 
       encodeURIComponent(k).charAt(2)=="%" )
       { alert("密碼錯誤 \n wrong password") }

<li>Astr.value =unescape(atob(k)) ;
<li> }

</ol>
  
</div>

<br>
<br>
<input type='type'  id='DP139' value='加密內容'  >
<br>
<br>
<pre id="DIV">function Aencode(str,key) 功能 傳回 字串/文章 編碼加密，
                  str = 需要 編碼加密 字串/文章，
                  key = 密碼。
                  
function Adecode(str,key) 功能 傳回 將加密編碼還原為 字串/文章，
                  str = 加密後編碼，
                  key = 密碼。
                  
例 : Aencode("銀行","123456") 
     傳回 "ad9ff3c40c7372664ff58ce086420010015de271"

例 : Adecode("ad9ff3c40c....086420010015de271","123456")
     傳回 "銀行"  
</pre>

var textarea =document.createElement('textarea') ;
    textarea.innerHTML = DIV.innerHTML ;
    textarea.id="TT139" ;
    DIV.parentNode.replaceChild(textarea, DIV) ;

function Adecode(encodeStr,key){ 
var l="";
for(var c=0;c<key.length;c++){l+=key.charCodeAt(c).toString() } ;
var g=Math.floor(l.length/5);
var b= parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5));
var a=Math.round(key.length/2);
var h=Math.pow(2,31)-1;
var d=parseInt(encodeStr.substring(encodeStr.length-8,encodeStr.length),16);encodeStr=encodeStr.substring(0,encodeStr.length-8);
l+=d;
while(l.length>10){l=(parseInt(l.substring(0,10))+parseInt(l.substring(10,l.length))).toString()};
l=(b*l+a)%h;
var e="";
var k="";

for(c=0;c<encodeStr.length;c+=2){ 
e=parseInt(parseInt(encodeStr.substring(c,c+2),16)^Math.floor((l/h)*255)); k+=String.fromCharCode(e);l=(b*l+a)%h}

if(encodeURIComponent(k).charAt(0)=="%" || 
   encodeURIComponent(k).charAt(1)=="%" || 
   encodeURIComponent(k).charAt(2)=="%" )
       {alert("密碼錯誤 \n wrong password")}

return unescape(atob(k)) ;
}  
</script>

Edit

#html #html #script #字串加密 #字串解密 #decode #encode #密碼 password #密碼錯誤 #字串加密編碼 String encryption #加密後字串解碼 String decoding after encryption

2021年8月2日星期一

Javascript 字串或文章編碼加密 String or article encoding and encryption 2

Javascript 字串或文章編碼加密
String or article encoding and encryption 2

<input type='type' id='PWNO139' value='1234' > <input type='button' id='Button139' value='加密' onclick='Cha()' > <br> <br> <input type='type' id='DP139' value='加密內容' > <br> <br> <pre id="DIV"> <script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js'></script> 第三方提供 function。 CryptoJS.AES.encrypt(str,key).toString() 功能字串/文章編碼加密，傳回原始字串進行編碼加密， str = 需要編碼加密字串/文章， key = 密碼。 CryptoJS.AES.decrypt(str,key).toString(CryptoJS.enc.Utf8) 功能將加密編碼還原為字串/文章，傳回加密編碼還原為字串/文章， str = 加密後編碼， key = 密碼。 " </pre> <script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js'></script> <script> var textarea =document.createElement('textarea') ; textarea.innerHTML = DIV.innerHTML ; textarea.id="TT139" ; DIV.parentNode.replaceChild(textarea, DIV) ; function Cha(){ //alert( DP139.value) ; if(Button139.value == '加密'){ DP139.value = CryptoJS.AES.encrypt(DP139.value, PWNO139.value).toString() ; TT139.value = CryptoJS.AES.encrypt(TT139.value, PWNO139.value).toString() ; Button139.value='解碼' ;return } if(Button139.value == '解碼'){ DP139.value = CryptoJS.AES.decrypt(DP139.value, PWNO139.value). toString(CryptoJS.enc.Utf8) ; TT139.value = CryptoJS.AES.decrypt(TT139.value, PWNO139.value). toString(CryptoJS.enc.Utf8) ; Button139.value='加密' ;return } } </script> <style> #TT139 {width: 95%; height: 500px; font-size: 18px ;} #PWNO139{font-size: 20px ;} #Button139{font-size: 20px ;} #DP139{font-size: 20px ;} </style>
00

Edit
#html #html #script #字串加密 #字串解密 #decode #encode #密碼 password #密碼錯誤 #字串加密編碼 String encryption #加密後字串解碼 String decoding after encryption

訂閱：文章 (Atom)

2022年4月4日 星期一

2022年4月2日 星期六

2022年3月31日 星期四

CSS display 屬性

2022年3月30日 星期三

iframe youtube 常用屬性 Commonly used Attributes

< iframe > 標籤的屬性 attributes

iframe innerHTML 框架 內容窗口 文檔 寫入

框架 內容窗口 文檔 寫入 iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

2021年8月13日 星期五

CSS animation 動畫屬性

2021年8月11日 星期三

CSS font text 字體文本

2021年8月8日 星期日

display: grid 網格顯示 grid-template-columns 網格模板列 grid-template-rows 網格模板行

2021年8月3日 星期二

Javascript 字串 或 文章 編碼加密 String or article encoding and encryption 1

2021年8月2日 星期一

2022年4月4日星期一

2022年4月2日星期六

2022年3月31日星期四

2022年3月30日星期三

iframe innerHTML 框架內容窗口文檔寫入

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()

2021年8月13日星期五

2021年8月11日星期三

2021年8月8日星期日

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

2021年8月3日星期二

Javascript 字串或文章編碼加密
String or article encoding and encryption 1

2021年8月2日星期一