摘要：一、用css3制作功能表View Code 大家对阴影，圆角，渐变和CSS3特性情有独钟。今天我就用css3为大家做个实例：功能表。 先看下效果图： 这里为了方便大家线下理解，我提供给大家下载地址及演示地址。 演示地址 下… 大家对阴影，圆角，渐变和CSS3特性情有独钟。今天我就用css3为大家做个实例：功能表。 先看下效果图： 这里为了方便大家线下理解，我提供给大家下载地址及演示地址。 演示地址 下载附件 HTML代码 下面你可以找到的缩写HTML： XML/HTML Code复制内容到剪贴板 <table class="features-table"> &l 阅读全文

摘要：在CSS中，你可以为同一个标签定义多个样式，如下面的例子：------------------------------例子----------------------------<style type="text/css"><!--#aaa{ background-color: Fuchsia;}.ab{ background-color: Black;}td{ background-color: Aqua ;}--></style><table><tr><td class="ab" id 阅读全文

摘要：拿到这一张效果图，你会用什么样的方式去实现呢？（让我们一起思考） 我的第一个想法就是用四张图片来表示四个不同的状态，当我着手处理图片的时候发现一个弊端，如果里面的字要增加或者是减少那岂不是很悲剧？于是我停了下来再次分析效果图，在着手写代码之前花较多的时间去分析效果图很有必要，这样即使日后需要修改你还是会发现当时已经考虑到这种情况，只需要修改小小的一些代码就可以实现修改后的效果。 接下来果然让我猜中了，里面的字确实需要修改，而且数量也由四个变成了五个，这时你是不是头大了，当时没说要加字啊，更没说要加状态条啊？是的，当时是没有说，可是现在要加，今天修改好，明天提交。 我暗自庆幸，亏得我想到了,不然 阅读全文

摘要：Hover对于我们太熟悉了，其早期只定义于文本超链接鼠标移动上方样式。慢慢的IE7、IE8.0\、IE9.0等火狐、谷歌浏览器面试，hover也渐渐被业界应用于更多领域。比如：CSS Code复制内容到剪贴板.Mylcass{padding:5px 5px; background:#f60} .Myclss:hover{ background:#000} Myclass当然可以定义其他样式，比如宽度、高度、颜色，如果想得到更好的效果，可以融入css3的新属性。Hover这里我们叫它动作，这种动作在所有网页是最基本也是最多的鼠标执行动作。如果不考虑IE6.0，我们完全可以舍弃js，用它来实现各种 阅读全文

摘要：清除浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。CSS Code复制内容到剪贴板/* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一 阅读全文

摘要：兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。 word-wrap同word-break的区别 word-wrap: normal Default. Content exceeds the boundaries of its contai... 阅读全文

摘要：一、图形化边界View Code 顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下: border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat; 这里，border: 5px 设定了边界的宽度，然后，每个边界的图片定义告诉浏览器，使用... 阅读全文