现在的位置: 首页 > 综合 > 正文

经典css

2012年02月03日 ⁄ 综合 ⁄ 共 8192字 ⁄ 字号 评论关闭

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; }

/** 重置文本格式元素 **/
{ 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; 

抱歉!评论已关闭.