✍ 📁 🙈 🙉 🙊

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

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

HTML Table

<table>標簽定義 HTML 表格。

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>

<table rules="rows" style="width:95%" >
<caption><<c>table rules="rows" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="cols" style="width:95%" >
<caption><<c>table rules="cols" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

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

<table rules="all" style="width:95%" >
<caption><<c>table rules="all" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="none" style="width:95%" >
<caption><<c>table rules="none" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</rd></tr></tbody></table>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

<pre><bb>input type="text"</bb>

<<c>input type="text" size="20" value="123456" />
<input type="text" size="20" value="123456" />
<hr>
<<c>input type="text" size="20" value="123456" <r>onclick="this.select()"</r> />
<input type="text" size="20" value="123456" onclick="this.select()"   />
<hr>
<<c>input type="text" size="20" value="123456" <r>onchange="this.select()"</r><b> onclick="this.select()"</b>  />
<input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()"  />
<hr>
<<c>input type="text" size="20" value="123456" <r>maxlength="10"</r>/>
<input type="text" size="20" value="123456" maxlength="10"/>
<hr>
<<c>input type="text" size="20" value="123456" <r>readonly</r> />
<input type="text" size="20" value="123456" readonly />
<hr>
<<c>input type="text"  size="20"  value="123456" <r>disabled</r> />
<input type="text"  size="20"  value="123456" disabled />
<hr>
<<c>input type="text" value="123" <r>onchange="alert(this.value)"</r> />
<input type="text" value="123" onchange="alert(this.value)" />
</pre>

<pre><bb>input  </bb>

<<c>input <r>type="password"</r> size="20" value="123456"  />
<input type="password" size="20" value="123456"  /> 
<hr>
<<c>input <r>type="number"</r> size="20"  value="123456"  />
<input type="number" size="20"  value="123456"  />
<hr>
<<c>input type="password" size="20" value="123456" <r>onmouseover="this.select()"</r> <b>onmouseout="this.blur();"</b> />
<input type="password" size="20" value="123456" onmouseover="this.select()"   onmouseout="this.blur();" />
<hr>
<<c>input type="date">
<input type="date">
<hr>
<<C>input type="month" >
<input type="month" >
<hr>
<<c>input type="datetime-local">
<input type="datetime-local">
<hr>
<<c>input type="time" >
<input type="time" >
<hr>
<<c>input type="color" >
<input type="color" >
</pre>

Edit

#html #網頁格式 #script #style #div #html input #html input text

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS padding

CSS word-wrap

JSON format

HTML Table

<table>標簽定義 HTML 表格。

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS padding

CSS word-wrap

JSON format

HTML Table

<table>標簽定義 HTML 表格。

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單