2012年4月3日
文字超出隐藏并显示省略号
摘要： <br /><style type="text/css">.css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/}.css2 { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截断*/ color:#6699ff;border: 阅读全文
posted @ 2012-04-03 21:27 mr.coke 阅读(44575) 评论(4) 推荐(1)
一些上流的CSS3图片样式
摘要： 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。先看下demo问题 (见 demo)看一下demo，请注意在第一行的图片中 阅读全文
posted @ 2012-04-03 00:09 mr.coke 阅读(945) 评论(1) 推荐(0)
47个惊人的CSS3动画演示
摘要： 或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。1.使用jQuery的CSS3时钟2.模拟时钟3.使用方向键旋转的3D盒子4.多个3D盒子(滑入/滑出)5. CSS3折叠6. 自动滚动的视差7. Isocube8. 图片画廊9. 矩阵10. 7个使用CSS3的Javascript效果替代11. 图片滑过效果12. 转动的可乐罐 (通过滚动条控制)PS:这个例子和下面这个严格来说都不是用的CSS3技术，而是复杂的图片和css的backgrou 阅读全文
posted @ 2012-04-03 00:07 mr.coke 阅读(1155) 评论(0) 推荐(0)
2012年4月2日
两列div 右列固定
摘要： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.sidebar{float:right;width:200px;background:#ccc;}.main{overflow:hidden;zoom:1;background 阅读全文
posted @ 2012-04-02 20:15 mr.coke 阅读(191) 评论(0) 推荐(0)
2012年3月24日
IE6双倍边距一招搞定
摘要： 所谓的IE6双倍边距就是指当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。下面的代码： <div style="width:200px;height:50px;background:#ccc;"> <div style="width:100px; height:50px;float:left;margin-left:10px; background:#eee;"></div> </div> IE6显示效果为：IE8显示效果为：可以看得出来左边距在IE6下面明 阅读全文
posted @ 2012-03-24 13:10 mr.coke 阅读(3408) 评论(0) 推荐(0)
教你用FLASH做背景 让页面炫起来
摘要： 教你用FLASH做背景 让页面炫起来 阅读全文
posted @ 2012-03-24 13:09 mr.coke 阅读(217) 评论(0) 推荐(0)
IE6、IE7、IE8支持css3不再是梦
摘要： CSS3很好很强大，例如圆角、阴影、渐变透明、渐变背景等等，但是IE6、IE7、IE8都不支持，现在利用VML可以实现，只需要加载一个小小的文件即可：ie-css3.htc（←点击下载）VML 是什么？VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。ie-css.htc是什么？.htc文件 阅读全文
posted @ 2012-03-24 13:04 mr.coke 阅读(285) 评论(0) 推荐(0)
CSS3制作半透明边框
摘要： 记得以前Facebook有段时间使用了非常多的半透明边框（Facebox），虽然现在不支持了，但是还是值得研究一下。你有可能觉得这样写就行了： #lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); } 然而白色背景会一直扩散到边框上，变成如下的样子：还好我们有CSS3的background-clip属性#lightbox { -moz-background-clip: border; /* Firefox 3.6 */ -webkit-background-clip: border; /* Safar... 阅读全文
posted @ 2012-03-24 13:03 mr.coke 阅读(6361) 评论(0) 推荐(0)
IE6显示png透明背景、图片的方法
摘要： PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。 解决的办法也是有多种，在这里列出常用的其中一种：IE6显示透明PNG背景：使用css滤镜。 background-image:none，filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://images.cnblogs.com/bg.png 例 阅读全文
posted @ 2012-03-24 13:01 mr.coke 阅读(260) 评论(0) 推荐(0)
JS控制CSS样式语法对照
摘要： CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于：.ad{ display:none}.下面就是JS 控制CSS样式表的语法对照：CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottom 阅读全文
posted @ 2012-03-24 12:59 mr.coke 阅读(3829) 评论(1) 推荐(0)