css垂直居中,CSS 解决未知高度垂直居中实现代码
点评：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性... [阅读全文]
ie6css,CSS样式在IE6下无效的问题解决方法
点评：网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。... [阅读全文]
css通配符,谨慎使用CSS中的星号（*）通配符
点评：我的博客前期文章中有不少关于CSS方面的文章，特别是在关于CSS3的文章中都提到了通配符的使用（如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符）。里面讲到了CSS3中多种通过符的使用方法，如星号（*）、脱字符（^）和美元符号（$）等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持，所以其使用范围最广。 我们最常见的星号（*）使用方法就是： 复制代码代... [阅读全文]
table样式,最大限度的分离table的样式与结构
点评：用table布局,相信大家都知道这是前端很诟病的事.但从HTML标签角度来看table标签,它的功能强大也是毋庸置疑的, 不然, 它也不会曾主导网站布局模式数年(甚至于现在仍有N多整站用table布局的网站). 但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,... [阅读全文]
css强制换行,CSS 之强制换行技巧
点评：大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:... [阅读全文]
你不知道的事,你不知道的outerText，innerText 区别说明
点评：你不知道的outerText,innerText 区别说明首先，看我们的html定义 div id="diva" div id="div1" ainnerHTML,innerText,outerHTML,outeterText/a input type ="button" onclick ="inner()" value="inner" / input... [阅读全文]
css圆角边框,兼容IE6的图片圆角边框CSS
点评：纯CSS实现的图片圆角边框效果,兼容IE6.实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现. 核... [阅读全文]
语义网,CSS中视觉语义不等于基于表现的类
点评：CSS中视觉语义不等于基于表现的类你和用户之间的网站堆栈（简化版） 在TXJS大会的最后一天，一个开发者问我：面向对象的CSS没有给你留下一大堆基于表现的class名?网络堆栈中的每一层都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件，人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有意义的东西来书写，也就是我所谓的代码语义。HTML中的代码语义对... [阅读全文]
css前端,CSS在移动网站开发的前端技术和技巧
点评：本文将和大家一起探讨移动网站中的CSS标准。介绍Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。后来，W3C将二者进行了... [阅读全文]
ie6双倍边距,在浏览器中解析 赋予margin属性 的checkbox空白边距（IE6和FF）
点评：在IE6中checkbox距离左边框有4像素的间隔，而在FF中则没有。测试条件： 1.不管出于什么目的，在公共样式中定义了input元素的margin属性，input { margin:0; } 2.在IE6中测试 测试代码： 复制代码代码如下:... [阅读全文]
css外部样式表,css外部样式加载Link与import的区别
点评：我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识第一点:引用方式 首先看link link rel="stylesheet" type="text/css" href="http://www.jb51.net/style.css" / 最常见的link引用方式，分别解释一下没一个属性先 rel:告诉浏览器引用的是一个样式表文件 type:... [阅读全文]
css浮动层,纯css实现的跟随网页浮动的层
点评：在网上找到不少用js写的。这个用css写的，在别人网站上找到，把内容精简了
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtm... [阅读全文]
css渐变背景,用网页技术CSS实现网页背景渐变的四种代码设置
点评：用网页技术CSS实现网页背景渐变的四种代码设置。一、从上往下渐变 复制代码代码如下:... [阅读全文]
无效民事行为,ie8 body overflow hidden 无效的解决方法
点评：解决ie8 body overflow hidden 无效的问题body{ overflow:hidden;} 在ie8下无效 替换为如下html { overflow:hidden;} 这样就可以实现隐藏滚动条了 而且是兼容目前所有浏览器的... [阅读全文]
ie属性,css3.0新属性效果在ie下的解决方案
点评：ie浏览器实现css3.0新属性解决方案.css3.0增加的新属性，如投影、渐变、旋转、圆角等等！这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持，相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果！css3please.com网站为我们收集整理了一些css3.0新属性效果在ie下的解决方... [阅读全文]
CSS min-height IE6、IE7、FF下DIV自适应高度
点评：IE6、IE7、FF下DIV自适应高度 在DIV的CSS中加入这句：min-height:200px;height:auto; 这样在高度超过200px之后 ie6 7 ff下高度都能自适应 ... [阅读全文]
css浏览器,跨浏览器开发经验总结(二) CSS
点评：css hack的使用，注意是为了解决页面在多个浏览器的兼容性问题。CSS类级别的hack仅IE7识别 *+html {…} IE6及IE6以下识别 * html {…} opera、safari、chrome识别： @media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别... [阅读全文]
div垂直居中,div水平垂直居中的完美解决方案
点评：很多情况需要用到div的居中，下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。让div居中对齐使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可... [阅读全文]
li垂直居中,Li list-style-image 图片垂直居中
点评：如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的，list-style-image 图片垂直居中 如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的， 但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是使用ul li的backgrou-image（背景图片）来解决。... [阅读全文]
css圆角,魔哥css圆角实现代码 (代码精简,完全自适应)
点评：魔哥css圆角实现代码，结合了图片的实现方法，兼容性好。所用到的图片:
style type="text/css"
body,p,div {margin:0;padding:0;}
.Box {margin:10px auto;width:500px;}
/*淘宝的圆角方法*/
.R-1-T,.R-1-B {height:6px;position:relative;backgroun... [阅读全文]
老调重弹,老调重弹的CSS优先级
点评：在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。 其次：我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制... [阅读全文]
IE overflow:hidden失效的解决方法
点评：position和float是两种布局模式，在IE6下共用有时会导致用position定位的元素节点消失。绝对定位的元素节点是参照离它最近的已定位元素，所以父节点定位relative、子节点定位absolute是很常见的。overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效... [阅读全文]
css空白,css 关于空白叠加
点评：简单地说，当两个垂直空白边相遇时，它们将形成一个空白边，而这个空白边的高度等于两个发生叠加的空白边的高度中较大者。况一： 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。 html结构 div class="du"上面块/div div class="dd"下面块/div css代码 复制代码代码如下:... [阅读全文]
css margin 属性 详细使用说明
点评：设置外边距的最简单的方法就是使用 margin 属性。这里详细的说明margin的各个参数。CSS margin 属性设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：h1 {margin... [阅读全文]
ie6错误,IE6 Bug overflow:hidden失效
点评：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。下面就是我所收集或遇到的IE6 Bug之一：overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 CSS代码 复制代码代码如下:... [阅读全文]
csshack,css hack总结 图片整理版
点评：关于CSS hack，网上有很多总结了，在他们的基础上，谈谈我个人的一些总结。其实大多数hack技术都是针对IE各个版本。查看如下表格： 常用CSS Hack技术不常用CSS Hack技术... [阅读全文]
让IE6、IE7、IE8支持CSS3的脚本
点评：我们都知道IE6，7并不支持CSS3的属性，IE8也不能很好的支持CSS3。但是有一个小脚本能够做到，它可以让IE支持 CSS3，包括：border-radius (rounded), box-shadow ( shadow), text-shadow等……如果你需要一个支持CSS3 的box content，你需要添加一行代码： behavior: url(ie-css3.htc); 代码... [阅读全文]
css强制换行,CSS 之强制换行技巧
点评：大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:... [阅读全文]
你不知道的事,你不知道的outerText，innerText 区别说明
点评：你不知道的outerText,innerText 区别说明首先，看我们的html定义 div id="diva" div id="div1" ainnerHTML,innerText,outerHTML,outeterText/a input type ="button" onclick ="inner()" value="inner" / input... [阅读全文]
表单美化,表单label美化代码
点评：这里举例如何美化label标签，让你的页面更漂亮。化表单，效果如下： 每个lebal有箭头的背景 有焦点的lebal背景高亮 示例如下：代码如下：复制代码代码如下:... [阅读全文]
