摘要：近日，Stu Nicholls根据A List Apart的Sliding Doors of CSS, Part II 一文，改写了滑动门菜单，发表了100% clickable Sliding doors ，弥补了9个像素的点击盲区。 点击盲区图示，很明显可见到在上面一张图菜单的边缘无手形。 原有代码： #nav li { float:left; background:url("lef... 阅读全文

摘要：这是一个使用自定义列表的简单圆角布局，参照来自Cssplay的Four curved corners with no extra markup or javascript 一文，完全采用CSS，可自适应宽度和高度，语义化比较好，结构简单，无空白标签存在。 实现原理 使用4张背景图片（圆角外面颜色和网页背景色一样，里面是透明的)，DL标签里填充左上角，DT填充右上角，DD填充左下角，P填充右下角(如... 阅读全文

摘要：常用CSS缩写语法总结 作者：阿捷 2005-4-8 15:28:00 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1； pr... 阅读全文

摘要：到目前为止，IE还不支持显示PNG透明图片，日前在http://homepage.ntlworld.com 看到了一则解决方法，加一个JS文件，就能解决,IE>=5.5。如下图是透明的PNG32格式。 把上面的代码放在head区，下载pngfix.js。 阅读全文

摘要：这个网站风格切换除了带记忆功能外，还可设定保持时间，比如5天或者180天，过了时间就自动恢复到默认样式表。 样式表连接 脚本作者：dynamicdrive.com 下载 调用默认风格 橙色风格 蓝色风格 注意：title内容改成你样式表的名字，我这里是设定为5天。 阅读全文

摘要：由于各浏览器（IE、gecko、opera......)对CSS的渲染方式都有所不同，造成显示效果不同，所以可通过对其载入不同CSS的方法来解决，下面介绍下二种方法来实现，不一定很实用，难的玩一把。 纯CSS方式 Code.box{ width: 20em; height:20em; background: #369; } /*--gecko内核--*/ @media al... 阅读全文

摘要：万维网（World Wide Web）机器人程序,会扫描全球的网页，存贮起来做成检索页，但有的时候你的某些网页不希望被机器人所索引，如何解决呢？ 解决方法 这需要用到robots.txt文件了。你可把不希望被机器人所索引的目录写在里面，该文件要放在网站的跟目录。 robots.txt文件例子User-agent: * Disallow: /product/ Disallow: /temp/ D... 阅读全文

摘要：1.背景图填充 这是使用最广泛的一种做法，无hacks，推荐使用，演示例子。 2.采用脚本控制列的高度（一） 需要事先知道哪列的高度，以此为基准用脚本控制。document.getElementById("sideleft").style.height= document.getElementById("sideright").scrollHeight+"px" 上面的代码... 阅读全文

摘要：最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7开始也支持了，但IE7处于测试阶段，等正式版发布到普及需一段也许比较长的时间，除非MS把它捆绑在某个操作系统上，如何在现有基础上（IE6 80-90%），合理、妙用最小高度了？ 假定有二个BOX，我们需要它的最小高度为150PX。 ... 阅读全文

摘要：这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做。 实现原理： XHTML Home首　页 从上面代码可以看出，中文放在 span 标签里，关键是需要在初始时，使其的属性不可见。 CSS.bi{ position: relative; z-index: 0; } .bi:hover{ z-index... 阅读全文

摘要：作者网站：http://www.cssplay.co.uk 一个简单、隐藏的菜单，初始时只有一个指示用的菜单标签，当鼠标移动到菜单标签上时显示出完整的菜单。Javascript有许多版本,但很少有CSS的版本，我认为到目前为止这个菜单是唯一的. 菜单工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Sa... 阅读全文

摘要：原理 将二个相同而色彩不同的文字重合在一起，通过分别给其加 clip 属性，使上面和下面的文字被剪切位置不同，从而产生二种不同的色彩。 clip : 摘自苏沈小雨CSS手册clip : auto | rect ( number number number number ) 参数： auto : 对象无剪切 rect ( number number number number ) : ... 阅读全文

摘要：作者：Stu Nicholls 翻译：forestgan 信息 这是 cssplay的站长根据其最近创作的dropdown and flyout menus而改编而成的，当鼠标按顺序悬停在菜单上时，可在同一位置显示不同的页面，可在Opera, IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正确显示和工作，不兼容Mac IE5。 鼠标悬停在菜单和页面上... 阅读全文

摘要：这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码：#wrap{ overflow: hidden; } #sideleft, #sideright{ padding-... 阅读全文

摘要：清除DIV浮动--使用:display: table 特点：不占用物理空间. display :table ;--将对象作为块元素级的表格显示 CSS修正代码:.wrapfix { display: table; } 以上代码加在CSS文件里即可,用:class="wrap wrapfix" 调用 这是没有清除过浮动的．非Ie浏览器看不到wrap的背景和边框． 这是清除过浮动的．... 阅读全文

摘要：这是个透明的CSS菜单,兼容性:IE5.5+、Opera、Frefox、Netscape。 CSS代码：body{ font: 80% Arial,sans-serif; background: #666; } #nav{ width: 170px; background: url(navbg.gif) bottom; list-style-type: none; margin: 0... 阅读全文

摘要：当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。 下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何 实现当前页。 设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一 个ID，m1-m5，CSS可写成如下： #home #nav li#m1 a, #... 阅读全文

摘要：特点：不需要另外加个清除DIV. :after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。 CSS#wrap:after { content: "."; display: block; height: 0; clear: both; visibility:... 阅读全文

摘要：The IE Doubled Float-Margin Bug IEBug--浮动对象外补丁的双倍距离 先看以下代码：#box{ background: ThreedFace; width: 500px; height: 400px; } #box1{ float: left; background: #F2F2F2; width: 300px; height: 200px; ... 阅读全文

摘要：这是div+css布局中经常会碰到的基础问题，个人觉得采用背景图填充的方法，还是比较简单和切实可行的。最终效果。 CSS： body{ background: #EDEDED; font-size: 70%; font-family: Arial, Helvetica, sans-serif; line-height: 130%; color: #666666; margi... 阅读全文