MAC使用BetterTouchTool手勢開啟設定
使用BetterTouchTool會發現設定完手勢以後會無法產生作用，是因為沒有將原本OS的雙指功能打開，請按照以下圖示設定應該就可以正確使用了。 記得這邊的系統偏好設定要打開
發表文章
到達頁面DIV區域增加事件
//區域GA監測 //監測第一區 var a = 0; var area_height_a = $('.head_full').outerHeight(); $(document).bind('scroll',function(){ if (($(window).scrollTop() > area_height_a) && (a == 0)) { console.log('免費索取試用') ga('send', 'event', 'trialdrink_201708', 'click', 'scroll_免費索取試用'); a = 1; } }) //監測第二區 var b = 0; var area_height_b = $('#freedrink').outerHeight(); $(document).bind('scroll',function(){ if (($(window).scrollTop() > area_height_b) && (b == 0)) { console.log('營養管理新配方') ga('send', 'event', 'trialdrink_201708', 'click', 'scroll_營養管理新配方'); b = 1; } }) //監測第三區 var c = 0; var area_height_c = $('#freedrink').outerHeight() + $('#newformula').outerHeight(); $(document).bind('scroll',function(){ if (($(window).scrollTop() > area_height_c) && (c == 0)...
input css
.nput { width: 100%; height: 45px; padding: 0 8px; border: 1px solid #bebebe; outline: none; font-size: 14px; -webkit-border: 1px solid #ffd0ad; -moz-border: 1px solid #ffd0ad; -webkit-appearance: none; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
CSS手機橫向字體不放大
< style type = "text/css" > body { -webkit-text-size-adjust:100%;/*手機橫向不放大*/ overflow-x:hidden; } < / style >
MAC顯示隱藏檔案
打開「Terminal終端機」，輸入以下指令。 defaults write com.apple.finder AppleShowAllFiles TRUE;\killall Finder 要取消顯示 defaults write com.apple.finder AppleShowAllFiles FALSE;\killall Finder
MAC刪除及防止出現.DS_Store 檔案
打開「Terminal終端機」，輸入以下指令，重開Mac即可生效。 step1-禁止生成（請耐心等待完成） defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool TRUE step2-刪除已存在（要輸入密碼，請耐心等待完成） sudo find . -name ".DS_Store" -depth -exec rm {} \; step3-重新開機 step4-用keak壓縮（可以設定密碼）
textarea禁止換行、不顯示捲軸
< style type = "text/css" > textarea { white-space: nowrap; /* 禁止換行 */ overflow: hidden; /* 不顯示捲軸 */ resize:none; /* 禁止瀏覽器拖放區塊大小 */ } < / style > <!-- 使用onkeydown事件讓Enter鍵失效 --> < textarea onkeydown = "if(event.keyCode == 13) return false;" > I'm Textarea!! < / textarea >
SCSS DEMO
//Variables 變數,使用$作為開頭當參數 scss: $linkcolor:#ff0000; $linksize:15px; .font_link{ color: $linkcolor; font-size: $linksize; } css: .font_link { color:red; font-size:15px; } //Nesting 巢狀結構 scss: ul{ margin: 0px; li{ padding: 0px; .face{ width: 100%; } &.eye{ width: 100%; } } } css: ul { margin:0; } ul li { padding:0; } ul li .face { width:100%; } ul li.eye { width:100%; } //（@include）Mixins ,其實就像function一樣使用，還可以帶參數 scss: @mixin boxA{ width: 100%; padding: 0px; } #boxAA{ @include boxA; } @mixin boxB($paddinga: 100%){ padding: $paddinga; } #boxBB{ @include boxB(50%); } css: #boxAA { width:100%; padding:0; } #boxBB { padding:50%; } //（@extend）繼承 scss: .red_color{ color: red; font-size: 12px; } .red_box{ @extend .red_color; } css: .red_color,.red_box { color:red; font-size:12px; }
スーパーカブ 「50年の感謝」篇
スーパーカブ 「50年の感謝」篇 (新聞広告 2008年8月掲載) スーパーカブ。 1958年8月1日生まれ。その横顔。 「初めて乗ったバイクはカブだった」「エンジン音で父の帰りがすぐにわかった」「祖父と親父と俺、共通の話題はいつもカブ」「親父が譲ってくれたもので、唯一カッコイイもの」「カブを乗り潰し、またカブに乗り替えた」･･･ここにご紹介したユーザーの声は、ほんの一部。語るなかでみなさん「カブとの出会いは･･･」という言い方をよくされます。まるで親友のよう。発売以来50年、世界160カ国、生産累計台数6,000万台を突破。その実績を作り上げたのは、まさに長年大切にお乗りいただいた一人ひとりの思いです。これからもカブの価値は色褪せることなく、受け継がれていくでしょう。過去、現在、そして未来へ。スーパーカブは、時代を超えて駆け巡る。 スーパーカブ 「50年の感謝」篇 (ポスター広告 2008年8月制作) 走り続けてる？ 長く走り続けていれば、 うまくいかないこともあるだろう。投げ出したいこともあるだろう。 でもそこであきらめてしまっては何も作り出せない。 新しいものは生まれてこない。 無理？無理だからやるんだ。限界と思った時点からが勝負だ。 こうやってみたらどうだ。こう考えてみたらどうだ。 すべての失敗は、成功の途中。答えは、必ずある。 そのことをほら、スーパーカブが証明してくれているじゃないか。 50年の感謝の気持ちは、このカブを超えることで、伝えよう。 Hondaの流儀としてね。 http://www.honda.co.jp/message/history/data/other_0829_cub.html
讓IE9以前版本正常運作html5+css3
讓ie認得html5標籤，加在</head>之前 <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 遇到舊版ie就讀取專用的css <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> CSS就可以這樣寫： .ie6 xxx {}; .ie7 xxx {};
GA監測相關設定
Google官方介紹 https://developers.google.com/analytics/devguides/collection/analyticsjs/events 先在<head>跟</head>之間塞入GA Code <!-- GA CODE --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-69752022-1', 'auto'); ga('send', 'pageview'); </script> <!-- /GA CODE --> 一般按鈕範例 <a href="#TVC" onClick="ga('send', 'event', 'event_name', 'PC', 'btn_TVC');">按鈕名稱</a> 分享按鈕範例（將分享跟監測語法寫在一起，GA Code一定要放前面，最後要加 return false; 才不會執行#號） <a href="#" onClick="ga('send', 'event...
設計相關資源連結
facebook 圖片規範 https://www.facebook.com/help/492441920771107/ GA Click https://developers.google.com/analytics/devguides/collection/analyticsjs/events Easing函數 http://easings.net/zh-tw youtube api http://css-tricks.com/play-button-youtube-and-vimeo-api/ jquery-plugins http://jquery-plugins.net/ http://tympanus.net/codrops/ 刷新網頁範例 http://jun1986.iteye.com/blog/1176909 Google Fonts http://www.google.com/fonts CSS3產生器 http://www.css3maker.com/box-shadow.html Google Maps JavaScript API v3 https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-tw 設定精靈 http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html Google Maps 顏色設定 https://developers.google.com/maps/documentation/javascript/styling?hl=zh-tw google網站管理員工具 https://www.google.com/webmasters/tools Google search產生器 https://www.google.com/cse/create/new 建立sitemap工具網站 http://www.xml-sitemaps.com/ QR code產生器 http://azonmobile.com/qrcode-generator TweenMax h...
RESPONSIVE WEB DESIGN
Media Queries <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 方法1：全部的使用者都會載入這裡的 CSS。 @media screen and (min-width: 1200px) { // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。 } @media screen and (min-width: 768px) and (max-width: 979px) { // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。 } @media screen and (max-width: 767px) { // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。 } @media screen and (max-device-width: 480px) { // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 } 方法2： <link rel="stylesheet" type="text/css" href="all.css" media="screen"> <link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)"> <link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)"> <link rel="stylesheet" type=...
jQuery
[jQuery] 錨點滑動 $('#float_banner').click(function(){ $('html,body').animate({scrollTop:$('.game_full').offset().top}, 1200, 'easeOutQuart');}); [jQuery] 刪除元素 及 清空元素 刪除元素 $("#div1").remove(); 清空元素 $("#div1").empty(); [jQuery]on() 來綁定事件 $(document).on('click', '#my_selector', function(){ }); [jQuery] 資料載入中的loading等待畫面 $(function(){ $("#div_loading").ajaxStart(function(){ $(this).show(); $("#div_content").hide(); }).ajaxStop(function(){ $(this).hide(); $("#div_content").show(); }); }); html的部分： <div id="div_loading"> <img src="load.gif" /> </div> <div id="div_content"> 網頁主內容 </div>
CSS常用但又很容易忘記的語法
[HTML][PHP] 強制使用者重新整理 與 清除cache 每次在設計網頁時，常見到的網頁更新了~但是客戶看網頁的時候還是看到舊版的網頁，為了避免跟客戶溝通個老半天，所以我們可以將網頁加上一段語法讓網頁不被暫存，這樣每次看到的就會是最新的資訊了~也可以免除客戶老是抱怨要去清除暫存檔的麻煩。 有需要者，請把 <meta http-equiv="pragma" content="no-cache"> 加在網頁的<head>這裡</head>就可以囉 如果網頁裡面有兩個以上的 frame (框架頁) ，有時候即便網頁設計師改變了框架頁中的圖片，但少數使用者，仍然會因為快取的關係而顯示舊的圖片，這時候，我們就必須強制清除他們的快取後重新整理網頁... PHP 程式碼：(清cache) header("Expires: Mon, 26 Jul 1990 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); HTML 程式碼：(重新整理) <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0...