HTML
1) 在 google 試算表內,功能選項 -> 擴充功能 -> 進入 Apps Script。 2) 進入 Apps Script 開始編輯 Code.gs,裡頭預設有一個名為 myFunction,接著 myFunction 改為 function doGet(e){...}。 3) doGet 包含一個 e 的參數,用來接收 HTML 值 e.parameter 傳來給 Apps Script 給 Code.gs 的值所解析出來的值。 4) 完成程式後,右上有 [部署] -> 新增部署 -> 網頁應用程式 設定 。 5) 得出 https://script.google.com/.........ugJfQq3FxD2-ymA/dev
<table> 建立一表格。 <tbody> 表格內容開始。 <caption> **標題** </caption> <th> </th> 表示表頭單元格 <tr> </tr> 表頭單元格 - 包含表頭信息。 <td> </td> 代表一列。 </tbody> 表格內容完結。 </table> 建立完成。 <table border="1">邊框 <table rules="rows"> 欄位內距距離 rules=none 沒有線條。 rules=groups 位於行組和列組之間的線條。 rules=rows 位於行之間的線條。 rules=cols 位於列之間的線條。 rules=all 位於行和列之間的線條。
<table border="1" style="width:400px"> <tbody> <caption>**標題**</caption> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>
<table border="1" style="width:400px"> <tbody> <tr><th colspan="2">表頭單元格 - 包含表頭信息 </th>></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>
<table border="10" style="width:400px"> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td>></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>
<table border="1" cellspacing="30" style="width:400px"> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td>></td> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>
<table border="1" style="width:400px"> <tbody> <tr><td colspan="2" align="center">橫 二合併為一</td></tr> </td>></td> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>
<table border="1" style="width:400px"> <tbody> <tr><td rowspan="2">直二合併為一</td><td>第一行 欄位 2 </td></tr> <tr><td>第二行 欄位 2 </td></tr> </tbody> </table>
Example 1 <div class="Table"> <!-- similar <table>--> <div class="tr" > <!-- similar <tr>-----> <!-- similar <td> ------> <div class="td alignCenter verticalAlignTop" > text-align:center;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle"> text-align:center;<br>vertical-align:middle;</div> <div class="td alignCenter verticalAlignBottom"> text-align:center;<br>vertical-align: bottom;</div> </div> <div class="tr" > <!-- similar <tr>--> <!-- similar <td> ------> <div class="td alignLeft verticalAlignTop"> text-align:left;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle" > text-align: center;<br>vertical-align: middle;</div> <div class="td alignRight verticalAlignBottom " > text-align:right ;<br>vertical-align: bottom;</div> </div> </div> <style> .Table {display:table;width: 100%;font-size: 23px;} div {border: 1px solid #f00;} .tr {display:table-row;height: 200px; } .td {display:table-cell;width:33%;} .alignCenter {text-align:center;} .alignLeft {text-align:left;} .alignRight {text-align:right;} .verticalAlignTop {vertical-align:top;} .verticalAlignMiddle {vertical-align:middle;} .verticalAlignBottom {vertical-align:bottom;} </style>
<div style="display:table;width:90%;padding:30px" > <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> </div> <span style="position:relative ;background:gold; top:-270px ; left:20px;"> outer Div CSS display:table ; width:90%</span> <style> div{border: 1px solid #f00;height: 200px;} </style>
捲軸控制在網頁設計上算是滿常碰到的問題,尤其當 div 排版法漸成為主流時, 善用 ccs overflow 就能有效的的掌握各種捲軸效果。 overflow: 控制當內容超過顯示區域時捲軸的顯示, overflow-x: x捲軸的顯示。 overflow-y: y捲軸的顯示。 捲軸顯示有四種狀態 ﹕ visible(預設):內容完全顯示不嵌入顯示區域。 auto:內容嵌入顯示區域,並視情況顯示水平與垂直捲軸。 scroll:內容嵌入顯示區域,水平捲軸會出現但視情況顯示可捲動或不可捲動。 hidden:內容嵌入顯示區域,捲軸不會出現。
<style> #outerDiv{overflow:visible overflowx:visible overflowy:visible } </style>
::-webkit-scrollbar { width: 16px; height: 16px; } /* 滾動條角 */ ::-webkit-scrollbar-corner {background-color:black} /* 滾動條軌道 */ ::-webkit-scrollbar-track { background-color: gainsboro ; border: 3px solid black;} /* 滾動條拇指 */ ::-webkit-scrollbar-thumb { background-color: rgb(169,169,169) ; border-radius: 20px; border-style: inset; border-color: rgb(220,220,220) border-width:9px 9px 9px 9px; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(112, 112, 112); } ::-webkit-scrollbar-thumb:active { background-color: rgb(128, 128, 128); } /* Buttons 按鈕:單按鈕*/ ::-webkit-scrollbar-button:single-button { background-color: rgb(64, 64, 64); display: block; background-size: 100px; background-repeat: no-repeat; } /* Up */ ::-webkit-scrollbar-button:single-button:vertical:decrement { border-style: solid; border-width: 0 7.5px 15px 7.5px; border-color: transparent transparent #DCDCDC transparent; } ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { border-style: solid; border-width: 0 7.5px 15px 7.5px; border-color: transparent transparent #007bff transparent; } ::-webkit-scrollbar-button:single-button:vertical:decrement:active { } /* Down */ ::-webkit-scrollbar-button:single-button:vertical:increment { border-style: solid; border-width: 15px 7.5px 0 7.5px; border-color: #DCDCDC transparent transparent transparent; } ::-webkit-scrollbar-button:single-button:vertical:increment:hover { border-style: solid; border-width: 15px 7.5px 0 7.5px; border-color: #007bff transparent transparent transparent; } ::-webkit-scrollbar-button:single-button:vertical:increment:active { } /* Left */ ::-webkit-scrollbar-button:single-button:horizontal:decrement { border-style: solid; border-width: 7.5px 15px 7.5px 0; border-color: transparent #DCDCDC transparent transparent ; } ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { border-style: solid; border-width: 7.5px 15px 7.5px 0; border-color: transparent #007bff transparent transparent ; } ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { } /* Right */ ::-webkit-scrollbar-button:single-button:horizontal:increment { border-style: solid; border-width: 7.5px 0 7.5px 15px; border-color: transparent transparent transparent #DCDCDC; } ::-webkit-scrollbar-button:single-button:horizontal:increment:hover { border-style: solid; border-width: 7.5px 0 7.5px 15px; border-color: transparent transparent transparent #007bff; } ::-webkit-scrollbar-button:single-button:horizontal:increment:active { }
input type="text" <input type="text" size="20" value="123456" /> <input type="text" size="20" value="123456" onclick="this.select()" /> <input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()" /> <input type="text" size="20" value="123456" maxlength="10"/> <input type="text" size="20" value="123456" readonly /> <input type="text" size="20" value="123456" disabled />
input <input type="password" size="20" value="123456" /> <input type="number" size="20" value="123456" /> <input type="password" size="20" value="123456" onmouseover="this.select()" onmouseout="this.blur();" /> <input type="date"> <input type="month" > <input type="datetime-local"> <input type="time" >
input <form action="demo_form.asp"> Quantity (between 1 and 5): <input max="5" min="1" name="quantity" type="number" /> </form> Quantity (between 1 and 5): <form action="demo_form.asp"> <input type="email" /></form> <input type="file" multiple >
<label class="container"> <input type="radio" name="S1" checked>One</label><br> <label class="container"> <input type="radio" name="S1" >Two</label><br> <label class="container"> <input type="radio" name="S1" >Three</label><br> <label class="container"> <input type="radio" name="S1" >Four</label> <style> .container { cursor: pointer; font-size: 22px; } </style>
<label class="container"> <input type="radio" checked>One</label><br> <label class="container"> <input type="radio" >Two</label><br> <label class="container"> <input type="radio" >Three</label><br> <label class="container"> <input type="radio" >Four</label> <style> .container { cursor: pointer; font-size: 22px; } </style>
<script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) </script>
<script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { var TT =document.getElementById("dp"+round.value) ; if(TT.style.opacity == 0.3){ TT.style.opacity=1; TT.style.textDecoration = "initial"; } else{ TT.style.opacity=0.3; round.checked=false ; TT.style.textDecoration = "line-through"; } }) }) </script>
<label class="container"> <input type="checkbox" checked="checked">One</label><br> <label class="container"> <input type="checkbox">Two</label><br> <label class="container"> <input type="checkbox">Three</label><br> <label class="container"> <input type="checkbox">Four</label> <style> .container { cursor: pointer; font-size: 22px; } </style>
<label class="container"> <input type="checkbox" checked="checked">One</label> <label class="container"> <input type="checkbox" >Two</label> <label class="container"> <input type="checkbox" >Three</label> <label class="container"> <input type="checkbox" >Four</label> <style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } </style>
<style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px; font-size: 22px;} </style> <label> <input type="checkbox" > <span>One</span></label> <label> <input type="checkbox" > <span>Two</span></label> <label> <input type="checkbox" > <span>Three</span></label> <label> <input type="checkbox" > <span>Four</span></label>
<datalist id="tickmarks"> <option value="0" > 0 </option> <option value="20"> 20 </option> <option value="40"> 40 </option> <option value="60"> 60 </option> <option value="80"> 80 </option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <style> input { width:400px } <style>
<datalist id="tickmarks"> <option value="0" > 0 </option> <option value="20"> 20 </option> <option value="40"> 40 </option> <option value="60"> 60 </option> <option value="80"> 80 </option> <option value="100">100</option> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } </style>