標籤彙整: jquery
純CSS製作手指點擊動態 – pure css click animation
純CSS製作掃光效果 – pure css light sweep
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