展开菜单

div+css让图片垂直居中方法技巧

在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很 方便的使用vertical-align属性来对齐其中的内容了。 <h...

解决expression在Chrome浏览器不能加载css的问题

解决expression在Chrome浏览器不能加载css的问题

先看一段HTML代码,在下边这段代码中,这张图片的宽度未知,我想写在CSS中写一行限制最大宽度为50px: <div id="test"> <img src="/sheji/Files/2011-10/8/93619040.gif" /> </div> Firefox或IE较高的版本可以直接写max-width。在IE的低版本浏览器中,我们可能会写如下的代码: #test img{width: expression(this.width > 50 ? '50px': true); max-width: 50px; } ...

网页制作css技巧之zoom:1;作用

zoom这个特性是IE特有的属性。 zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。 所以一般要在浮动元素的父元素加上overflow:auto;zoom:1; 。这样,子元素浮动,父元素再也不会不自动跟子元素扩大了。 PS:一直认为IE6应该从广大网民的电脑中删除或升级了,作为网页制作者,应该不再去为IE6、IE7这样的极品费脑筋,直接不兼容,让IE6用户不得不升级!

兼容IE6的css网页最小最大宽度和最小最大高度

最小宽度: .min_width{ min-width:300px; /*sets max-width for IE */ _width:expression(document.body.clientWidth < 300 ? "300px" : "auto"); } 最大宽度 .max_width{ max-width:600px; /*sets max-width for IE */ _width:expression(document.body.clientWidth > 600 ? "600px" : "auto"); ...

IE6不支持min-height的解决办法

IE6不支持min-height的解决办法有两种解决方案。 方法一:利用IE6不识别!important来实现 height:auto!important; height:500px; min-height:500px; 方法二:必须保证#test以外的都要是overflow:visible。否则还是不会显示超出。 min-height:100px; background:#BBB; _height:100px; overflow: visible;

css div层width:100%缩小窗口时背景图片右边空白bug解决方法

css div层width:100%缩小窗口时背景图片右边空白bug解决方法

页面容器(#wrap)与页面头部(#header )为width:100%宽度,内容的容器(#page)为固定宽度width:960px时,浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。 拖动水平滚动条,右边的背景不存在了,出现bug的样子。 问题的根本在于:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。 问题的解决方法:既然是宽度理解上的差异...

完美解决IE6不支持position:fixed的bug

先看下面一段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;r...

CSS样式的filter(滤镜效果)对HTML作用

黑白照片 filter: gray; X光照片 filter: Xray; 风动模糊 filter: blur(add=true,direction=45,strength=30); 正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); 半透明效果 filter: Alpha(Opacity=50); 线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, F...

overflow:hidden;使list-style-type无效

部分CSS新手编写网页li标签样式时,使用了list-style-type:decimal(或其它)的样式,但之前设置了样式不让li换行并隐藏溢出,使用了overflow:hidden;,发现list-style-type:decimal;设置的数字无法显示。 解决方法:给样式添加list-style-position:inside; 例子: .widget ul li { list-style-type:decimal; list-style-position:inside; white-space:nowrap; ...