HTML/CSS代码片段

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體:   |    |    |  超大  

HTML/CSS代码片段内容简介:本文收集了我常用的CSS代码片段!*reset/** reset **/body, p, ul, ol, dl, dd, th, td, h1, h2, h3, h4, h5, h6, form, input, button, select, textarea { margin: 0; padding: 0; }body { font: 12px/1.5 \5b8b\4f53, arial; }h1, h2, h3, h4, h5, h6 { font-size: 100%; }table{ border-collapse:collapse; border-spacing:0; }textarea { resize: none; overflow: auto; }img { border: 0 none; vertical-align:top; }li { list-style-type: none; }em {font-style:normal; }a { text-decoration:none; }/*clearfix*/.clearfix:before, .clearfix:after { content:""; display:table; }.clearfix:after{ clear:both; }.clearfix{ *zoom:1;}

View Code*select兼容select { height:22px; line-height:18px; padding:2px 0; }

View Code*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;}

View Code*css圆角.radius { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

View Code*水平翻转.flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH();}

View Code*垂直翻转.flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); filter:FlipV();}

View Code*css旋转.rotate90 { filter:PRogid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}

View Code*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')";}

View Code*clearfix清浮动.clearfix:before, .clearfix:after { content:""; display:table; }.clearfix:after{ clear:both; }.clearfix{ *zoom:1;}

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

View Code*纯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;}

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

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航