一个css3动画效果，点击链接标签弹出详细内容层，从页脚升起然后平铺整个屏幕，而原来的内容层缩小。具体看效果了，装逼可以一用。嘿嘿。注意使用标准浏览器如chrome，firefox，ie8-就不要来凑热闹了。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstylehtml, bod..
html img标签添加了hspace，vspace属性后确没有作用，图片紧靠文字解决办法。 img标签添加了hspace，vspace属性后确没起作用，一般是样式中定义了img，设置了margin导致的，如下，上图的图片添加了hspace为10，但是文字还是紧靠图片，查看图片样式后发下有如下的css设置过img的margin为0。 将这个样式中的img去掉后，img设置hspace，v..
在IE6，IE7，IE8（IE8未添加xhtml，在backpack模式下），如果父节点设置了margin-left属性，会导致输入元素如input，textarea继承父元素的margin-left导致偏移，测试代码和效果图如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitleIE6，IE7，IE8输入元素input..
IE7-下，同级元素使用relative定位时，如果子元素使用absolute定位，这个absolute定位的子元素会被处于这个元素的父元素的后面的同级元素所覆盖，导致z-index无效（一般解决IE7- z-index失效的问题主要是给父元素增加z-index），示例代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/..
新版本的360有2种模式，基于Webkit内核的极速模式，和IE内核的兼容模式。 如果要强制360以极速模式浏览网页，可以给此网页增加meta，强制360浏览器以极速模式解析此网页，而非IE兼容模式。 代码示例，在head标签中添加一行代码：html head meta name=renderer content=webkit /head body /body/html content的取值为webkit,..
对于一长串不会自动换行的字符串（如数字和字母连在一起的商品编号或者其他内容），会导致页面或者布局被撑破。要自动换行可以使用word-break:break-all（IE和chrome支持，firefox不支持）。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstyle.ellipsis{font-size..
使用javascript动态创建的锚点（anchor），在IE8-下无法跳转都动态创建的锚点部分。 测试代码，通过创建a元素，设置a元素的name后添加到dom中，IE8需要添加xhtml申明才有效果（去掉xhtml申明也和IE7一样无效），IE7无效!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona..
本文总结了HTML5带来的15项你必须知道的新特性。1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML1.0并且要在第一行像这样声明文档类型： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 在HTML5中，上面那种声明方式将失效。下面是HTML5中..
css+div模拟frameset布局代码，frameset不利于seo，可以采用css+div的absolute定位来实现frameset布局。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlecss+div模拟frameset布局代码/titlestylebody{margin:0px}#top{height:100px;background:#eee;position:ab..
一个css3动画效果，点击链接标签弹出详细内容层，从页脚升起然后平铺整个屏幕，而原来的内容层缩小。具体看效果了，装逼可以一用。嘿嘿。注意使用标准浏览器如chrome，firefox，ie8-就不要来凑热闹了。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstylehtml, bod..
W3C标准中对css3的transition这是样描述的：css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法: transition ： ['transition-property&..
CSS3 transform-style属性transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。transform-style属性的使用语法非常简单：transform-style: flat | preserve-3d其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也就是说，如果对一..
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。语法： transform ： none | transform-funct..
今天下午花点时间将本站css进行修改，通过@media screen max-width/min-width将本站在移动端浏览器下显示得更加友好。 本站在分辨率宽度680px一下显示如下 如果您在电脑端浏览本站使用的标准浏览器（ＩＥ９＋，ｆｉｒｅｆｏｘ，ｃｈｒｏｍｅ等），可以缩小浏览器窗口大小到６８０ｐｘ以下可以看到效果。 利用@media screen实现网页..
效果：在网页中选中一段内容后，自动弹出一个按钮，点击按钮可以将选中的内容回发到服务器。 实现方法：用javascript添加document.onmouseup事件，用range API判断是否选中内容，选中内容则弹出按钮，给按钮绑定点击事件，点击后将选中的内容使用ajax发送到服务器端。 选中网页内容弹出按钮点击发送选中内容到服务器源代码如下script ..
IE6,IE7对css样式display inline-block的支持有问题，需要经过css hack后才会支持。注意：IE8需要加xhtml申明变为css1compat模式才会支持inline-block，backcompat模式不支持，但是可以通过css hack来实现，和IE7-一样。 要想让IE6,IE7支持css样式display inline-block，有下面2种方法1、先使用display:inline-block属性触发块元素，然后..
html img标签添加了hspace，vspace属性后确没有作用，图片紧靠文字解决办法。 img标签添加了hspace，vspace属性后确没起作用，一般是样式中定义了img，设置了margin导致的，如下，上图的图片添加了hspace为10，但是文字还是紧靠图片，查看图片样式后发下有如下的css设置过img的margin为0。 将这个样式中的img去掉后，img设置hspace，v..
由于chrome的同源访问策略，会导致即使是本地测试js效果时也会报错。chrome本地测试访问iframe，parent，opener null解决办法配置chrome支持本地（file协议）ajax请求chrome无法保存本地设置cookie解决办法 具体问题问题解决办法参考上面的文章。如果想一次性解决上面的所有问题，可以增加--disable-web-security启动参数，怎么增加启动参..
Ext Grouping Grid增加分页效果，和普通的Ext Grid分页一样，增加PagingToolbar即可，然后依据PagingToolbar发送的分页参数page，返回需要的数据就行，配置分组后会自动分组返回的数据。 Ext Grouping Grid增加分页源代码如下groupgrid-paging.htmlhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / titl..
在IE6，IE7，IE8（IE8未添加xhtml，在backpack模式下），如果父节点设置了margin-left属性，会导致输入元素如input，textarea继承父元素的margin-left导致偏移，测试代码和效果图如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitleIE6，IE7，IE8输入元素input..
IE7-下，同级元素使用relative定位时，如果子元素使用absolute定位，这个absolute定位的子元素会被处于这个元素的父元素的后面的同级元素所覆盖，导致z-index无效（一般解决IE7- z-index失效的问题主要是给父元素增加z-index），示例代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/..
今天碰到一个问题，IE7-浏览器下（或者Quirks模式下），如果设置设置子容器的innerHTML，当设置的内容为table并且包含了align=center，会导致父容器的offsetTop增加，从而使父容器向下移动。 测试代码如下，子容器table没有align=center属性，设置子容器不会修改父容器的offsetTop属性div id=bb style=border:1px solid gray;overflow:hi..
IE7-浏览器或者IE8浏览器下（没有添加xhtml申明的html），容器内部的浮动元素，当碰到容器的边界时，碰到边界的那个元素不会自动换到下一行显示，而是在当前行显示，超出剩余空间的文字自动在这个浮动元素内容换行显示，效果图如下firefox浏览器IE7浏览器IE6浏览器 源代码如下style.xx{zoom:1;width:200px;}.xx a{ float: left; fo..
对于一长串不会自动换行的字符串（如数字和字母连在一起的商品编号或者其他内容），会导致页面或者布局被撑破。要自动换行可以使用word-break:break-all（IE和chrome支持，firefox不支持）。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstyle.ellipsis{font-size..
checkbox/radio控件的属性之间的间隔一般是半角的空格进行分隔，如果value属性前出现了全角的空格，会导致这个控件的值为on，而不是设置的value值，测试代码如下input type=checkbox value=xx /颜色input type=radio value=0 /男input type=radio value=1 /女input type=radio value=2 /保密script var ipts = document.getElementsByT..