[HTML+CSS の基礎] コード スニペット_html/css_WEB-ITnose

内容简介：本文收集了我常用的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;}