CSS如何设置div半透明效果:设置元素的透明度在很多应用中都有使用，下面就介绍一下如何设置一个元素为半透明，其他的透明效果自己衍伸就可以了。代码实例如下: 蚂蚁部落div{ filter:alpha(opacity=50); opacity:0.5; width:100px; height:100px; background-color:green;} opacity属性所以标准浏览器都支持，但是IE8和IE8以下浏览器不支持此属性，于是就使用filter:alpha(opacity=50)进行...
CSS实现的柱状图效果实例代码:柱状图一般用于数据统，比较直观人性化，下面就简单介绍一下如何使用CSS实现此效果。代码实例如下: 蚂蚁部落#wrap { position:relative; width:500px; height:600px;}#wrap div { width:15px; position:absolute; bottom:5px; background:#f00;} 以上代码非常的简单就是采用绝对定位，控制div的位置，这样就实现了并排效果。 原文地址是:http://ww...
纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一，当前的此效果一般哟结合js实现，本章节介绍一个使用纯CSS实现的二级下拉菜单效果，希望能够给需要的朋友带来一定的帮助，不过此代码也有一点浏览器兼容问题，那就是在IE6中不兼容。代码如下: 蚂蚁部落ul{ padding:0; font:15px "微软雅黑";}.item{ width:100px; padding:0 5px; border:solid 1px #eee; display:block; float:left}.item u...
CSS3实现的具有闪烁动画效果的导航菜单:闪烁效果的导航菜单，不适用CSS3是比较难以实现的，但是CSS3又具有很大的浏览器兼容性问题，当前使用还不够多，不过在未来肯定会大放光彩的，因为较少的代码就可以实现绚丽的效果。代码实例如下: 蚂蚁部落*{ margin:0; padding:0; list-style:none; font-style:normal; text-decoration:none; font-family:"微软雅黑";}.nav{ overflow:hidden; zoom:1;}.nav li{ float...
CSS实现带有三角小箭头的矩形效果:现在比较流行带有小箭头的矩形效果，比如鼠标放上去弹出的提示效果，还有微信类似的对话内容等，从视觉上较为美观，也比较人性化，如果是CSS3的话比较容易实现，但是当前还存在着很大的浏览器兼容性，下面介绍一种能够兼容所有的浏览器的代码。代码如下: 蚂蚁部落.w { width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-a...
CSS实现的带有箭头的矩形效果实例代码:带有箭头的矩形效果现在应用非常的广泛，例如危险的信息是带有箭头矩形效果，当然它们的实现原理和咱们是不一样的，在网页中当然也有这样的应用，例如弹出信息提示说明，可以用箭头用来作为方位提示，下面就用实例代码简单介绍一下。代码实例如下: 三种纯CSS实现三角形的方法 .message-box { position:relative; width:240px; height:60px; line-height:60px; ...
div css三列布局效果实例代码:三列布局在是比较中规中矩的布局之一，大量的网站都有应用，也是初学者必须要掌握的布局方式之一，下面就是一个三列布局的实例代码，仅供参考之用，希望对初学者有一定的帮助，代码实例如下: 三列布局效果代码实例* { padding:0px; margin:0px;}body { background-color:#e1ddd9;}h1 { font-size:11px; text-align:center; color:#564b47; background-color:#90897a;}strong...
《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。 问题 半透明颜色的一种应用是，使用它们作为背景。在照片或者颜色比较复杂的背景下，通过降低对比度，提高文本的可读性。结果非常有效，但是阅读起来仍然不是那么好，特别是非常低透明度的颜色或非常杂乱的...
CSS如何实现多行文本垂直居中效果:想要实现单行文本在元素中垂直居中，非常的简单，只要将元素的line-height和height属性值设置为相同即可，例如: line-height:30px;height:30px; 但是要设置多行文本垂直居中效果，就稍稍费一些周折了，代码如下: 蚂蚁部落.vcenter { width:100px; height:102px; vertical-align:middle; display:table-cell; overflow:hidden; background:red;}...
css实现边框阴影效果:有时候阴影边框在一些效果中能够有效的提高美观度，下面就介绍一下如何利用css实现此效果。代码如下: 蚂蚁部落.thediv{ width:250px; height:100px; border:#909090 1px solid; background:#fff; color:#333; filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090, direction=120, strength=3);/*ie*/ -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-sh...
CSS如何实现div的透明效果:在通常情况下设置div的透明度可以使用以下代码： filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 以上代码可以将div设置为半透明，但是遗憾的是，IE6浏览器并不支持opacity属性。 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12681 更多内容可以参阅:http://www.softwhy.com/divcss/
CSS3实现的3D旋转效果:由于CSS3的出现，实现3D动画效果也更为轻松便捷，下面就是一段能够实现3D旋转效果的代码，希望对大家能够带来参考作用。代码如下: 蚂蚁部落* { font-size:14px; color:#fff; padding:0; margin:0;}#container { position:relative; height 300px; width:300px; -webkit-perspective:500; margin-top:200px; margin-right:auto; margin-left:auto;}#parent { margin:10px; widt...
纯CSS实现单击锚点平滑切换的效果 22.50注：貌似自己错的有点离谱了o(╯□╰)o 大家先别看了有时想实现一个功能，比如想让页面不出现滚动条，但是却能装下更多的东西，这个时候我们会对某个容器设置overflow: hidden，然后通过锚点来实现单击切换页面（其实只是控制显示的内容）的效果。但是通过锚点来跳到指定内容的不足之处在于，没有什么过渡效果，很突兀的就跳到了目标点。当然，也可以通过JS或者jQuery来实现自己想要的动态...
CSS3实现的页面反转效果:页面反转效果在实际应用中不太常见，不过也并非没有，下面分享一段利用CSS3实现的此效果，寄希望能够给需要的朋友带来一定的帮助，代码如下: 蚂蚁部落html{filter:fliph}body { -webkit-transform:rotateY(180deg); -moz-transform:skew(0deg, 180deg) scale(-1, 1); -o-transform:skew(0deg, 180deg) scale(-1, 1); transform:rotateY(180deg);}蚂蚁部落欢迎您。 以上代...
实现table细线表格效果代码:细线表格相比较表格的默认表格来说要美观很多，当然更受欢迎，下面就通过代码实例介绍一下如何实现此效果。代码如下: 蚂蚁部落 .table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse;}.table td,.table th { border:1px solid #ccc; padding:5px;} 蚂蚁部落一 蚂蚁部落二 javascript教程 jQuery教程 ...