【HTML+CSS基础】代码片段

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

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

.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();
}

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

.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:before, .clearfix:after { content:""; display:table; }
.clearfix:after{ clear:both; }
.clearfix{ *zoom:1;}

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

.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 {
    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 {
    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-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 {
    width:200px;
    height:100px;
    background: url(this.png) no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘this.png‘,sizingMethod=‘crop‘);/* 路径相对于html */
}

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