PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 09 週六 201721:18

  • 表格相關：border-collapse、caption-side、border-spacing


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table border="1" id="table">
<caption>我是表格</caption>
<thead>
<th>aa</th>
<th>bb</th>
<th>cc</th>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td></td>
</tr>
</tbody>
</table>
<br>
<button id="bc">border-collpase</button>
<button id="bs">border-spacing</button>
<button id="cs">caption-side</button>
<button id="ec">empty-cells</button>
<button id="reset">重設</button>
<script type="text/javascript">
$('#bc').click(function(){
$('#table').css('border-collapse','collapse');
});
$('#bs').click(function(){
$('#table').css('border-spacing','+=10');
});
$('#cs').click(function(){
$('#table').css('caption-side','bottom');
});
$('#ec').click(function(){
$('#table').css('empty-cells','hide');
});
$('#reset').click(function(){
$('#table').css('border-collapse','separate');
$('#table').css('border-spacing','2px');
$('#table').css('empty-cells','show');
$('#table').css('caption-side','top');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(3)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201721:18

  • 表格相關：border-collapse、caption-side、border-spacing


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table border="1" id="table">
<caption>我是表格</caption>
<thead>
<th>aa</th>
<th>bb</th>
<th>cc</th>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td></td>
</tr>
</tbody>
</table>
<br>
<button id="bc">border-collpase</button>
<button id="bs">border-spacing</button>
<button id="cs">caption-side</button>
<button id="ec">empty-cells</button>
<button id="reset">重設</button>
<script type="text/javascript">
$('#bc').click(function(){
$('#table').css('border-collapse','collapse');
});
$('#bs').click(function(){
$('#table').css('border-spacing','+=10');
});
$('#cs').click(function(){
$('#table').css('caption-side','bottom');
});
$('#ec').click(function(){
$('#table').css('empty-cells','hide');
});
$('#reset').click(function(){
$('#table').css('border-collapse','separate');
$('#table').css('border-spacing','2px');
$('#table').css('empty-cells','show');
$('#table').css('caption-side','top');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201720:38

  • display:none、opacity:0、visibility:hidden比較


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<img src="https://api.fnkr.net/testimg/200x200/00a/fff/?text=A">
<img src="https://api.fnkr.net/testimg/200x200/0a0/fff/?text=B" id="b">
<img src="https://api.fnkr.net/testimg/200x200/a00/fff/?text=C">
<br>
<button id="dn">display:none</button>
<button id="op">opacity:0</button>
<button id="vh">visibility:hidden</button>
<button id="reset">重設</button>
<script type="text/javascript">
$('#dn').click(function(){
$('#b').css('display','none')
});
$('#op').click(function(){
$('#b').css('opacity','0')
});
$('#vh').click(function(){
$('#b').css('visibility','hidden')
});
$('#reset').click(function(){
$('#b').css({
'display':'inline',
'opacity':'1',
'visibility':'visible'
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201720:38

  • display:none、opacity:0、visibility:hidden比較


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<img src="https://api.fnkr.net/testimg/200x200/00a/fff/?text=A">
<img src="https://api.fnkr.net/testimg/200x200/0a0/fff/?text=B" id="b">
<img src="https://api.fnkr.net/testimg/200x200/a00/fff/?text=C">
<br>
<button id="dn">display:none</button>
<button id="op">opacity:0</button>
<button id="vh">visibility:hidden</button>
<button id="reset">重設</button>
<script type="text/javascript">
$('#dn').click(function(){
$('#b').css('display','none')
});
$('#op').click(function(){
$('#b').css('opacity','0')
});
$('#vh').click(function(){
$('#b').css('visibility','hidden')
});
$('#reset').click(function(){
$('#b').css({
'display':'inline',
'opacity':'1',
'visibility':'visible'
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(125)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201720:19

  • 絕對定位配合clip遮色片


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.imgbecliped{
position: absolute;
clip:rect(0px 200px 200px 0px);
transition: 1s;
}
.imgbecliped:hover{
animation:clip 2s forwards;
transition: 1s;
}
@keyframes clip{
0%{
clip:rect(0px 200px 200px 0px);
}
25%{
clip:rect(50px 200px 200px 0px);
}
50%{
clip:rect(50px 200px 200px 50px);
}
75%{
clip:rect(50px 150px 200px 50px);
}
100%{
clip:rect(50px 150px 150px 50px);
}
}
</style>
</head>
<body>
<img src="https://api.fnkr.net/testimg/200x200/00a/FFF/?text=A" class="imgbecliped">
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201720:19

  • 絕對定位配合clip遮色片


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.imgbecliped{
position: absolute;
clip:rect(0px 200px 200px 0px);
transition: 1s;
}
.imgbecliped:hover{
animation:clip 2s forwards;
transition: 1s;
}
@keyframes clip{
0%{
clip:rect(0px 200px 200px 0px);
}
25%{
clip:rect(50px 200px 200px 0px);
}
50%{
clip:rect(50px 200px 200px 50px);
}
75%{
clip:rect(50px 150px 200px 50px);
}
100%{
clip:rect(50px 150px 150px 50px);
}
}
</style>
</head>
<body>
<img src="https://api.fnkr.net/testimg/200x200/00a/FFF/?text=A" class="imgbecliped">
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(10)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201719:43

  • counter-increment與counter-rest，文章分段可用


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment: section;
content:'段落' counter(section) '：';
}
h2:before{
counter-increment: subsection;
content:counter(section) '-' counter(subsection) '：';
}
</style>
</head>
<body>
<h1>水果</h1>
<h2>蘋果</h2>
<h2>香蕉</h2>
<h2>芭樂</h2>
<h1>季節</h1>
<h2>春</h2>
<h2>夏</h2>
<h2>秋</h2>
<h2>冬</h2>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201719:43

  • counter-increment與counter-rest，文章分段可用


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment: section;
content:'段落' counter(section) '：';
}
h2:before{
counter-increment: subsection;
content:counter(section) '-' counter(subsection) '：';
}
</style>
</head>
<body>
<h1>水果</h1>
<h2>蘋果</h2>
<h2>香蕉</h2>
<h2>芭樂</h2>
<h1>季節</h1>
<h2>春</h2>
<h2>夏</h2>
<h2>秋</h2>
<h2>冬</h2>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(7)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201719:17

  • word-spacing，改變單字間的距離


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.afterwordspacing{
word-spacing: 50px;
}
</style>
</head>
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</span>
<hr>
<span class="afterwordspacing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco </span>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：CSS
▲top
  • 9月 09 週六 201719:17

  • word-spacing，改變單字間的距離


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.afterwordspacing{
word-spacing: 50px;
}
</style>
</head>
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</span>
<hr>
<span class="afterwordspacing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco </span>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS
▲top
«1...24252637»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：