- Oct 25 Fri 2019 10:50
-
網頁測速工具
- Oct 25 Fri 2019 10:33
-
圖片延遲載入套件 Lazyload 2.x
讓圖片延遲載入，加快網頁開啟速度，為2.x版本使用方式:
1.頁面載入Jquery與Lazyload2.x版本js:
<script src="/JQuery/1.11.3/jquery.min.js" defer></script>
<script src=/lazyload-2.x/lazyload.min.js" defer></script>
- Apr 11 Wed 2018 18:19
-
jquery 圖表 chart.js
- Apr 11 Wed 2018 18:17
-
jquery跑馬燈套件
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
CSS 样式
/**
- Mar 21 Wed 2018 17:01
-
Jquery 頁籤
參考自男丁格爾
<script>
$(function(){
$('#recommendWork').each(function(){
var $tabList =$(this).find('.tabs-nav'), //Tab list
- Mar 08 Thu 2018 10:06
-
JQuery 取得視窗寬度
jQuery $(window).resize 視窗被調整過時，運行此函數，再使用$(window).width()取得目前遊覽器視窗寬度。
$(document).ready(function(){
$(window).resize(function() {
var wdth=$(window).width();
$("span").text(wdth);
- Jan 26 Fri 2018 16:48
-
css 合併儲存格
橫向合併: <td colspan="要橫跨的列數">
<table border="1" cellpadding="5">
<tr>
<tdcolspan="2">使用了 colspan 的欄位
</td>
- Jan 26 Fri 2018 14:27
-
bootstrap3 關閉響應式布局
據官方文件說明如下:
1.移除 此 CSS 文檔中提到的設置瀏覽器窗口（viewport）的標籤：<meta>。
2.通過為 .container 設置一個width 值從而覆蓋框架的默認任 width 設置，例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的後面。
注意，如果你把它放到媒體查詢中，也可以略去 !important 。
3.如果使用了導行列，需要移除所有導行列的摺疊和展開形為。
- Jan 12 Fri 2018 13:52
-
Bootstrap3 display:table 之間隙調整
上一篇說到使用 display:table 讓div達城等高，但使用之後無法用margin來調整div之間的間隙。
如需要調整間隙，需要在display:table-cell的父層，也就是display:table這層加上 border-collapse 跟 border-spacing 。
css:
.row {
- Jan 12 Fri 2018 11:24
-
bootstrap3 使div等高
- Dec 13 Wed 2017 16:42
-
div 垂直置中
利用CSS transform屬性中的 translateY 來改變垂直位移
再利用position:relative 設定 top屬性，配合使物件可以垂直置中
<div class="col-xs-4 recommendPic">
<img src="/template/hw/pic/obj2243009_1.jpg" >
</div>
- Nov 28 Tue 2017 10:15
-
用clip-path繪製純CSS圖形
製作網站: http://bennettfeely.com/clippy/
注意事項:
- 使用 clip-path 要從同一個方向繪製，如果順時針繪製就一律順時針，逆時針就一律逆時針，因為 polygon 是一個連續的線段，若線段彼此有交集，面積區域就會有相減的狀況發生 ( 當然如果這是你要的效果就無妨了 )。
- 如果繪製時採用「比例」的方式繪製，長寬就必須要先行設定，不然有可能繪製出來的長寬和我們想像的就會有落差，使用「像素」繪製就沒有這種問題。
