標籤彙整: jquery
純CSS製作手指點擊動態 – pure css click animation
CSS 的 animation屬性可以鬆地製作手指點擊動態。
<PREVIEW>
<HTML>
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a>
純CSS製作掃光效果 – pure css light sweep
CSS 的 animation屬性可以鬆地達到掃光(流光)效果。
<PREVIEW>
<HTML>
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a>
css display:table left、right div不再長短腳 (pure CSS make float div same height)
在做float div的時候常常因為左右邊的內容不一樣多造成div不能一樣高，這篇提供一個解決方案，只要利用display屬性就可以達成左右一樣就的效果。
<preview>
閱讀全文 css display:table left、right div不再長短腳 (pure CSS make float div same height)
jQuery go to top 按鈕 (go to top button)
<html>
<div id=”top”>TOP</div>
<css>
#top{
position: fixed;
right: 50px;
bottom: 20px;
}
<script>
$(‘#top’).click(function () {
$(‘html,body’).animate({
‘scrollTop’ : ‘0px’
}, 1000);
});
CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
css li也可以製作有階層的章節目錄
閱讀全文 CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
CSS ol/ul li 遞減 (css ol/ul li reversed)
最近在做網頁時突然需要遞減排序編號的功能，在html5的架構下<ol>可以直接加reversed屬性，但如果是用<ul>標籤的話，以下也提供一個解決方案。
css方法
ul {
list-style-type: none;
counter-reset: item 142;
/*counter-reset: item(自定變數) 142(項目總數);*/
}
ul > li {
counter-increment: item -1;
}
ul > li:before {
content: counter(item);
}
html5方法
<ol reversed> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol>
CSS 正方形 寬 等於 高 height equals width
CSS製作正方形只要使用:before選取器就可以了
html
<div class="box"> <div class="content">內容文字Content Text</div> </div>
CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math
calc()函式，可以做任何數字形態的屬性值運算
● 數字形態屬性值的屬性 CSS property values with number
寬width
高height
內距padding
外距margin
框border-width
placement top right bottom left
等等etc…
閱讀全文 CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math
自製網頁瀏覽器網址列上的icon圖示 – Website Favicon
要做一個個性化的網站，
瀏覽器網址列上的icon圖示當然是不能少
其實製作的方法很簡單
閱讀全文 自製網頁瀏覽器網址列上的icon圖示 – Website Favicon