✍ 📁 🙈 🙉 🙊

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>
<br>
<div id="ok">copy to clipboard </div>

<br>
<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)<br>
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

Blogger width of page

Blogger width of page
修改頁面寬度

 blogger 頁面寬度 修改

 body { min-width: 50%;
        font-size:18px;
        overflow-x:hidden; 
        background-color:lavender; 
        width: ;  
        margin:auto;            } 

 .content-outer, .content-fauxcolumn-outer, .region-inner {
 background-color:lavender;
 min-width: 900px;    /*文章寬度最小*/
 max-width: 2500px;   /*文章寬度最大*/
 width: 100% ;        /*文章寬度*/ 
}

隱藏頂部Blogger 導覽列

#navbar { display:; }

隱藏 Blogger 標頭內容

.header-inner .Header #header-inner{ display:; }

Edit

#ccs #HTML #blogger #擴展Blogger版面寬度 #.content-outer #.content-fauxcolumn-outer #隱藏頂部Blogger 導覽列 #隱藏 Blogger 標頭內容 #header inner #navbar

Blogger Label select

<h3> my Blogger 標籤</h3>
<div id="ID">
<style>
.ALLselect  {  padding:15;
                        background-color:gainsboro;
                       font-size:20px;
                       width:150px;
                       height:35px;
                       color: blue ;            
                       border:1px solid #000000;  
                       vertical-align:top; }

.ALLselect:hover {
font-style: italic; 
font-weight:bold; color:White;
background-color:gray;}

#cckDPaa {position: fixed; top:130px}
</style>

<select class='ALLselect' id='ALLBlogger' onchange='location=this.options [this.selectedIndex].value;'  onmouseover='this.focus()'>
<option style="display:none;" />Blogger
</select><br />

<select class='ALLselect' id='ALLscript' onchange='location=this.options [this.selectedIndex].value;'  onmouseover='this.focus()'>
<option style="display:none;" />Script
</select><br />

<select class='ALLselect' id='ALLjquery' onchange='location=this.options [this.selectedIndex].value;'  onmouseover='this.focus()'>
<option style="display:none;" /> jquery
</select><br />

<select class='ALLselect' id='ALLother' onchange='location=this.options [this.selectedIndex].value;'  onmouseover='this.focus()'>
<option style="display:none;" />other
</select>
</div><br />

if(ALLlabel[i].indexOf('管理員') > -1 && okok == 0){
var x = document.getElementById("ALL管理員");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/管理員/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('Blogger') > -1 && okok == 0){
var x = document.getElementById("ALLBlogger");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/Blogger/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('標簽') > -1 && okok == 0){
var x = document.getElementById("ALLhtml");
var option = document.createElement("option");
var value = document.createElement("value");
ALLlabel[i] = ALLlabel[i].replace(/</,"<");
ALLlabel[i] = ALLlabel[i].replace(/>/,">");

option.text = ALLlabel[i].replace(/標簽/,"");

option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('script') > -1 && okok == 0){
var x = document.getElementById("ALLscript");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/script/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('var') > -1 && okok == 0){
var x = document.getElementById("ALLstring");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/var/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('CSS') > -1 && okok == 0){
var x = document.getElementById("ALLcss");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/CSS/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('jquery') > -1 && okok == 0){
var x = document.getElementById("ALLjquery");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/jquery/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(okok == 0){
var x = document.getElementById("ALLother");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i];
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

}
</script>

</div>

<h3>Blogger 標籤 改為 下拉選單 <<?>select><br>
讓文章更好檢索</h3>
<pre> 第一步 : 打開 Blogger 後台【範本】選擇【編輯HTML】,
          按下【ctrl】鍵 +【 F 】 搜尋關鍵字 標籤,
          修改 Blogger HTML 內標籤。
 第二步 : 打開 Blogger 後台 ,新增小工具,用 [HTML/JavaScript],
         新增 HTML 下拉式選單標籤顯示在你的網誌內。</pre>

<table border="1" style="width:100%">
<tbody><tr>
<td class="Td">Blogger的標籤</td>
<td class="Td">改成下拉選單標籤</td>
</tr><td>
<ul>
<li>管理員 本網誌 CSS
<li>管理員 免費程式
<li>管理員 網站管理員
<li>管理員 閱讀更多
<li>管理員 繁簡體轉換
<li>標簽 <<?>button> 按鈕
<li>標簽 <<?>div> 捲軸
<li>標簽 <<?>div> 對齊
<li>標簽 <<?>input>
<li>標簽 <<?>input> radio
<li>CSS Color code
<li>CSS content 插入內容
<li>CSS cursor 滑鼠游標
<li>CSS display flex flex-wrap
<li>CSS display 顯示類型
<li>CSS display flex
</td><td>
<select>
<option style="display:none;">管理員
<option>本網誌 CSS</option>本網誌 CSS
<option>免費程式</option>
<option>網站管理員</option>
<option>閱讀更多</option>
<option>繁簡體轉換</option>
</select>
<br>
<select>
<option style="display:none;">HTML
<option><<?>button> 按鈕
<option><<?>div> 捲軸
<option><<?>div> 對齊
<option><<?>input>
<option><<?>input> radio
</select>
<br>
<select>
<option style="display:none;">CSS
<option>Color code
<option>content 插入內容
<option>cursor 滑鼠游標
<option>display flex flex-wrap
<option>display 顯示類型
<option>display flex
</select>
</td></tr></tbody></table>

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>

<div style="border: 1px solid black; padding: 10px;">
第二步 : <br>
在後台 新增小工具 -><span class="njANJ"><br>
  <span class="ocsWod">HTML/JavaScript</span>
  <span class="Owr4ze">新增第三方功能或其他代碼到您的網誌 ,</span><br>
  <span class="Owr4ze">加入下列 HTML</span><br>
  </span><br>  
  
<pre><<?>style>
 .ALLselect  {  padding:15;
                background-color:gainsboro;
                font-size:20px;
                width:150px;
                height:35px;
                color: blue ;            
                border:1px solid #000000;  
                vertical-align:top; }

.ALLselect:hover { font-style: italic; 
                   font-weight:bold; 
                   color:White;
                   background-color:gray;}

#cckDPaa { position: fixed; top:130px}
<<?>style>

<<?>div id="cckDPaa">
<<?>select class='ALLselect' id='ALL管理員' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />管理員
<<?>/select><<?>br>

<<?>select class='ALLselect' id='ALLBlogger' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />Blogger
<<?>/select><<?>br>

<<?>select class='ALLselect' id='ALLhtml' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />HTML
<<?>/select><<?>br>

<<?>script type="text/javascript">
var Alllength =  ALLlabel.length;
var i;
for (i = 0 ;i < Alllength; i=i+2 ){
var okok = 0 ;

if(ALLlabel[i].indexOf('標簽') > -1 && okok == 0){
var x = document.getElementById("ALLhtml");
var option = document.createElement("option");
var value = document.createElement("value");
ALLlabel[i] = ALLlabel[i].replace(/標簽/,"");
option.text =  "<" + ALLlabel[i].replace(/@/,">") ;
option.value =ALLlabel[i+1];
x.add(option);okok=1;}
<<?>/script>
</pre>

Edit

#ccs #HTML #Blogger Label select #Blogger Label

blogger/mediamanager

<h3>Blogger mediamanager 媒體經理<br>
Googlr Blogger 管理圖片。</h3>

<div>你可以在網誌文章中加入相片、影片和其他圖片，<br>
你可以前往 <a href="http://blogger.com/mediamanager" rel="noopener" target="_blank">blogger.com/mediamanager</a> 尋找及管理資料。
</div>

<ol>
  <li class="ghelp-hidden"><a href="https://www.blogger.com/" target="_blank" rel="noopener">登入 Blogger</a>。</li>
  <li>在左上角選取所需網誌。</li>
  <li>按一下您要編輯的文章或建立新文章。</li>
  <li>按一下頂端的「插入圖片」圖示 <img src="//lh3.googleusercontent.com/PE6A_TGVAeJi26UsrOEcRqqcsISeDGQeuQN979cSQnG9x5yGWlSBmUsUdQ0_suDGBA=w36-h36" width="18" height="18" alt="Insert image" data-mime-type="image/png" data-alt-src="//lh3.googleusercontent.com/PE6A_TGVAeJi26UsrOEcRqqcsISeDGQeuQN979cSQnG9x5yGWlSBmUsUdQ0_suDGBA">。</li>
  <li>選擇上傳圖片的來源位置。</li>
  <li>選取一或多張圖片，然後按一下 [插入]<strong></strong>。
    <ul>
      <li>新增圖片後，如要變更圖片大小、說明文字或對齊方式，請按一下圖片。</li>
    </ul>
  </li>
</ol>

<style>

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>

Edit

#ccs #HTML #blogger #mediamanager #blogger mediamanager #Googlr Blogger 管理圖片。 #Blogger mediamanager 媒體經理

Google Apps Script

<h3>我的 Google Apps Script 範例程式碼</h3>
<div> //  紅色是你的試算表地址<br>
var SpreadSheet = SpreadsheetApp.openByUrl('<r>https://docs.google.com/spreadsheets/d/1loDC9_v5gdeosEd01_S4x619gCmxZS6SF4uRQLo3rOg/edit#gid=0</r>') ;</div>
<pre>var SheetName = SpreadSheet.getSheetByName('工作表1');
var obj = {} ;
var objA =  {  檔案名稱: SpreadSheet.getName(), 
               工作表名: SheetName.getName(), 
               資料筆數: SheetName.getLastRow(), 
               資料項目: SheetName.getLastColumn(), } ; 
var A1=1,A2=1,B3=4,B2=4 ;

function doGet(e) {   
   var  parameter = [] ;   
   if(typeof e !== 'undefined') { parameter = e.parameter ; }

//  Google 試算表 刪除欄位 deleteColumns
if( parameter.dow == "deleteColumns"){ 
    SheetName.deleteColumns(parameter.colIndex,parameter.numcols) ;
    return ContentService.createTextOutput("ok" ); }

//  Google 試算表 插入欄位 insertColumns
if( parameter.dow == "insertColumns"){ 
    SheetName.insertColumns(parameter.colIndex,parameter.numcols) ;
    return ContentService.createTextOutput("ok" ); }

//  刪除多個列 delete Rows            
if( parameter.dow == "deleteRows"){ 
    SheetName.deleteRows(parameter.rowIndex,parameter.numRows) ;
    return ContentService.createTextOutput("ok" ); }

// ** 插入列 Insert Row **
if( parameter.dow == "insertRows"){ 
    SheetName.insertRows(parameter.rowIndex, parameter.numRows) ;
    return ContentService.createTextOutput("ok" ); }

// ** 清空 工作表 內容 **
if( parameter.dow == "clearALL"){ 
    var first = SheetName;
    first.clear();
    return ContentService.createTextOutput("clearALL ok" ); }

// ** 讀取所有 或 指定範圍 資料 **
if( parameter.dow == "ReadData"){
    ReadData(parameter.A1,parameter.A2,parameter.B1,parameter.B2);
    return ContentService.createTextOutput(JSON.stringify(obj)).
    setMimeType(ContentService.MimeType.JSON)  }

// ** 加入多數內容 ******
if( parameter.dow == "setValuesALL"){
    setValuesALL(parameter.Row , parameter.Col , 
                 JSON.parse(parameter.Sdata)) ;
     return ContentService.createTextOutput('setValuesALL ok') }

Logger.log(objA)

return ContentService.createTextOutput(JSON.stringify(objA)).
        setMimeType(ContentService.MimeType.JSON)   ;
}

// ** 加入多數內容 **
function setValuesALL(Row,Col,TT){
var range = SheetName.getRange(Row,Col,TT.length,TT[0].length);
    range.setValues(TT); }

//  讀取所有 或 指定範圍 資料 ***
function ReadData(A1,A2,B1,B2) { 
//  讀取指定範圍用
if(A1 != null){
    var data = SheetName.getRange(A1,A2,B1,B2).getValues();}
//  讀取所有用
else {var data = SheetName.getDataRange().getValues()}

obj = data;
Logger.log(obj); }

</pre>

<h3>Google Spreadsheet
<br><br>
<img style="width:80%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVe4K_ORUNzZ9blmwt9AhsyCSZ381_hOtqNVYvFa8nFEITz9zQZd1fwsXpc7xB9C87qW5dkCOClkIfTC57AAzWFluzf0nxGSOf-HjPkhWO3qbN7UyqwXyyDijuAfWJsemwmhlL6ac83jc6VqqXAp8hXITCD-DQW1HBZa5sU7pOTBO4p0/s2600/app1.jpg" /></h3>
<pre> 製作完你的試算表後，紅框標示的區塊，就是去到執行 或 編寫 Apps Script
 指令碼的地方。</pre>

<br>
  
☛ <a  href="https://developers.google.com/apps-script" target="_blank" title="HTML">Google Apps Script 官網</a> 
<br>
☛ <a  href="https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet" target="_blank" title="HTML">使用 google Apps 腳本自動執行任務</a>

.T3 {width:150px;border: 1px solid black;text-align: center;color : blue; 
     background:radial-gradient(circle farthest-corner at left,yellow,red);background:radial-gradient(circle farthest-corner at left,yellow,red);}
.T2 {width:80px;text-align: center}

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

<h3>Google Apps Script development platform
<br><br>
<img style="width:80%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7higLn_5MgI7cpNonQrpXhe-h8JjNoDQ6rctVKFYA6OG1bFxhAxYBnpHRHzXZN-B0sUEv1duFeSidqyKebk-2q3BREWzHvieKFwd1w-i-enFIftkhI8eotxgk0NPyx80f4myd11FVlCUz7dL2qqit9YBpi5XjuBAX3G85gta6aGkvtw/s1600/app2.jpg" /></h3>

<pre> 進入 Apps Script 指令碼的地方，編寫寫你的 app script，測試偵錯之後，
 發佈部署上網，供 HTML 向 Google 試算表 讀取或寫入資料 的橋樑。</pre>

pre { 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 #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #doGet(e) #deleteColumns() #insertColumns() #免費資料庫

Google Apps Script 2

<h3>get Google SpreadSheet content</h3>
<div class="DDiv">

<pre>html 程式訪問 google Apps Script，值 data 傳回 google 工作表1 內容，
var <R>appUrl</R> = "我的 google Apps Script 應用程式的網址"。
</pre>

<ol>
<li>  <</span>div id="DP"><</span>/div>
<br>
<br>
<li>  <</span>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><li><</>/script>
<br>
<br>
<li>  <</span>script>
<li>  var <R>appUrl</R> = "https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec" ;
<br>
<br>
<li>parameter = {dow:'ReadData'    };
<br>
<li>$.get(appUrl, parameter, function(data) {
<li>           $('#DP').text(JSON.stringify(data)) ; 
<li>    }) 
<li>  <</c>/script>
</ol>
 <br><br>
 
傳回 :<br>

parameter = {dow:'ReadData' };
$.get(appUrl, parameter, function(data) {
 $('#DP').text(JSON.stringify(data )) ; 
})
</script>

.DDiv {word-break: break-all; word-wrap: break-word;}
R {color:red}
</style>

pre {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>

<h3>get Google SpreadSheet content</h3>

<pre>html 程式訪問 google Apps Script，傳回 google 工作表1 內容，
var <R>url</R> = "我的 google Apps Script 應用程式的網址"。
</pre>
<ol>
<li><<c>div id="demo"><<c>/div>

<li><<c>script>
<li><div>var url ="https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec"
</div><br>
<li> url+= "?dow=ReadData" ;
<li> var xhp = new XMLHttpRequest();
<li> xhp.onload = function() {
<li> demo.innerHTML = xhttp .responseText;  }
<li> xhp.open("GET",url  );
<li> xhp.send();
<li> <<c>/script>
</ol>

<br>

傳回 xhp : <div id="demo"></div>

url+= "?dow=ReadData" ;

var xhp = new XMLHttpRequest();
  xhp.onload = function() {
  //var dd=[] ;

var dd=JSON.parse(xhp.responseText)
  var TxT="";

TxT+= "var dd=JSON.parse(xhp.responseText)";
      TxT+= "<br>dd = " + JSON.stringify(dd) ;
      TxT+= "<br>dd.length = " + dd.length;
      TxT+= "<br>dd[1] = " + dd[1] ;
      TxT+= "<br>dd[1][1] = " + dd[1][1] ;

demo.innerHTML =  TxT;  }

xhp.open("GET",url  );
  xhp.send();

</script>

demo , pre{ 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>

<h3>get Google SpreadSheet content</h3>

<pre>html 程式訪問 google Apps Script，傳回 google 工作表1 內容，
var <R>url</R> = "我的 google Apps Script 應用程式的網址"。
</pre>
<ol>
<li><<c>div id="demo"><<c>/div>

<li><<c>script>
<li><div>var <R>url</R>  ="https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec"
</div><br>
<li> url+= "?dow=ReadData&A1=2&A2=1&B1=3&B2=3" ;
<li> var xhp = new XMLHttpRequest();
<li> xhp.onload = function() {
<li> demo.innerHTML = xhttp .responseText;  }
<li> xhp.open("GET",url  );
<li> xhp.send();
<li> <<c>/script>
</ol>

<br>

傳回 : <div id="demo"></div>

url+= "?dow=ReadData&A1=2&A2=1&B1=3&B2=3" ;
  var xhp = new XMLHttpRequest();
  xhp.onload = function() {
  demo.innerHTML = xhp .responseText;  }

xhp.open("GET",url  );
  xhp.send();

</script>

demo , pre{ 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 #XMLHttpRequest() #blogger #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #doGet(e) #xhp.send() #xhp.open("GET",url ) #JSON.stringify(data) #xhttp .responseText

Google Apps Script 1

<h3>get Google SpreadSheet content</h3>
<table border="1" style="width:100%">
<tbody><tr><td>
<div width="100%"><</c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><<c>/script>

<br>
var appUrl = "apps script appUrl " ;
<tr><td>

parameter = { }  // 讀取 Google 試算表 資訊
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP1"></div>

</td></tr><td>

parameter={ dow:'ReadData' } // 讀取 Google 試算表 內容
<br>$.get(appUrl, parameter, function(data) {.......})
<div id="DP2"></div>

</td></tr><td>
// 讀取 Google 試算表 指定位置內容 <br>
parameter = {dow:'ReadData', A1:2 , A2:1 , B1:3 , B2:3} 
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP3"></div><br>

</td></tr><td>
// 讀取 Google 試算表 指定位置內容 <br>
parameter = {dow:'ReadData', A1:1 , A1:1 , B1:1 , B2:1}  
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP4"></div><br>

</div>

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

function IT(){
parameter = { };
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP1.innerHTML= txt; })

parameter = {dow:'ReadData'}; // 讀取所有內容
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP2.innerHTML= txt; })

parameter = {dow:'ReadData',A1:2,A2:1,B1:3,B2:3};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP3.innerHTML= txt; })

parameter = {dow:'ReadData',A1:1,A2:1,B1:1,B2:1};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP4.innerHTML= txt; })

}
IT();

</script>
<a  href="https://docs.google.com/spreadsheets/d/1loDC9_v5gdeosEd01_S4x619gCmxZS6SF4uRQLo3rOg/edit#gid=0" target="_blank" title="HTML">HTML Google資料庫20240320</a>

td {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>

// 清空 Google 試算表內容
function clearALL(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'clearALL'};
$.get(appUrl, parameter, function(data) {DP() }) ;  }

// 加入 Google 試算表 部份內容
// Sdata 加入內容
// Row=2 var Col=2 加入位置
function setValuesALL(){
DP1.innerHTML= UPDOWN.innerHTML;
var Sdata=[['你','好','嗎'],[2,22,222],[3,33,333],[4,44,444]]
 var Row=2 ; var Col=2 ;
parameter = {dow:'setValuesALL' , Sdata:JSON.stringify(Sdata) ,
             Row:Row , Col:Col  };
$.get(appUrl, parameter, function(data) {DP(); }) ;  }

</script>

<h3>Modify Google SpreadSheet content</h3>

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

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="clearALL()" >清空 Google 試算表內容</button>
<pre>parameter = {dow:'<r>clearALL</r>'}; 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">
<button onclick="setValuesALL()" >加入 Google 試算表 部份內容</button>
<pre><m> // 加入試算表部份內容放入 Sdata 序列物件</m>
var Sdata=[['你','好','嗎'],[2,22,222],[3,33,333],[4,44,444]]
<m> // Row 及 Col 放入試算表位置,如果Row=0放入試算表最底加新一行   </m>
var Row=2 ; var Col=2 ;
parameter = {dow:'<r>setValuesALL</r>' , Sdata:JSON.stringify(DD) 
             Row:Row , Col:Col  };
$.get(appUrl, parameter, function(data) {.....}) ;</pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

// Google 試算表 刪除列,rowIndex:2 插入列在第二行,numRows:3  合共插入2列
function deleteRows(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'deleteRows' , rowIndex:2 , numRows:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

//Google 試算表 插入多個列,rowIndex:2 刪除列在第二行,numRows:3  刪除插入2列
function insertRows(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'insertRows' , rowIndex:2 , numRows:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

</script>

<h3>Modify Google SpreadSheet content</h3>

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

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="insertRows()" >Google 試算表 插入列 </button>
<pre>parameter = {dow:'<r>insertRows</r>' , rowIndex:2 , numRows:2} 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">

<button onclick="deleteRows()" >Google 試算表 刪除多個列</button>
<pre>parameter = {dow:'<r>deleteRows</r>' , rowIndex:2 , numRows:2 };
$.get(appUrl, parameter, function(data) {.....}) ;
<br></pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

// Google 試算表 刪除欄位 [rowIndex:2 刪除第二欄] [numRows:3  合共刪除2欄]
function deleteColumns(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'deleteColumns' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

//Google 試算表 插入欄位, [colIndex:2 第二行插入欄位] [numcol:2  插入2欄]
function insertColumns(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'insertColumns' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

</script>

<h3>Modify Google SpreadSheet content</h3>

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

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="insertColumns()" >Google 試算表 插入多欄位 </button>
<pre>parameter = {{dow:'<r>insertColumns</r>' , colIndex:2 , numcols:2} 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">

<button onclick="deleteColumns()" >Google 試算表 刪除多欄位</button>
<pre>parameter = {dow:'<r>deleteColumns</r>' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {data) {.....}) ;
<br></pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

Edit

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

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

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

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

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

document body appendChild

Blogger width of page

Blogger width of page
修改頁面寬度

隱藏頂部Blogger 導覽列

隱藏 Blogger 標頭內容

Blogger Label select

blogger/mediamanager

Google Apps Script

Google Apps Script 2

Google Apps Script 1

CK General ledger

CSS background

border-style

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

Blogger width of page 修改頁面寬度

隱藏 頂部Blogger 導覽列

隱藏 Blogger 標頭內容

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Blogger width of page
修改頁面寬度

隱藏頂部Blogger 導覽列