/* 2012 07 18 取消所有 focus 的外框線 ， 新增 a:focus { outline: thin dotted; } 參考資料 http://people.opera.com/patrickl/experiments/keyboard/test#outline-on-focus-suppressed-active 修正問題 -webkit-text-size-adjust:100%; 2012 06 11 2012 06 08 取消外框線 ，並且設定垂直對齊為底線， 新增 span, p 的 line-height 為150%; 2012 06 01 如果不是設定成 vertical-align:bottom; 是搭配 display:inline;的文字使用， IE6中文字上面的字會被吃掉，如果全部都設定 。 2012 05 24 總整理 .body 觀念移除，重新整理 2012 05 23 -webkit-text-size-adjust:none; 解決Google Chrome 12px字體大小限制 ，不過如此一來 Chrome Safari 就不能縮放視窗了 修正Chrome Safari 使用input預設字型大小不是16pt 導致使用 em 為單位 時的錯誤 input {font-size:16px; font-size:100%;} 2012 05 16 body * { font-size:1em;z-index:0;} CSS hack IE8 IE9 .test{ color:#09F\0; IE8/9 color:#09F\0/; IE8 only :root .test { color:#963\9; } IE9 only } 2012 05 15 新增 textarea{ resize:none;} 考慮 對齊統一對左 2012 05 07 新增 a, img { display:inline-block; margin:0; padding:0; border: 0; font-size: 100%; font: inherit;} 2012 03 23 .main 為網頁主要內容 針對IE6下達 Hack 2012 03 16 預設字型 中文黑體 還原預設 h1 h2 h3 h4 h5 h6 的字體定義大小 HTML4 預設樣式表 http://pydoing.blogspot.com/2011/08/css-default-style-sheet.html 2012 03 15 修正版 License: none (public domain) */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; /* _vertical-align: top; 20120727刪除 */} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* CSS Rest */ html, body { width: 100%; height: 100%; text-align: center; direction: ltr; overflow: hidden; position: absolute; top: 0; left: 0; } /* 修正Chrome Safari 使用input預設字型大小不是16pt 導致使用 em 為單位 時的錯誤 */ input { font-size: 16px; } /* 搭配 html font-size: 100%; 修正 Setting Body Font Size */ /* http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css */ /* 設定預設字 宋体(simsun/nsimsun) 、 黑体(simhei) 、 楷体(simkai) 「仿宋(simfang)型 */ /* http://blog.xuite.net/jeanson61/xuite/28415261-%5BCSS%E6%A8%A3%E5%BC%8F%E8%AA%9E%E6%B3%95%5D%E5%AD%97%E9%AB%94%E7%9A%84%E8%A8%AD%E5%AE%9A%5B%E7%89%B9%E5%88%A5%E6%98%AF%E4%B8%AD%E6%96%87%E5%AD%97%E5%9E%8B%5D */ /* "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", */ /* "黑体","simhei","宋体","simsun" 會使得 標點符號 位置變成下方 */ /* http://blog.roodo.com/rocksaying/archives/3124027.html */ /* "lucida grande", "tahoma", "verdana" */ body { font-size: 1em; font-family: "lucida grande", "tahoma", "verdana", "Arial", "微軟正黑體", "Microsoft JhengHei", "SimHei", "sans-serif"; font-weight:lighter; -webkit-text-size-adjust:none; } /* -webkit-text-size-adjust:none; 解決Google Chrome 12px字體大小限制 ，不過如此一來 Chrome Safari 就不能縮放視窗了*/ /* 修正IE8 z-index BUG 並且修正 IE8 font-size 錯誤*/ /* 修正IE6 字問題*/ /* 修正左右對齊問題*/ /* zoom: 1;*/ /* * {background-repeat: no-repeat; position: static; font-weight: lighter; letter-spacing: normal; word-spacing: normal; } */ /* 用來解決 IE 6 ul li float 的問題 解決方式 在 ul 中加 zoom:1; */ /* 修正 IE8 background-color: transparent; 變成 pointer-event:nonet; 導致異常*/ /* IE 67 的 inline-block width height 100% 是針對parent */ a, input, textarea, img { width: 100%; height: 100%; background-image: url(../images/transparent.gif)\0/; display: inline-block; *display:inline; *zoom:1; } /* 超連結 外框虛線 底實線 文字顏色全部 移除 */ a { text-decoration: none; border: 0; outline: 0; color: inherit; *behavior:expression(this.onFocus=this.blur()); } /* 修正IE6 超連結指標 以及 hover 功能不正常 */ a * { *cursor: pointer; *filter: alpha(opacity=100);} /* 移除 Chrome 外框線 div:focus */ a:link, a:visited, a:hover, a:active, a:focus, div:focus { text-decoration: none; border: 0; outline: 0; color: inherit; } /* 2012 07 18 取消所有 focus 的外框線 */ /* 新增 鍵盤瀏覽 參考資料 http://people.opera.com/patrickl/experiments/keyboard/test#outline-on-focus-suppressed-active */ /*a:focus { outline: #F60 0.3em solid; }*/ /* 使圖片可以緊密靠邊 */ img { vertical-align:top; } /* 輸入框 不能手動調整大小 */ textarea { resize: none; } /* 表格框線為緊密的 */ /* 不支援 javascript */ noscript { width: 100%; height: 100%; display: block; } table { width: 100%; height: 100%; } /* IE6 FF Chrome Safari 垂直置中 ， IE6 水平置中 td { vertical-align: middle; text-align: center; } /* FF Chorme Safari 水平置中 td > * { margin: auto; } */ /* 階層定義 */ /* pointer-events: auto; 點擊穿透 可用點擊 z-階層下的按鈕 */ /* layerset, fixed, layer, background, controlpanel, mask, benchmark screen 都是div */ /* 還原字型大小 */ h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.75em; } /* 自動斷行 必須定義寬度 */ .linebr { word-break: break-word; word-wrap: break-word; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; white-space: -o-pre-wrap; white-space: -pre-wrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; } .inline-block { display: inline-block; *display:inline; *zoom:1; } /* 層次 修飾詞*/ /* fixed 是固定的位置 , layer 是分層 必須在 position:relative 或者 absoulte 才 有作用 */ .fixed { position: absolute; left: 0; top: 0; } /* screen 以整個螢幕為區塊 可用於 z-層次定義 或者 階層定義 */ .screen { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* .fixed 配合 benchmark 基準使用 .screen 是全螢幕修飾 */ /* 層次 修飾詞*/ /* z-層次定義 */ /* benchmark基準點 作為 其他 fixed 的基準點 通常放在最後面 */ .benchmark { z-index: -1; } /* background 是背景層 通常放置於 body 之後 */ .background { z-index: -2; } /* controlpanel 代表 含有控制項面板 ， 而 mask 是 遮照未包含控制面板 */ .controlpanel, .mask { z-index: 1; } /* z-層次定義 */ /* 圖層定義 */ /* 若要使用 em 來進行layout 則全部*/ /* foam是整個視窗的，當畫面比內容大的時候，會留下空白。我把這些空間稱為foam。當畫面比內容小的時候，就會出現捲軸。 */ .foam { overflow: auto; width: 100%; height: 100%; text-align: center; } /* zoom是用來調整 畫面的縮放的。這部份是要給網頁有邊框使用的。 */ .zoom { overflow: hidden; margin: auto; _margin: 0; position: relative; } /* main是用來網頁的主要畫面呈現部份，然後使用position:relative;是要依此為偏移的依據。但是不該在此出現捲軸，因為這樣會使得畫面改變導致出現捲軸，進而引響畫面。使得position造成偏移。 */ .main { overflow: visible; margin: auto; /* position:relative; */ } /* 圖層定義 */ .layerset { position: relative; left: 0; top: 0; width: 100%; height: 100%; } .layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } img.layer{ display:inline-block; *display:inline; *zoom:1;} /* popup */ .popuparea { display: none;} .popupbg { height:100%; height:100%; background-color:#000000; opacity:0.9; filter: alpha(opacity=90);} .popup {height:auto; width:auto; margin:auto; } /* popup */ /* 超連結定義 */ /* 設定於 div.link-layer 的狀態列表 */ .link-state-current, .link-state-hover, .link-state-visited {} .link-layer { position: relative; } .link-hover, .link-current, .link-visited, .link-static, .link-hover img, .link-current img, .link-visited img, .link-static img { position: absolute; } .link-layer, .link-hover, .link-current, .link-visited, .link-static, .link-hover img, .link-current img, .link-visited img, .link-static img { left: 0; top: 0; width: 100%; height: 100%; } .link-hover, .link-current, .link-visited { opacity: 0; display: none\0/IE8+9; *display:none;} /* IE 6789 都不支援漸變 transition IE 9 開始支援 opacity 所以 IE 6789 使用 display 來控制顯示 雖然 IE9 使用 opacity 來控制，但是沒有漸變效果 也是一樣 雖然 IE8以後支援 Seletor > Children 但是關於 Children 的項目卻沒有隱藏，所以才將整個 display 設定成 none 然後再還原。 這裡定義了所有 .link-state- 的 相關動作。 */ .link-layer > a { display: inline-block; *display:inline;*zoom:1;} .link-state-current > div.link-current, .link-state-hover > div.link-hover, .link-state-visited > div.link-visited, .link-layer:hover > div.link-hover, div.link-hover:hover { opacity: 1; display: block\0/IE8+9; *display:block; } .link-state-current > img.link-current, .link-state-hover > img.link-hover, .link-state-visited > img.link-visited, .link-layer:hover > img.link-hover, img.link-hover:hover { opacity: 1; display: inline-block\0/IE8+9; *display: inline-block; *display:inline; *zoom:1; } /* IE 6 7 不支援 Seletor > Children 所以特意使用下列 Seletor 效率比較低, IE 6 7 8 都只用 display 做控制。 */ .link-state-current div.link-current, .link-state-hover div.link-hover, .link-state-visited div.link-visited { *display: block;} .link-state-current img.link-current, .link-state-hover img.link-hover, .link-state-visited img.link-visited { *display: inline-block; *display:inline; *zoom:1; } /* 圖形重疊切換、文字可擴展、文字重疊切換(class加上layer) 連結 */ /* 禁止使用 children p 若要有段落 請用
*/ .link-a { position: relative; } .link-a img { position: absolute; } /* IE8 以前 .link-a 的children span 必須為 inline-block 不然無法顯示 */ .link-a span { display: inline-block; *display:inline; *zoom:1; } .link-a, .link-a img { top: 0; left: 0; width: 100%; height: 100%; display: inline-block; *display:inline;*zoom:1;} .link-a .link-hover { opacity: 0; filter: alpha(opacity=0); } .link-a:hover .link-hover { opacity: 1; filter: alpha(opacity=100); } .link-a .link-no-hover { opacity: 1; filter: alpha(opacity=100); } .link-a:hover .link-no-hover { opacity: 0; filter: alpha(opacity=0); } /* 用於文字交疊切換 的 區塊漸變 */ .link-a .link-hover-area {display:none; visibility: hidden; } .link-a:hover .link-hover-area { display: inline-block; *display:inline;*zoom:1;} .link-a .link-no-hover-area {visibility: hidden; display:inline-block; *display:inline;*zoom:1; } .link-a:hover .link-no-hover-area { display:none; } /* 用於圖片區塊漸變 */ .link-a .link-area{} /* transition */ .link-class-group a, a.link-class,.link-a ,.link-a span,.link-a img, .link-a .link-no-hover, .link-a .link-hover,.link-a .link-area, .link-layer > .link-hover, .link-layer > .link-current, .link-layer > .link-visited { -webkit-transition: all 0.6s linear; /* Saf3.2+, Chrome */ -moz-transition: all 0.6s linear; /* Firefox 4-15 */ -o-transition: all 0.6s linear; /* Opera 10.5+ */ transition: all 0.6s linear; /* Firefox 16+ */ }