✍ 📁 🙈 🙉 🙊 : 3月 2024

2024年3月28日星期四

Google Apps Script 1

set Google SpreadSheet content
設定 Google 試算表內容

<ol>
<li><<?>button onclick="clearALL()" ><r>清空 Google 試算表內容 
     </r><<?>/button>

<li><<?>button onclick="addALL()"   ><r>加入 Google 試算表內容 
    </r><<?>/button>

<li><<?>button onclick="addRow()"  ><r>第二行插入新二行</r><<?>/button>
<li><<?>button onclick="delRow()"  ><r>刪除第二及三行</r>  <<?>/button>

<li><<?>button onclick="addCol()"  ><r>第二欄 插入欄位</r> <<?>/button>
<li><<?>button onclick="delCol()"  ><r>刪除第二欄</r>     <<?>/button>
</ol>
<marquee id="mm" width="100%"scrollamount="20">
    ...upload...download...</marquee>

<button class="BB" onclick="clearALL()" >清空 Google 試算表內容</button>
<button class="BB" onclick="addALL()"   >加入 Google 試算表內容</button>
<br><br>
<button class="BB" onclick="addRow()"   >第二行插入新二行</button>
<button class="BB" onclick="delRow()"   >刪除第二及三行</button>
<br><br>
<button class="BB" onclick="addCol()"   >第二欄 插入欄位</button>
<button class="BB" onclick="delCol()"   >刪除第二欄 </button>

function delCol(){  UD(1) ;
parameter = {dow:'deleteColumns',colIndex:2,numcols:1}; 
$.get(appUrl, parameter, function(data) { Stable() })
}

function addCol(){  UD(1) ;
parameter = {dow:'insertColumns',colIndex:2,numcols:1}; 
$.get(appUrl, parameter, function(data) { Stable() })
}

function delRow(){  UD(1) ;
parameter = {dow:'deleteRows',rowIndex:2,numRows:2}; 
$.get(appUrl, parameter, function(data) { Stable() })
}

function addRow(){  UD(1) ;
parameter = {dow:'insertRows',rowIndex:2,numRows:2}; 
$.get(appUrl, parameter, function(data) { Stable() })
}

function clearALL(){  UD(1) ;
parameter = {dow:'clearALL' }; 
$.get(appUrl, parameter, function(data) { Stable() })
}

//************************************************************
function Stable(){  UD(1) ;
var txt="";
parameter = {dow:'READJSON' ,Row:0,Col:0,RRow:0,CCol:0}; 
$.get(appUrl, parameter, function(data) {
              txt+= "<table id='table1' ><tbody>" ;
              for(var rr=0 ;rr < data.length ;rr++){
                   txt+= "</tr><tr>" ;
                   for(var cc=0 ;cc< data[0].length ;cc++){
                    txt+= "<td>"  + data[rr][cc] + "</td>" ; }
               }
txt+= "</td></tr></tbody><table>" ;
TT.innerHTML= txt; 
  UD(2) })
}

Stable() ;
</script>

#mm{font-size: 18px}

ol { background-color:tan ;}
li { background-color:ivory ;
     padding-left:10px;
     text-align: left;
     font-size: 18px ;}

#table1    { border-style:solid;}
#table1 td { border: 1px solid brown;
             padding:0px 10px;
             height:20px;
             min-height:500px; 
             font-size: 20px }

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

<ol>
<li><<?>script>

<li><TT>var appUrl= "https://script.google.com/macros/s/AKfycbwRszX3TbwcxYwBfAphcFmQdjV1hg02VJ6ETIkGcPOnO6uV7UyZ1iSIaurVgMDePUdn6w/exec"</TT>
<br><br>
<li>function clearALL(){ // ** 清空 工作表 內容 ** 
<li>parameter = { <R>dow:'clearALL'</R> }; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<br><br>
<li>function addALL(){ // ** 加入 工作表 內容 **
<li>var sd=[['0','1','2','3'],['a','你','好','嗎'],
        ['b',2,22,222],['c',3,33,333],['d',4,44,444]] ;
<li>parameter = {<R>dow:'SaveJSON'</R>,Sdata:JSON.stringify(sd),Row:1,Col:1}; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<br><br>
<li>function addRow(){ // ** 插入列 Insert Row **
<li>parameter = {<R>dow:'insertRows'</R>,rowIndex:2,numRows:2}; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<br><br>
<li>function delRow(){ // ** 刪除多個列 delete Rows **
<li>parameter = {<R>dow:'deleteRows'</R>,rowIndex:2,numRows:2}; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<br><br>
<li>function addCol(){ // ** 插入欄位 insert Columns **
<li>parameter = {<R>dow:'insertColumns'</R>,colIndex:2,numcols:1}; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<br><br>
<li>function delCol(){ // ** 刪除多欄位 delete  Columns **
<li>parameter = {<R>dow:'deleteColumns'</R>,colIndex:2,numcols:1}; 
<li>$.get(appUrl, parameter, function(data) {.....})
<li>}
<li><<?>/script>

</ol>

#B1 , #B2 ,TT ,#mm{font-size: 18px} 
div {word-break: break-all; word-wrap: break-word;
     font-size: 20px ;}
ol { background-color:tan ;}
li { background-color:ivory ;
     padding-left:10px;
     text-align: left;
     font-size: 18px ;}

#table1    { border-style:solid;}
#table1 td { border: 1px solid brown;
             padding:0px 10px;
             height:20px;
             min-height:500px; 
             font-size: 20px }

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

Edit

#get Google SpreadSheet content #Modify Google SpreadSheet content() #blogger #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #setValuesALL() clear() #getRange() #getDataRange() #insertRows()

2024年3月26日星期二

CK General ledger

<h3 class="h3" >Modify Google SpreadSheet content</h3>

<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee>	
</div>

<button onclick="Upload() ">upload renew</button>
<div id="DP1"></div> 
<div id="DP2"></div>

parameter = {dow:'ReadData' };
$.get(appUrl, parameter, function(data) {
     alert(JSON.stringify(data)) ; 
     Mdata=data ; DP();})

function DP(){ 
txt = "" ;
txt+= "<table id='table1' >" ;
txt+= "<tbody>"
txt+="<tr class='ColNO'><td> </td>" ;
   for(var ccc=0 ;ccc< Mdata[0].length ;ccc++){
       txt+="<td class='ColNO'>" ;
       txt+= "<select class='SL' " ;
       txt+= "onchange='Cchange(this.value ," + rr + ")    ;"  ;
       txt+= " this.selectedIndex=0 ')>" ;
       txt+= "<option style='display:none;'> </option>"
       txt+= "<option value='insU'> 向左插入行</option>"
       txt+= "<option value='insD'> 向右插入行</option>"
       txt+= "<option value='del'> 刪除本行</option>"
       txt+= "</select></td>" ;  }

for(var rr=0 ;rr < Mdata.length ;rr++){
      txt+= "</tr><tr><td class='RowNO'>" ;
      txt+= "<select class='SL' " ;
      txt+= "onchange='Rchange(this.value ," + rr + ")    ;"  ;
      txt+= " this.selectedIndex=0 ')>" ;
      txt+= "<option style='display:none;'> </option>"
      txt+= "<option value='insU'> 向上插入行</option>"
      txt+= "<option value='insD'> 向下插入行</option>"
      txt+= "<option value='del'> 刪除本行</option>"
      txt+= "</select></td>" ;
        for(var cc=0 ;cc< Mdata[0].length ;cc++){
            txt+= "<td><input type='text' class='INc' value='" ;
            txt+= Mdata[rr][cc] + "' onchange='CH(" ;
            txt+= rr + "," + cc + ", this.value " + ")' > </td>" ; }
}
txt+= "</td></tr></tbody><table>" ;
DP1.innerHTML= txt ; 
DP2.innerHTML= JSON.stringify(Mdata)
}

function Rchange(xx,yy){
var insCno =table1.rows[0].cells.length
Adata = [] ;
Tdata = [] ;
var assno = 0;
for(var cl=0 ; cl < insCno-1 ; cl++){Adata[cl]="new"+cl}

if(xx=="insU"){ //向上插入行
     for(cl=0 ; cl < Mdata.length ; cl++){
         if(yy == cl){ Tdata [cl] = Adata;
                       assno=1 ;
                       Tdata [cl+assno ] = Mdata[cl] ;}
     else{Tdata [cl+assno ] = Mdata[cl] ;  }
     } Mdata =Tdata ;  }

if(xx=="insD"){  // 向下插入行
     for(cl=0 ; cl < Mdata.length ; cl++){
         if(yy == cl){ Tdata [cl+assno ] = Mdata[cl] ;
                       assno=1 ;
                       Tdata [cl+assno] = Adata; }
     else{Tdata [cl+assno ] = Mdata[cl] ;  }
     } Mdata =Tdata ;  }

if(xx=="del"){  // 刪除本行
       for(cl=0 ; cl < Mdata.length-1 ; cl++){
           if(yy == cl){ assno =1} 
                Tdata[cl] = Mdata[cl+assno] ;   
           } Mdata =Tdata ;  }
DP() ;
}

function CH( rr , cc ,vv){
Mdata[rr][cc] = vv ;
DP2.innerHTML= JSON.stringify(Mdata ) ; }

}) ;
}

</script>

Edit

2024年3月22日星期五

CSS background

<h3>CSS background 背景</h3>
<div style="margin-top：-30px">
<pre><code> background-image:url("https://xxx.jpg") 呈現一張圖片地址
 background-size     圖片尺寸 
 background-position 圖片呈現位置
 background-repeat   圖片重複的效果
 background-color    背景顏色
</code></pre></div>

<table border="0" style="font-size : 25px;">
<tbody>
<tr><td rowspan="8" style="vertical-align:top" >div {
</td><td colspan="3">width: 100% ;
</td></tr><tr><td colspan="3">height: 100%;
</td></tr><tr><td colspan="3">background-image : url("https://xxx.jpg") ;

</td></tr><tr><td>background-size :</td><td id="Bgsize">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundSize = this.value;DPcss();this.selectedIndex=0" >
    <option value="" style="display:none;">background-size</OPTION>
    <option value="contain">contain</OPTION>
    <option value="cover">cover</OPTION>
    <option value="auto">auto</OPTION>
    <option value="100px 100px">100px 100px</OPTION>
    <option value="200px 200px">200px 200px</OPTION>
    <option value="200px">200px</OPTION>
    <option value="100% 100%">100% 100%</OPTION>
    <option value="80%">80%</OPTION>
    <option value="500px">500px</OPTION>
</SELECT>

</td></tr><tr><td> background-position :</td><td id="Bgposition">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundPosition= this.value;DPcss();this.selectedIndex=0" >
    <option value="" style="display:none;">background-position</OPTION>
    <option value="left top">left top</OPTION>
    <option value="left center">left center</OPTION>
    <option value="left bottom">left bottom</OPTION>
    <option value="center top">center top</OPTION>
    <option value="center center">center center</OPTION>
    <option value="center bottom">center top</OPTION>
    <option value="right  top">right top</OPTION>
    <option value="right  center">right center</OPTION>
    <option value="right bottom">right  bottom</OPTION>
    <option value="50% 50%">50% 50%</OPTION>
    <option value="30% 70%">30% 70%</OPTION>
    <option value="20px 200px">20px 200px</OPTION>
    <option value="50px 300px">50px 300px</OPTION>
    <option value="initial">initial</OPTION>
</SELECT>

</td></tr><tr><td> background-repeat :</td><td id="Bgrepeat">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundRepeat= this.value;DPcss();this.selectedIndex=0" >
    <option value="" style="display:none;">background-repeat</OPTION>
    <option value="no-repeat">no-repeat</OPTION>
    <option value="repeat">repeat</OPTION>
    <option value="repeat-y">repeat-y</OPTION>
    <option value="repeat-x">repeat-x</OPTION>
    <option value="space">space</OPTION>
    <option value="round">round</OPTION>
    <option value="initial">initial</OPTION>
</SELECT>

</td></tr><tr><td>  background-color :</td><td id="Bgcolor">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundColor = this.value;DPcss();this.selectedIndex=0" >
    <option value="" style="display:none;">background-color</OPTION>
    <option value="red">red</OPTION>
    <option value="pink">pink</OPTION>
    <option value="gray">gray</OPTION>
    <option value="gold">gold</OPTION>
</SELECT>

</td></tr></tbody></table>

</div>

function DPcss() { //alert( );
Bgsize.innerHTML =style.backgroundSize + " ;" ;
Bgposition.innerHTML =style.backgroundPosition + " ;";
Bgrepeat.innerHTML =style.backgroundRepeat + " ;";
Bgcolor.innerHTML = style.backgroundColor + " ; }" ;
}
DPcss();
</script>

#myDIV select { background:rgba(0, 0, 0, 0) ; 
                color:white; width:200px; 
                font-size: 20px}

#myDIV option {background-color: rgb(204, 204, 204 , 3);color:black;}

#myDIV table  {font-size: 20px ;}

pre { font-size: 18px; }
pre > code { white-space: pre;
             margin-top: -25px;
             display: block; }

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

<h3>CSS Background Patterns</h3>
<pre><code > CSS Background Patterns 簡易單色背景 CSS 語法產生器。
 如果你的網站需求是需要一些單色的背景紋理圖案，來避免略顯單調的白色的話，
 這個 CSS Background Pattern 網站所提供的服務就非常適合。你只需要決定前景、
 背景色、透明度和紋理間的間隔，就可以即時預覽結果，並複製相關的 CSS 程式碼
 到你的網站作使用。</code></pre>

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

.divDP {
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    font-size:22px;
    box-shadow: 0 1px 8px #666;
}

.pattern1 {
    background-size: 50px 50px;
    background-color: #0ae;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.pattern2 {
    background-size: 50px 50px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.pattern3 {    background-size: 50px 50px;
    background-color: #c16;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

}

.pattern4 {
    background-size: 50px 50px;
    background-color: #ac0;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.pattern5 {
    background-size: 50px 50px;
    background-color: white;
    background-image: 
        -webkit-linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
        -webkit-linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: 
        linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
        linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5))
}

.pattern6 {color:red;
    background-color: #eee;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    background-image: 
        -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
        -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

.pattern7 {color:red;
    background-color: #eee;
    background-size: 60px 60px;
    background-image: 
        -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
        -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

.pattern8 {
    background-color: #fff;
    background-size: 100% 1.2em;
    background-image: 
        -webkit-linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), 
        -webkit-linear-gradient(#eee .05em, transparent .05em);
    background-image:   
        linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), 
        linear-gradient(#eee .05em, transparent .05em);
}

.pattern9 {color:white;
    background: 
        -webkit-radial-gradient(circle, white 10%, transparent 10%), 
        -webkit-radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background: 
        radial-gradient(circle, white 10%, transparent 10%), 
        radial-gradient(circle, white 10%, indigo 10%) 50px 50px;
    background-size: 100px 100px;
}

.pattern10{
    background: 
        -webkit-radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), 
        -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: 
        radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), 
        radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-size: 20px 20px;
}

.pattern11 {
    background-color: #88AA33;
    background-image: -webkit-radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-position: 0 10px, 0 0%, 0 0;
    background-size: 20px 20px;
}

.pattern12{
    background-color: #330000;
    background-image: 
        -webkit-radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), 
        -webkit-radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), 
        -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
        -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
        -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
        -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
        -webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
        -webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
        -webkit-linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), 
        -webkit-linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
    background-image: 
        radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), 
        radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), 
        radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
        radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
        radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
        radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
        radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
        linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), 
        linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
    background-position: 0 0px, 50px 50px, 50px 0px, 0 50px, 50px 0px, 100px 50px, 0 0px, 50px 50px, 0 0px, 0 0;
    background-size: 100px 100px;
}

.pattern13 {color:red;
    background-color: white;
    background-image: 
        -webkit-radial-gradient(gold 9px, transparent 10px), 
        -webkit-repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px);
    background-image: 
    radial-gradient(gold 9px, transparent 10px), 
    repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px);
    background-position: 0 0;
    background-size: 30px 30px, 90px 90px;
}

.pattern14 {color:red;
    background-color: lightgray;
    background-image: 
        -webkit-radial-gradient(black 15%, transparent 16%), 
        -webkit-radial-gradient(black 15%, transparent 16%), 
        -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
        -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-image: 
        radial-gradient(black 15%, transparent 16%), 
        radial-gradient(black 15%, transparent 16%), 
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
    background-size: 16px 16px;
}

.pattern15 {
    background-color: #BB0033;
    background-image: 
        -webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        -webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        -webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
         -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
         -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), 
         -webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
         -webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
         -webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
         -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
         -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
    background-image: 
        radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
        radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
        radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), 
        radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
        radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
        radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
        radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
    background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
    background-size: 100px 100px;
}
.pattern16 {
    background-color: lightgray;
    background-image:
        -webkit-repeating-linear-gradient(120deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
        -webkit-repeating-linear-gradient(60deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
        -webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
        -webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-image:
        repeating-linear-gradient(120deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(60deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px),
        linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
        linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
}
.pattern17 {
    background-image: 
        -webkit-radial-gradient( circle at 100% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent),
        -webkit-radial-gradient( circle at 0% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
    background-image: 
        radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), 
        radial-gradient( circle at 0% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
    background-color: slategray;
    background-size:75px 100px;
  background-position: 0 0%, 0 -50px;
}

.pattern18{color:red;
  background-color: rgb(0,255,255,0.2);
  background-image: 
    -webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
    -webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
    -webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
    -webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
    -webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), 
    -webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%), 
    -webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), 
    -webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%);
  background-image: 
    radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
    radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
    radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
    radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
    radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), 
    radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%), 
    radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), 
    radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%);
  background-position: 50px 0px, 50px 0px, 0 50px, 0 50px, 0 0%, 0 0%, 50px 50px, 50px 50px;
  background-size: 100px 100px;
}

.pattern19 {
  background-color: #C8D3A7;
  background-image: 
    -webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), 
    -webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
    background-image: 
        radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), 
        radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
  background-position: 0 0px, 20px 20px;
  background-size: 40px 40px;
}
.pattern20 {
  background-color: #DDEEFF;
  background-image: 
    -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), 
    -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
  background-image: 
    radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), 
    radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
  background-position: 0 0px, 20px 20px;
  background-size: 40px 40px;
}
.pattern21 {background-color: #f76;
  background-image:
    linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
    linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
    linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
    linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
    linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
    linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
    linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
    linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
    linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
    linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
  background-position:
    0em 1em,
    0em 1em,
    1em 2em,
    1em 2em,
    2em 1em,
    2em 1em,
    3em 2em,
    3em 2em,
    0em 0em,
    1em 1em;
  background-size:
    4em 2em,
    4em 2em,
    4em 2em,
    4em 2em,
    4em 2em,
    4em 2em,
    4em 2em,
    4em 2em,
    2em 2em,
    2em 2em;
}       
    </style>
    <div class="divDP pattern1">pattern 1</div>
    <div class="divDP pattern2">pattern 2</div>
    <div class="divDP pattern3">pattern 3</div>
    <div class="divDP pattern4">pattern 4</div>
    <div class="divDP pattern5">pattern 5</div>
    <div class="divDP pattern6">pattern 6</div>
    <div class="divDP pattern7">pattern 7</div>
    <div class="divDP pattern8">pattern 8</div>
    <div class="divDP pattern9">pattern 9</div>
    <div class="divDP pattern10">pattern 10</div>
    <div class="divDP pattern11">pattern 11</div>
    <div class="divDP pattern12">pattern 12</div>
    <div class="divDP pattern13">pattern 13</div>
    <div class="divDP pattern14">pattern 14</div>
    <div class="divDP pattern15">pattern 15</div>
    <div class="divDP pattern16">pattern 16</div>
    <div class="divDP pattern17">pattern 17</div>
    <div class="divDP pattern18">pattern 18</div>
    <div class="divDP pattern19">pattern 19</div>
    <div class="divDP pattern20">pattern 20</div>
    <div class="divDP pattern21">pattern 21</div>

Edit

#ccs #HTML #background-image:url #background-size #background-position #background-repeat #background-color #Background Patterns #ccs background

2024年3月21日星期四

border-style

<h3>CCS border 邊框</h3>
<pre>border-style 屬性指定邊框的樣式。</pre>
            
<table style="width:100%">
<tbody><tr>
<td style="border-style:solid">實線 border-style:solid
</td><td style="width:10%"></td>
<td style="border-style:dashed;">虛線 border-style:dashed
</tr><tr>

<td style="border-style:double;">雙線 border-style:double 
</td><td></td>
<td style="border-style:dotted;">點線 border-style:dotted
</tr><tr>

<td style="border-style:groove;">凹線 border-style:groove 
</td><td></td>
<td style="border-style:ridge;">凸線 border-style:ridge
</tr><tr>

<td style="border-style:inset;">嵌入線 border-style:inset 
</td><td></td>
<td style="border-style:outset;">浮出線 border-style:outset 
</tr><tr>

</tr></tdody></table>
<br><br>

<div style="border-width:9px; border-style:solid">
邊框寬度為 9px border-width:9px; border-style:solid 
</div>
<br>

<div style="border-width:medium; border-style:dashed">
邊框寬度為中等 border-width:medium; border-style:dashed 
</div>
<br>

<div style="border-color:#0000FF; border-style:solid">
藍色邊框 border-color:#0000FF; border-style:solid 
</div>
<br>

<div style="border-color:red; border-style:dotted">
紅色邊框
 border-color:red; border-style:dotted
</div>

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

<div style="border: 10px ridge orchid;border-radius:50% 50% 50% 50%;
               text-align: center;">
<pre>border: 10px ridge pink
   border-radius:50% 50% 50% 50%</pre>
</div>
<br>

<div style="border: 10px solid pink;border-radius:40px 40px 40px 40px;
               text-align: center;">
<pre>border: 10px ridge pink
   border-radius:40px 40px 40px 40px</pre>
</div>
<br>

<div style="border-left-style:solid; border-top-style:dashed;
            border-right-style:dotted;border-bottom-style:double;">
<pre>  左邊框為實線 border-left-style:solid
  上邊框為實線 border-top-style:dashed
  下邊框為虛線 border-right-style:dotted
  且顏色為綠色 border-bottom-style:double</pre>
</div></div>

td , div {border-width:5px 5px 5px 5px;
          padding:5px 5px;
          font-size: 20px; }

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

<table style="width:100%">
<tbody><tr>
<td>
<div style="border: 10px solid brown;
            border-radius: 100px; 
            height: 100px; width: 100px;"  >
<pre  style="margin-left:-50px">border: 10px solid brown;
border-radius: 100px;
height: 100px ; width: 100px;</pre>
</div>
</td><td>
<div style="border: 10px solid gold;
            border-radius: 150px; 
            width: 150px;height: 100px;"  >
<pre  style="margin-left:-50px">border: 10px solid gold;
border-radius: 150px;
height: 150px ; width: 100px</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 10px solid bisque;
            border-radius: 50px 0 0 50px; 
            width: 50px;height: 100px;"  >
<pre  style="margin-left:-100px">border: 10px solid bisque;
border-radius: 50px 0 0 50px;
width:50px ; height:100px;</pre>
</div>
</td><td>
<div style="border: 10px solid blueviolet;
            border-radius: 0 50px 50px 0; 
            width: 50px;height: 100px;"  >
<pre  style="margin-left:-100px">border: 10px solid blueviolet;
border-radius: 0 50px 50px 0 ;
width: 50px;height: 100px;</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 1px solid lawngreen;
            border-radius: 50px 50px 0 0; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 1px solid lawngreen;
border-radius: 50px 50px 0 0;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 2px solid orchid;
            border-radius: 0 0 50px 50px; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 2px solid orchid;
border-radius: 0 0 50px 50p ;
width: 100px;height: 50px;</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 5px solid bisque;
            border-radius: 50px 0 50px 0 ; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 5px solid bisque;
border-radius: 50px 0 50px 0 ;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 3px solid salmon;
            border-radius: 0 50px 0 50px; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 3px solid salmon;
border-radius: 0 50px 0 50p ;
width: 100px;height: 50px;</pre>
</div>

</td></tr></tdody></table>

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

<table style="width:100%">
<tbody><tr><td>
<TO><<c>img style="width:150px ; height:150px;<br>
                     
  border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 150px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />

</td></tr><tr><td>

<TO><<c>img style="width: 150px ; height: 100px;<br>
                     
border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 100px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />

</td></tr><tr><td>

</tdody></table>

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

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect

text-shadow

<h3>CCS text-shadow 文字陰影效果</h3>
<pre> 文字陰影  {text-shadow: 向右移動 向下移動 模糊度 陰影色 }，
<span id="D1">陰影效果 </span >{ text-align: center;
               font-weight : bold;
               text-shadow:5px 5px 10px black ; }

<span id="D2">字型輪廓</span>{ color: white;
               letter-spacing: 3px;
               font-weight:bold ;
               text-shadow: -2px  0   0 black, 
                             0   2px  0 black,
                             2px  0   0 black, 
                             0   -2px 0 black; }

<span id="D3">活動陰影</span>{ animation: mymove 5s infinite; }
 @keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
                   25% {text-shadow:0px 20px 20px red; } 
                   35% {text-shadow:-10px 10px 20px gold; }  
                   45% {text-shadow:-10px 10px 20px orangered; }
                   55% {text-shadow:-10px 1px 20px orange; } 
                   65% {text-shadow:-10px -10px 20px tomato; }
                   75% {text-shadow:10px -10px 20px darkorange; }
                   85% {text-shadow:0px -10px 20px red; }
                  100% {text-shadow:10px 0px  20px deeppink; } } }
</pre>

#D2 { font-size: 30px ;
       color: white;
       letter-spacing: 3px;
       font-weight:bold ;
       text-shadow: -2px  0   0 black, 
                      0  2px  0 black,
                     2px  0   0 black, 
                      0  -2px 0 black;}

#D3 {font-size: 30px ;
     animation: mymove 5s infinite; }
@keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
                  25% {text-shadow:0px 20px 20px red; } 
                  35% {text-shadow:-10px 10px 20px gold; }  
                  45% {text-shadow:-10px 10px 20px orangered; }
                  55% {text-shadow:-10px 1px 20px orange; } 
                  65% {text-shadow:-10px -10px 20px tomato; }
                  75% {text-shadow:10px -10px 20px darkorange; }
                  85% {text-shadow:0px -10px 20px red; }
                  100% {text-shadow:10px 0px  20px deeppink; } }

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

<div id="div1">
    
<pre><span id="s0"> 陰影效果</span> { font-size: 30px ;
                 color:orange;
                 font-weight : bold;
                 text-shadow:5px 5px 5px navy; }

<span id="s1"> 加凸文字</span> { font-size: 25px;
               font-weight : bold;
               text-shadow: -2px -2px white, 1px 1px #333; }

<span id="s2"> 加凹文字</span> { font-size: 25px;
                font-weight : bold;
                text-shadow: 2px 2px white, -1px -1px #333; }

<span id="s3">立體文字</span>  { font-size: 50px;
                        color:blue ;
                        font-weight:bold ;
                        text-align: center;
                        text-shadow:2px 2px 2px white,
                                    3px 3px 3px white,
                                    4px 4px 3px white,
                                    5px 5px 3px white,
                                    6px 6px 6px white,
                                    8px 7px 3px black }
</pre>
</div>

#s0 { font-size: 30px ;
      color:orange;
      font-weight : bold;
      text-shadow:5px 5px 5px navy;}

#s1 { font-size: 25px;
      //text-align:center;
      font-weight : bold;
      text-shadow: -2px -2px white, 1px 1px #333;}

#s2 { font-size: 25px;
      font-weight : bold;
      text-shadow: 3px 3px white, -1px -1px #333}

#s3 { font-size: 50px;
      color:blue ;
      font-weight:bold ;
      text-align: center;
      text-shadow:2px 2px 2px white,
                         3px 3px 3px white,
                         4px 4px 3px white,
                         5px 5px 3px white,
                         6px 6px 6px white,
                         8px 7px 3px black}

pre {font-size: 18px;}
</style>

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect

2024年3月20日星期三

CSS padding

<h3>CSS padding 內距屬性與用法範例 留白</h3>
<pre>
CSS padding: 留白 邊框內的部分。一個盒子有四個邊，
             所以我們可以對這四個邊的留白逐一設定。

CSS : padding: [上] [右] [下] [左]      padding: [上下] [左右]
      padding: [上] [左右] [下]       　padding: [四個邊同樣値]

CSS padding 的四個邊獨立寫法 : padding-top   ：與上個邊的距離
                              padding-right ：與右方個邊距離
                              padding-bottom：與下方個邊距離
                              padding-left  ：與左個邊的距離

padding 可以的值有 auto、%、em、px、pt </pre>

<br>
padding : 
<input type="number" id="In1" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In2" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In3" value="10" onchange="change()" min="0" max="50"/>
<input type="number" id="In4" value="10" onchange="change()" min="0" max="50"/>
<br><br>
<table id="DPP" >
<tbody><tr><td> 
   <div id="TT">padding</div>
</td></tr></tbody></table>

var a= In1.value+"px "+In2.value+"px "+In3.value+"px "+In4.value+"px ";
TT.style.padding = a ;
}
</script>

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

pre { font-size: 18px; }
</style>

<h3>CSS margin 屬性用來定義一個區域 </h3>
<pre>
例如 DIV  span img 等 的外邊界距離 ，
CSS : margin : [上] [右] [下] [左]      margin : [上下] [左右]
      margin : [上] [左右] [下]       　margin : [四個邊同樣値]

CSS margin 的四個邊獨立寫法  margin-top：與上方元素的距離
                            margin-right：與右方元素的距離
                            margin-bottom：與下方元素的距離
                            margin-left：與左方元素的距離 margin 
可以的值有 auto、%、em、px、pt </pre>

<br>
margin : 
<input type="number" id="In1" value="10" onchange="change()" />
<input type="number" id="In2" value="10" onchange="change()" />

<br>
<br>
<div id="DPP">
   <div id="TT"><span id="sp">margin</span></div>
</div>

</script>

#DPP {  padding: 0px;
        border: 1px solid;
        width: 200px;
        height:200px;
        margin: 0 auto;
        font-size: 20px;}
 // line-height: 1.5;
 //letter-spacing: 1px;

#TT { margin:10px 10px;}
#sp { border: 1px solid;}

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

pre { font-size: 18px; }
</style>

Edit

#ccs #CCS #CCS padding #CCS margin #HTML padding #HTML margin #內距屬性 #外距屬性

CSS word-wrap

<h3>CSS overflow 控制捲軸</h3>

<pre>
捲軸控制在網頁設計上算是滿常碰到的問題，尤其當 div 排版法漸成為主流時， 
善用 ccs overflow 就能有效的的掌握各種捲軸效果。

overflow:       控制當內容超過顯示區域時捲軸的顯示，
overflow-x:     x捲軸的顯示。
overflow-y:     y捲軸的顯示。

捲軸顯示有四種狀態 ﹕
visible(預設):內容完全顯示不嵌入顯示區域。
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。
hidden:內容嵌入顯示區域，捲軸不會出現。</pre>

<table border="1" style="width:100%">
<tbody><tr><td style="width:50%">
<div id="overflow" >
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IpFKbErhPeVG1R6S23rHkucs4A5KK_oq_uAcCSAT0_LF-o1r-HcfCOU7uqruFbQ5VsnnIXshygbOJCu1vDcptJIc8vVUtxacrb6hIThyphenhypheng5pdUo6cluBfAcZmsL7iIrmjSxv89KtB2aFH/s300/inCollage_20191124_173415963_mh1574588854008.jpg"  />
</div>
</td><td>
<div id="DDf">
<select onchange="Change(this.value)">
   <option value="visible" >overflow:visible</option>
   <option value="hidden"  >overflow:hidden</option>
   <option value="auto" >overflow:auto </option>
   <option value="scroll" >overflow:scroll</option>
   <option value="overflow-x:hidden" >overflow-x:hidden</option>
   <option value="overflow-y:hidden" >overflow-y:hidden</option>
</select>

<pre>
<<c>style>
#outerDiv{ overflow :<span id="span1">visible</span>
           overflowx:<span id="span2">visible</span>  
           overflowy:<span id="span3">visible</span> }

<<c>/style>
</pre>
</div>
</td></tr></tbody></table>

if(x == "overflow-y:hidden"){ overflow.style.overflow='scroll' ;
                              overflow.style.overflowY='hidden' ; }

span1.innerHTML = overflow.style.overflow;
span2.innerHTML = overflow.style.overflowX;
span3.innerHTML = overflow.style.overflowY;

}

</script>

#overflow{ height:200px;width:200px;
           padding:5px;
           border: 3px solid black;
           overflow:visible }

//#DDf{position: fixed;
//top:10px ; left:350px}

input  {cursor:pointer;}

pre { font-size: 18px ;
      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>

<h3>CSS 文字換行技巧<br>word-break、word-wrap</h3>

<br><br>
<label class="container">
  <input type="radio" name="S1" checked onchange="change(1)">
          word-break: normal</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(2)" >
          word-break: break-all</label>
<br>

<label class="container">
  <input type="radio" name="S1" onchange="change(3)" >
          word-break: keep-all</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(4)" >
          word-wrap: normal</label>
<br> 
<label class="container">
  <input type="radio" name="S1" onchange="change(5)" >
          word-wrap: break-word</label>

<div id="DPP" class="narrow">
<br>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
<br><br>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
<br><br>
𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃</div>

if(x==1){ DPP.className="A1" }
if(x==2){ DPP.className="A2" }
if(x==3){ DPP.className="A3" }
if(x==4){ DPP.className="A4" }
if(x==5){ DPP.className="A5" }

}

</script>

.container{font-size: 20px;}

#DPP {
  padding: 10px;
  border: 1px solid;
  width: 400px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px; }

.A1{word-break: normal;}

.A2{word-break: break-all;}

.A3{word-break: keep-all;}

.A4{word-wrap: normal;}

.A5{word-wrap: break-word;}

</style>

Edit

#word-break #word-wrap #word-break: normal #word-break: break-all #word-break: keep-all #word-wrap: normal #word-wrap: break-word #CSS 文字換行技巧 #CSS overflow #CSS 控制捲軸 #CSS overflow #CSS overflow-x #CSS overflow-y #CSS overflow :visible

2024年3月2日星期六

JSON format

<pre>
以 JavaScript 物件表示一筆資料
        var obj = [ {"AA":"11", "BB":"22", "CCC":"33" },
                    {"BB":"1", "CC":"2" }];</pre>
<table border="1"width="100%" >
<tr><td>
1</td><td>
var obj </td><td>得出二個物件 <c id="D1"></c> 
</td></tr><tr><td>
2</td><td>
JSON.stringify(obj)</td><td> 得出字串化 
   <c id="D2"></c>
</td></tr><tr><td>

3</td><td>
obj.length </td><td>得出長度 <c id="D3"></c>
</td></tr><tr><td>

4</td><td>
Object.keys(obj).length </td><td>得出長度 <c id="D4"></c>
</td></tr><tr><td>

5</td><td> 
Object.keys(obj[0]).length </td><td>得出長度 <c id="D5"></c>
</td></tr><tr><td>

6</td><td> 
Object.keys(obj[1]).length </td><td>得出長度 <c id="D6"></c>
</td></tr><tr><td>

7</td><td> 
JSON.stringify(obj[0]) </td><td>得出 <c id="D7"></c>
</td></tr><tr><td>

8</td><td> 
JSON.stringify(obj[1]) </td><td>得出 <c id="D8"></c>
</td></tr><tr><td>

9</td><td> 
obj[0].AA </td><td>得出 <c id="D9"></c>
</td></tr><tr><td>

10</td><td>
obj[0].BB </td><td>得出 <c id="D10"></c>
</td></tr><tr><td>

11</td><td>
obj[1].BB </td><td>得出 <c id="D11"></c>

</td></tr></table>

D1.innerHTML= obj ;
D2.innerHTML= JSON.stringify(obj) ;
D3.innerHTML= obj.length ;
D4.innerHTML= Object.keys(obj).length ; 
D5.innerHTML= Object.keys(obj[0]).length ;
D6.innerHTML= Object.keys(obj[1]).length ;
D7.innerHTML= JSON.stringify(obj[0]) ;  
D8.innerHTML= JSON.stringify(obj[1]) ;  
D9.innerHTML= obj[0].AA ;  
D10.innerHTML= obj[0].BB ;  
D11.innerHTML= obj[1].BB ;

</script>

Edit

訂閱：文章 (Atom)

2024年3月28日 星期四

set Google SpreadSheet content 設定 Google 試算表內容

2024年3月26日 星期二

2024年3月22日 星期五

2024年3月21日 星期四

2024年3月20日 星期三

2024年3月2日 星期六

2024年3月28日星期四

set Google SpreadSheet content
設定 Google 試算表內容

2024年3月26日星期二

2024年3月22日星期五

2024年3月21日星期四

2024年3月20日星期三

2024年3月2日星期六