DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。 提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上图右边是我们要实现的效果,代码如下: 1 2 3 4 5 6 7 ...
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);}蚂蚁部落欢迎您。 以上代...