那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

【HTML+CSS基础】代码片段

【HTML+CSS基础】代码片段

*reset

/** reset **/
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, textarea { margin: 0; }
body { font-family: arial, \5b8b\4f53; font-size: 12px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6, input, textarea, section { font-size: 100%; }
input, textarea, section { font-family: inherit; }
ul, ol { padding-left: 0; list-style-type: none; }
table{ border-collapse:collapse; border-spacing:0; }
th, td { padding: 0; }
em,th,var{font-style:normal;}
img { border: 0 none; vertical-align:top; }
a { text-decoration:none; }
a:hover{text-decoration:underline; }

*input兼容

.ipt {
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
margin: 0;
overflow: visible;
height: 27px;
line-height: 19px;
_line-height: 16px;
width: 80px;
}

*css圆角

.radius
-moz-border-radius:30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

*水平翻转

.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH();
}

*垂直翻转

.flipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
filter:FlipV();
}

*css旋转

.rotate90 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

*css盒阴影

.box_shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=’#000′);
-ms-filter: “progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=’#000′)”;
}

*clearfix清浮动

.clearfix:before, .clearfix:after { content:””; display:table; }
.clearfix:after{ clear:both; }
.clearfix{ *zoom:1;}

*锚点

<a name=”link”>不能为空</a>
<a href=”#link”>锚点链接</a>

*纯CSS三角形

.triangle {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: red;
border-left-color: #fff;
}

*opacity透明

/*opacity*/
.opacity {
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}

*选择文本颜色

/* 自定义文本选择颜色 */
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

*全屏背景

/* 全屏背景 */
.cover {
background: url(‘bg.jpg’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

*强制滚动条

html { height: 101% }

*渐变gradient

/* 渐变 */
.gradient {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}

*font-face

/*font-face*/
@font-face {
font-family: ‘MyWebFont';
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘webfont.ttf’)  format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}
body {
font-family: ‘MyWebFont’, Arial, sans-serif;
}

*png透明

/* png透明 */
.png {
width:200px;
height:100px;
background: url(this.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’this.png’,sizingMethod=’crop’);/* 路径相对于html */
}

*min-height

/* 最小高度 */
.minheight {
min-height: 550px;
height: auto !important;
height: 550px;
}

时间:2014-03-27
分类:CSS , 前端开发
标签:

Comments are closed.

Search