|
主题:[分享]你可能用得到的9段CSS代码 [收藏主题] |
tanweichun0202 发表于:2013/7/6 18:42:04 | 只看该作者 查看该作者主题
楼主
一、opacity兼容
.transparent { filter: alpha(opacity=50);/* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } 二、个性化圆角 #container { -webkit-border-top-left-radius: 4px; -webkit-border-top-rightright-radius: 3px; -webkit-border-bottom-rightright-radius: 6px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; } 三、隐藏Logo上的H1文本 h1 { text-indent: -9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url("images/logo.png") no-repeat scroll; } 四、为图片创建拍立得效果边框 img.polaroid { background:#000; border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; width:200px; } 五、全屏背景固定效果 html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 六、内容垂直集中 .container { min-height: 6.5em; display: table-cell; vertical-align: middle; } 七、创建缝合效果 p { position:relative; z-index:1; padding: 10px; margin: 10px; font-size: 21px; line-height: 1.3em; color: #fff; background: #ff0030; -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba (10,10,0,.5); -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } p:before { content: ""; position: absolute; z-index: -1; top: 3px; bottombottom: 3px; left :3px; rightright: 3px; border: 2px dashed #fff; } p a { color: #fff; text-decoration:none; } p a:hover, p a:focus, p a:active { text-decoration:underline; } 八、经典的CSS Clearfix .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } 九、垂直滚动条 这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。 html { height: 101% } |
|
<a href=http://www.xjzjszyj.cn/>新疆职业院校思想政治教育工作网</a> | |
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |