2020年4月2日 星期四

svg

標簽 svg @ 矢量圖形

circle=圓形  cx=X座標  cy=Y座標  r=圓形半徑  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度
<svg width="130%" height="100px">
       <circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
       <circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
       <circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
       <ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" /> 
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="black"
        fill="yellow" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="red"
        fill="blue"  /> 
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="80" height="50" stroke="red"
        stroke-width="3" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="15" ry="15" width="100"
        height="50"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="50" ry="50" width="100"
        height="50"
        style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度 
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
          <polyline  fill="yellow" stroke="red" stroke-width="3"
          points="5 30, 30 60,60 5,90 60,120 30,120 100,
          5 100,5 30" />
</svg>
html.ug5g.com
<svg style="font-size: 20px ;">
       <text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
ug5g.com
<svg style="font-size: 20px ;">
     <defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
          <text x="10" y="100" style="fill:red;">
               <textPath xlink:href="#path1">ug5g.com</textPath>
        </text>
</svg>
https: html.ug5g .com
<svg style="font-size: 20px ;">
        <text x="10" y="20" style="fill:red;">https:
               <tspan x="10" y="45">html.ug5g</tspan>
              <tspan x="10" y="70">.com</tspan>
      </text>
</svg>
00
#html <svg> #html 伸縮矢量圖形
on 沒有留言:
標籤：

HTML Table 表格

HTML Table 表格

HTML Table 表格
﹤table﹥    建立一表格。
﹤caption﹥**標題**﹤/caption﹥
﹤tbody﹥    表格內容開始。
﹤th﹥﹤th/﹥表示表頭單元格
﹤tr﹥﹤/tr﹥ 代表的是一行。
﹤td﹥﹤/td﹥ 代表一列。
﹤/tbody﹥   表格內容完結。
﹤/table﹥   建立完成。
﹤table border="1"﹥邊框
﹤table rules="rows"﹥ 欄位內距距離
      rules=none 沒有線條。
      rules=groups 位於行組和列組之間的線條。
      rules=rows 位於行之間的線條。
      rules=cols 位於列之間的線條。
      rules=all 位於行和列之間的線條。
bgcolor="#00FF00
<table border="1">
<caption>**標題**</caption>
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2
</td></tr>
<tr bgcolor="#00FF00"><td>第二行 欄位 1</td><td>第二行 欄位 2
</td></tr>
</tbody>
</table>
得出
**標題**
第一行 欄位 1第一行 欄位 2
第二行 欄位 1第二行 欄位 2
cellspacing="20" 欄位間的距離
<table border="10" cellspacing="20" width="80%" >
<caption>**標題**</caption>
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
得出
**標題**
第一行 欄位 1第一行 欄位 2
第二行 欄位 1第二行 欄位 2
cellpadding ="20" 欄位內距距離
<table border="10" cellspacing="20" width="80%" >
<caption>**標題**</caption>
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
得出
**標題**
第一行 欄位 1第一行 欄位 2
第二行 欄位 1第二行 欄位 2
colspan="2" 橫 二合併為一

<table border="2" style="width: 80%;">
<caption>colspan="2" 橫 二合併為一</caption>
<tbody>
<tr><td colspan="2" align="center" valign="middle">
橫 二合併為一</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
得出
colspan="2" 橫 二合併為一
橫 二合併為一
第二行 欄位 1第二行 欄位 2
rowspan="2" 直 二合併為一

<table border="2" style="width: 80%;">
<caption>rowspan="2" 直 二合併為一</caption>
<tbody>
<tr><td rowspan="2">直 二合併為一
</td><td>第一行 欄位 1</td></tr>
<tr><td> 第二行 欄位 1</td></tr>
</tbody></table>
得出
rowspan="2" 直 二合併為一
直 二合併為一 第一行 欄位 1
第二行 欄位 1
text-align vertical-align
text-align:left
vertical-align:top 		text-align:center
vertical-align:top 		text-align:right
vertical-align:top
text-align:left
vertical-align:middle 		text-align: center
vertical-align:middle 		text-align:right
vertical-align:middle
text-align:left
vertical-align:bottom 		text-align: center
vertical-align:bottom 		text-align:right
vertical-align:bottom
<table rules="rows">
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 4
<table rules="cols">
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 4
<table rules="all">
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 4
<table rules="none">
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 3
欄位 1欄位 2欄位 4
00
00
00
00
00
#html table 表格
on 沒有留言:
標籤：

HTML img 圖片標籤

HTML img 圖片標籤

<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">
參數 用法說明
src 圖片網址，必要項目。
border 圖片邊框，例如 border="0" 代表邊框為 0。
alt 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width 圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height 圖片高度，例如 height="100px" 代表高度限制在 100px。
width:auto 自動判斷圖片寬度。
<img style="width:auto;" src="https://xxx.jpg" />
width:300px : 將圖片寬度設為 300px。
<img style="width:300px;" src="https://xxx.jpg" />
height: 100px; width: 100px;  將圖片 寬度 高度 設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px ;" />
height: inherit ; width: inherit;  將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit; " /></div>
max-width 及 max-height 設為 100px  ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px; " />
height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="height: 50%; width: 50%; " /></div>
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) :   設定圖片陰影。
<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 );" src="https://xxx.jpg" width="200px" />
#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain;       /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain;            /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain;   /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center;           /*置中*/
background-repeat: no-repeat;         /*背景圖案不重複*/
border:2px solid #000000;               /*邊框樣式與顏色*/
background-color:#CCCCCC;         /*背景的顏色*/}
</style>
#HTML #img 圖片標籤 #html img #HTML 圖片標籤
on 沒有留言:
標籤：

2020年4月1日 星期三

jquery click

00
#jquery click #html click
on 沒有留言:
標籤：

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
 

blur 模糊 blur(0px) 0px 到100px，的百分比控制
sepia 懷舊 sepia(0) 0 or 1，1為元素轉換成黑白影像
invert 負片 invert(0) 0 or 1，1為元素轉換成負片影像
opacity 透明 opacity(1) 0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比 contrast(0) 0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和 saturate(0) 0 to 10， 10為元素轉換成最大飽和度
brightness 亮度 brightness(0) 0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階 grayscale(0) 0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉 hue-rotate(0deg) 0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影 drop-shadow(30px 10px 4px #4444dd) x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色
00
#CSS Filters濾鏡效果 #html Filters濾鏡效果 #blur 模糊 #sepia 懷舊 #invert 負片 #opacity 透明 #contrast 對比 #saturate飽和 #brightness 亮度 #grayscale 灰階 #hue-rotate 色相旋轉 #drop-shadow 下拉陰影
on 沒有留言:
標籤：

box-shadow 方塊陰影

box-shadow 方塊陰影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影的顏色 內部陰影;
值描述
h-shadow必需。水平陰影的位置。允許負值。
v-shadow必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。 測試
spread 可選。陰影的尺寸。 測試
color 可選。陰影的顏色。請參閱 CSS 顏色值。
inset 可選。將外部陰影 (outset) 改為內部陰影。
box-shadow: 20px 20px 5px 5px #888888
box-shadow: 20px -20px 10px 0px #888888;
box-shadow: 20px -20px 10px 0px #91e6fb inset;
border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900
box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;

box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;
#box-shadow 方塊陰影
on 沒有留言:
標籤：

右上角 小時鐘

右上角 小時鐘

00
00
用JavaScript連結Google Sheets #html #網頁計設計 #網頁資料庫 #script #style #網頁 小時鐘; #web page hour clock
on 沒有留言:
標籤：
訂閱： 文章 (Atom)