CSS 常用代码
来源:互联网 发布:爆菊感受 知乎 编辑:程序博客网 时间:2024/05/22 16:00
原文链接:http://caibaojian.com/popular-css-snippets.html
来源:前端开发博客
Css背景颜色透明(#ddd)
.liter{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4CDDDDDD', endColorstr='#4CDDDDDD');}:root .liter {filter:none; /*处理IE9浏览器中的滤镜效果*/background-color:rgba(221,221,221,0.3);}
图片垂直居中对齐
第一种:table-cell法
<div class="test_box"><img src="book.jpg" alt="" /></div>
.test_box {display:table-cell;width:200px;height:200px;vertical-align:middle;text-align:center;*float:left;*font-family:simsun;*font-size:200px;*line-height:1;border:1px solid #000000;}.test_box img {vertical-align:middle;}
第二种:span法
<div class="test_box"><span class="hook"></span><a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="" /></a></div>
.test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}.test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}.test_box img {vertical-align:middle;border:0 none;}
css border制作小三角(兼容IE6)
工具请参考这篇文章制作
.triangle {display:inline-block;width:0;height:0;overflow:hidden;line-height:0;font-size:0;vertical-align:middle;border-right:7px solid #000fff;border-left:0 none;border-top:7px solid transparent;border-bottom:7px solid transparent;_color:#FF3FFF;_filter:chroma(color=#FF3FFF);}
CSS固定在底部
CSS代码
/*Sticky Footer Solutionby Steve Hatcher http://stever.cahttp://www.cssstickyfooter.com*/* {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, notvertical margins (top and bottom) to add spacing, else those margins get added to total heightand your footer gets pushed down a bit more, creating vertical scroll bars in the browser */html, body {height: 100%;}#wrap {min-height: 100%;}#main { overflow:auto; padding-bottom: 150px; /* must be same height as the footer */}#footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;}/*Opera Fix*/body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/}/* IMPORTANTYou also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher.<!--[if !IE 7]><style type="text/css"> #wrap {display:table;height:100%}</style>< ![endif]-->*/
HTML代码
<div id="wrap"><div id="main"></div></div><div id="footer"></div>
纯粹的css固定在底部
#footer { position:fixed; left:0px; bottom:0px; height:32px; width:100%; background:#333;}/* IE 6 */* html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}
用CSS包裹内容很长的URL和文本
这个代码片段通过保证文本的包裹元素宽度适应内容的宽度,能够避免很长的文本超出内容区域。
pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */}
用css3创造3D文字
text-shadow属性能帮助你只用CSS创造3D文字。
p.threeD{ text-shadow: -1px 1px 0 #ddd, -2px 2px 0 #c8c8c8, -3px 3px 0 #ccc, -4px 4px 0 #b8b8b8, -4px 4px 0 #bbb, 0px 1px 1px rgba(0,0,0,.4), 0px 2px 2px rgba(0,0,0,.3), -1px 3px 3px rgba(0,0,0,.2), -1px 5px 5px rgba(0,0,0,.1), -2px 8px 8px rgba(0,0,0,.1), -2px 13px 13px rgba(0,0,0,.1) ;}
CSS透明度
div{ opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */}
改变博客中默认选中文本的颜色
::selection { background: #ffb7b7; /* Safari */ color: #ffffff;}::-moz-selection { background: #ffb7b7; /* Firefox */ color: #ffffff;}
多重背景图片
#multiple-images { background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat;}
多栏CSS3
使用css3来创建多栏,它可以自适应网页,不兼容IE
#columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule: 1px solid #c4c8cc;}
文本溢出省略
//code from http://caibaojian.com/popular-css-snippets.html.textoverflow a { display:block; width:120px; margin: 0px 0px 0px 3px; white-space: nowrap; overflow: hidden; float: left; -o-text-overflow: ellipsis; /* for Opera */ text-overflow: ellipsis; /* for IE */}.textoverflow:after{ content: "..."; }/* for Firefox */@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
让IE9以下的版本支持HTML5
在项目中加入以下js代码
// html5 shivif (!+[1,]) { (function() { var tags = [ 'article', 'aside', 'details', 'figcaption', 'figure', 'footer', 'header', 'hgroup', 'menu', 'nav', 'section', 'summary', 'time', 'mark', 'audio', 'video'], i = 0, len = tags.length; for (; i < len; i++) document.createElement(tags[i]); })();}or
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
PNG32透明(IE6)
主要用来兼容IE6,不建议使用,由于这个css代码比较耗内存。·
.some_element { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');}
来源:前端开发博客
阅读全文
0 0
- 常用CSS代码
- CSS常用代码
- CSS常用代码
- css常用代码
- CSS常用代码
- CSS常用代码
- CSS常用代码
- CSS常用重置代码
- css常用代码
- CSS常用代码结构
- 常用css代码
- Css常用代码
- 常用的CSS代码
- css 常用代码
- 常用css代码
- css 常用代码片段
- 常用CSS代码
- CSS常用代码片段
- VEE的机器学习日记(1)
- 百度地图展示有单商家和骑手位置
- 关于美国区appid的纠结之路
- spring boot在maven下的多模块打包
- 网络协议
- CSS 常用代码
- Android O 前期预研之二:HIDL相关介绍
- Spring
- 指定 ClickOnce 应用程序的“开始”菜单名称
- 公告栏轮播,也可用于商品个性垂直轮播展示
- Java-Map
- 设计模式六大原则(6):开闭原则
- Spring Cloud Config服务端配置细节(二)之加密解密
- 基于git的源代码管理模型——git flow