CSS+HTML筆記

= = 完全沒發現弱雞IE, Edge 無法顯示svg圖檔正常大小 一測真是昏倒 查了一些資料 發現最快方式 加寫 img {     width:100% ; } 即可解決 但是我原本檔案有套 bootstrap 所以圖檔顯示 有變大一些

https://tympanus.net/Development/HeaderEffects/ 網頁展示向下捲動時導覽列選單會向上捲動 持續向下捲動會隱藏主選單 #此效果不支援 IE 程式碼資料 https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

https://wordmark.it/ 進入網站後按照提示 只需要輸入幾個字母按 Enter 就會依照輸入的字母 顯示幕前電腦內擁有的字型範例

http://www.playpcesor.com/2015/02/smore-dm.html

HTML5 video的控制作法 比如背景滿版影片 或是不同的play bar plug-in 等 http://www.1stwebdesigner.com/html5-video-easy-way/

http://www.1stwebdesigner.com/image-caption-animation-css3/

http://www.1stwebdesigner.com/

http://www.1stwebdesigner.com/create-different-shapes-css/

http://sasstocss.appspot.com/

http://css2sass.herokuapp.com/ 使用說明 http://www.slideshare.net/newstory0113/csssass

http://pepsized.com/how-to-recreate-the-new-e-bay-site-scrolling-effect/?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_33&utm_medium=web

http://caniuse.com/#index

http://www.1stwebdesigner.com/infinite-scrolling-tutorial/

http://www.1stwebdesigner.com/50-awesome-css3-animations/

html5shiv 是一段讓 IE6 IE7 IE8 支援 HTML5 標籤的 JavaScript 完整的程式碼請參考 html5shiv/src/html5shiv.js - aFarkas's gitHub 簡單講HTML5shiv 利用了一個小 hack 讓 IE6 IE7 IE8 支援不支援的標籤。 使用時建議用 IE Conditional comment 載入 html5shiv ： <!--[if lt IE 8]> <script src="html5shiv.js"></script> <![endif]-->

需要付費，免費測試只有30分鐘 但是功能強大包含各個手機平台瀏覽器都包含在內 http://www.browserstack.com/ IE需要付費，其他瀏覽器不用 只有桌機瀏覽器 https://browserling.com/ 完全free，有多國語言支援包含繁中可下載安裝 支援 Trident(IE), Gecko(FireFox), WebKit( Chrome和Safari )三種引擎 包含ios(iPhone, iPad)與Android平台 但須另外下載安裝 http://www.lunascape.tv/ 微軟官方 https://www.modern.ie/zh-tw 免費桌機瀏覽器 Linux, Windows, Mac OS http://browsershots.org/ 免費基本功能桌機瀏覽器測試 ....... 進階則需付費 https://spoon.net/browsers/ email內瀏覽網頁(edm)正不正常 這在國內實在很需要啊~~~~ 跨桌機瀏覽器，需要付費 http://litmus.com/email-testing 其他還有很多............... 要錢的 不想寫了....

yahoo search工程師 http://www.slideshare.net/demofan/fe-1 前端資源懶人包說明 - 高雄前端社群 https://www.facebook.com/notes/10152095506555563/

關於OOCSS, SMACSS, BEM http://www.slideshare.net/kurotanshi/css-oocss-smacss-bem

怎樣用照片製作 2.5D 視差效果？ 不用寫程式喔!!!! http://www.photoblog.hk/wordpress/64083/25d_parallax

http://www.webjx.com/javascript/jsajax-21435.html

jQuery.bPopup.js http://dinbror.dk/bpopup/

http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm

http://www.onextrapixel.com/2013/12/10/30-beautifully-designed-sites-using-horizontal-or-vertical-infinite-scrolling/