今天在做一个网页，需要用到鼠标悬浮hover改变当前div边框颜色，由于IE6之类的浏览器不支持非a以外的伪类，所以就用jQuery实现。刚开始使用addClass添加样式的方法，发现不能成功，后来就直接通过jquery给当前div添加一个border的样式。 实现效果的方法： $(document).ready(function() { $('.themelist').hover(function() { $(this).addClass('add'); },function(){ $(this).removeClass('add'); });...
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。overflow属性默认值为auto 设置 overflow 属性： div { width:960px; height:150px; overflow:scroll; } overflow其它值如下： visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden...
DIV+CSS里单行文字垂直居中仅需要在DIV添加height属性后再添加个line-height属于就可以了。 #neirongorg {height:25px;line-height:25px;} 仅需要这样就可以达到单行文字垂直居中的效果。也可以应用到DIV垂直居中里。 也可以使用Vertical center现实，不它只对(X)HTML元素中拥有valign特性的元素才会生效，如表格元素中的td、th、caption等，但像span、div这样的元素是没有valign特性的，所以使用vertical-align对它们也就不起作...
使用CSS+DIV制作网页的时候，由于目前浏览器太多，每个浏览器都有不同的CSS的BUG问题，其中IE浏览器特别多，加上用户总坚持着老版本不放，也加重了网页设计师的麻烦。float浮动之后margin产生双边距便是IE6中很明显的BUG。 什么是双边距？ 先看以下CSS代码： #neirong{float:left;width:250px;height:250px;margin:10px;} 表示宽高为250像素的DIV左浮动，上右下左的边距margin为10像素。在其它浏览器中会如实显示，但在IE6中，左边距会变成20像素。这便是双边距。 产生的条件。 对于I...
现在的网页设计一般用logo图片代码纯文本链接，而大部分网页设计师是直接在网页相关位置使用(<img src="images/logo.gif">)实现的，其实更好的方法是直接使用CSS设置其背景图片，然后再对a标签进行样式定义，这样即利于搜索引擎辨别，也利于以后的变动修改。 如何利于CSS实现logo图片链接替换纯文本链接： 原html代码如下： <div id="logo"> <a href="http://neirong.org" title="资源共享"><img src="images/logo.gif"...
border-collapse:collapse; 作用：用于表格属性, 表示表格的两边框合并为一条;然后可以对表格应用border属性！
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很 方便的使用vertical-align属性来对齐其中的内容了。 <h...
先看一段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; } ...
zoom这个特性是IE特有的属性。 zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。 所以一般要在浮动元素的父元素加上overflow:auto；zoom:1; 。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。 PS：一直认为IE6应该从广大网民的电脑中删除或升级了，作为网页制作者，应该不再去为IE6、IE7这样的极品费脑筋，直接不兼容，让IE6用户不得不升级！
最小宽度： .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不识别!important来实现 height:auto!important; height:500px; min-height:500px; 方法二：必须保证#test以外的都要是overflow:visible。否则还是不会显示超出。 min-height:100px; background:#BBB; _height:100px; overflow: visible;
页面容器（#wrap）与页面头部（#header ）为width:100%宽度，内容的容器（#page）为固定宽度width:960px时，浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。 拖动水平滚动条，右边的背景不存在了，出现bug的样子。 问题的根本在于：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。 问题的解决方法：既然是宽度理解上的差异...