经典css
z-index:CSS元素层叠级别
值越大,所在的DIV就越在前
图片居中:background-position:center center;
设置table的细边框 CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。
css透明度在各种浏览器下兼容实现
.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.60; /*支持 FireFox 浏览器*/
opacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/
}
CSS DIV高度在火狐自适应问题
text-align:center;
color:#666;
width:500px;
overflow: hidden; /*这个就是导致firefox不自动适应高度的东西 千万别缺*/
border:1px solid #666;
padding:6px;
去掉ul li缩进的简单方法-兼容ie,firefox,chrome
ul{margin:0; padding-left:0}
CSS Hack
var div = document.createElement('div'); div.innerHTML = 'CSS Hack'; div.style.cssText = 'color: blue; -color: red;'; document.body.appendChild(div);
ms-border-radius - Add border-radius support to IE6, IE7 and IE8 圆角
svn: http://ms-border-radius.googlecode.com/svn/trunk
输入框获得焦点后,它的边框会有蓝色发光的效果
input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 4px;
outline: none;
}
input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
解决 ie6-8 无间距的 出现 间距方法:
#margin-left:-0px;
_margin-left:-0px;
查找:
<a \href="[^"]*"
替换为:
<a href="#"
19楼前端reset.css/* 不支持html5 浏览器的块级标签 */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display:block;}
/* 清除margin padding */
html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,lable,textarea,p,blockquote,th,td {margin:0;padding:0;}
/* 在IE6/7中正确显示字体大小、比IE6/7高级浏览器加竖直滚动条防止某些页面没有滚动条时左右闪动、webkit内核及WP7下IE浏览器最小字体 */
html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
/* 默认字体大小行高、颜色 */
body, button, input, select, textarea {font:400 12px/1.5 Simsun,Arial;color:#333;}
/* 粗体 */
h1,h2,h3,h4,h5,h6,b,strong {font-weight:700;font-size:100%;}
/* 列表样式 */
li {list-style:none;}
/* table边距重合、清除单元格间距 */
table {border-spacing:0;border-collapse:collapse;}
/* th小写,居左 */
th {text-align:left;font-weight:400;}
/* img、button清除背景、边框、垂直居中 */
img, button {background:none;border:0 none;vertical-align:middle;}
/* 不需要斜体的标签 */
address,cite,dfn,em,var {font-style:normal;}
/* 默认链接下划线、颜色 */
a,a:visited {text-decoration:none;color:#333;}
a:hover {text-decoration:underline;color:#0657B2;}
/*=E reset */
/*=S lay */
.layout {margin:0 auto;width:980px;}
.iblock {display:inline-block;*display:inline;zoom:1;vertical-align:middle;}
.clearfix {*zoom:1;}
.clearfix:after {content:".";display:block;clear:both;height:0;visibility:hidden;}
taobao reset.css
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
sub { vertical-align: text-bottom; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
display: block;
margin: 0;
padding: 0;
}
mark { background: #ff0; }
/* 居中 */
#header, #content, #footer {
margin-left: auto;
margin-right: auto;
}
/** 布局基础样式 **/
.col-main {
float: left;
width: 100%;
/* bug fix: 主栏没有内容时,在 Firefox 和 Chrome 等浏览器下,布局不对 */
min-height: 1px;
}
.col-sub, .col-extra {
float: left;
/*position: relative; 按需设置,仅在需要时添加 */
}
/** 清除浮动 **/
.layout:after, .main-wrap:after, .col-sub:after, .col-extra:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.layout, .main-wrap, .col-sub, .col-extra {
*zoom: 1;
}
/* 隐藏 */
.hidden { display: none; }
.invisible { visibility: hidden; }
/* 清除浮动 */
.clear:after { content: '\20'; display: block; height: 0; clear: both; }
.clear { *zoom: 1; }
/* inline block */
.inline-block { display: inline-block; *display: inline;
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
sub { vertical-align: text-bottom; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
display: block;
margin: 0;
padding: 0;
}
mark { background: #ff0; }
/* 居中 */
#header, #content, #footer {
margin-left: auto;
margin-right: auto;
}
/** 布局基础样式 **/
.col-main {
float: left;
width: 100%;
/* bug fix: 主栏没有内容时,在 Firefox 和 Chrome 等浏览器下,布局不对 */
min-height: 1px;
}
.col-sub, .col-extra {
float: left;
/*position: relative; 按需设置,仅在需要时添加 */
}
/** 清除浮动 **/
.layout:after, .main-wrap:after, .col-sub:after, .col-extra:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.layout, .main-wrap, .col-sub, .col-extra {
*zoom: 1;
}
/* 隐藏 */
.hidden { display: none; }
.invisible { visibility: hidden; }
/* 清除浮动 */
.clear:after { content: '\20'; display: block; height: 0; clear: both; }
.clear { *zoom: 1; }
/* inline block */
.inline-block { display: inline-block; *display: inline;