小湯湯筆記: 7月 2011

2011年7月28日星期四

純CSS 下拉式選單

參考：http://ucmic.blogspot.com/2011/04/css-menucssmenu.html

CSS min-height(解決ie6不支援min-height問題)

參考：http://blog.makezine.com/archive/2008/03/easiest-crossbrowser-css-minhe.html

===========css Str============
min-height:768px;
height: auto !important;
height: 768px;
===========css End============

利用!important讓ie6讀不到height:auto(ie6看不懂!improtant)，
其他瀏覽器則會以height: auto !important;為主
而不被第3行語法設定影響。

2011年7月27日星期三

多層選單(css+ jquery)

參考：http://qrayg.com/learn/code/cssmenus/

下載：https://sites.google.com/site/fanlixiazai/home/xiao-tang-tang-bi-ji/CssJqueryMenus.zip?attredirects=0&d=1

因為版型需要一個下拉選單，

所以找到這個範例檔，

將多餘的css拿掉，

只留跟選單相關的css設定，

各瀏覽器支援狀況

Firefox 1.x+ : any OS (works!!!)
IE 5.5+ : Windows (works!!!)
IE Mac : any version, OS 9-X (probably doesn’t work)
Safari 2.0+ : OS X (works!!!)
Safari 1.x : OS X (probably doesn’t work)
Opera 7+ : any OS (works!!!)
Opera 1.x-6.x : any OS (probably doesn’t work)

Reset CSS

參考：http://meyerweb.com/eric/tools/css/reset/

下載：http://meyerweb.com/eric/tools/css/reset/reset.css

將各瀏覽器css樣式設定成統一格式

例：

margin 歸 0
文字大小、行高統一大小

reset.css

==========================Reset CSS Str==========================

/* 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;

}

/* 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;

}

/*clearfix(解決浮動高度問題)*/

/*===========clearfix Str============*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
/*===========clearfix End============*/

==========================Reset CSS End==========================

reset-fonts-grids.css

設定css之前先引入css初始化的css檔，

可以讓各瀏覽器設定統一，

這樣在做美化時也比較不會有問題。

在IE6下，padding和margin要一起設定

例：

只需要padding時
margin要都設為0

參考：http://www.buxianyu.com/2011/01/29/ie6-margin-padding/

clearfix(解決浮動高度問題)

參考：http://blog.yam.com/hanasan/article/34569881

/*===========clearfix Str============*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
/*===========clearfix End============*/

首頁

2011年7月28日 星期四