标签:
新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库。先附上该文地址http://segmentfault.com/a/1190000002773955
里面的内容很多我挑了几个经过我验证的来写下
纯css背景噪音,兼容IE8 ,chrome,firefox
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-image: url(data:image/png;base64,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);*/
background-color: #0094d0;}
虽然这部分看起来好大一坨,但是不必忧桑,不必害怕,有用的就是background-image,所谓的背景噪音就是看上去像是电视下雪花的状态,总体来说还是挺有用的,比纯色内容给人感觉丰富些,拿来用用也不错
2.为标题图片隐藏文本
这个实际上是为了seo,在样式上并没有什么卵用。
1 .logo { 2 text-indent: -9999px; 3 margin: 0 auto; 4 width: 320px; 5 height: 320px; 6 background: transparent url("img/6.jpg") no-repeat ; 7 } 8 9 10 <h1 class="logo">标题是否隐藏了呢</h1>
把html和css放一起了,这样是不对的,但是想偷个懒,所以就这样喽,这段有用的是text-indent
3.清除浮动新法
long long ago,清除浮动我用的方法是最经典的
1 .clearfix:after { 2 content: "."; 3 display: block; 4 clear: both; 5 visibility: hidden; 6 line-height: 0; 7 height: 0; 8 } 9 10 .clearfix { display: inline-block; }
看了这个帖子之后立马尝试了一下这个新方法,兼容IE8哦
.clearfix:before,.container:after { content: ""; display: table; } .clearfix:after { clear: both; }
代码减半,效果不打折~但是需要注意的是,要把包含浮动的容器加一个class相当于css中的.container否则不能生效的说~
4.动态加载动画,省略号..变成...
.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } }
使用css3的动画,使包含省略号容器的长度变长变短,无限循环
5、全屏背景
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(‘img/9.jpeg‘) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
嗯,使用了一下这个方法,但是感觉不太理想,因为这个background-size: cover是让背景扩展的无限大直到可以适应浏览器窗口(尽量保持了图片的原有比例),但是图像的某些部分就无法显示在窗口中了,这样如果背景图像中有一些比较重要的要素可能就被截掉了,看不到的说,我推荐使用background-size: 100% 100%,这个属性也是让背景图片铺满全屏,但是不会去截图像而是让图片尽量全部显示,不足是牺牲了图片原来的比例,不过我觉得比少个头之类的好多了
嗯,就这么多啦,有新内容再补充~
标签:
原文地址:http://www.cnblogs.com/dujingjie/p/4578611.html