这里所说的bug不是指IE6无法显示png的问题,而是在IE7和IE8下如果你动态修改png图片的透明度，比如说你应用一个fadeIn，将图片的透明度调到25%,这时候就会出现非常诡异的bug

1.CSS字体属性简写规则2. 同时使用两个类3. CSS border的缺省值4. CSS用于文档打印5. 图片替换技巧6. CSS box模型的另一种调整技巧7. 块元素居中对齐8. 用CSS来处理垂直对齐9. CSS在容器内定位10. 直通到屏幕底部的背景色

1.检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2.检查CSS是否正确　　检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。3.确定错误发生的位置　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，

　通常有两种情况阻碍你的学习：　　第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。　　另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align=”left”等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再

解决CSS3圆角兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。 译：前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它

在XHTML标准里，图片的alt属性是必须的。alt属性　　为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。　　比如：使用alt属性是为了给那些不能看到你文档

标签内设置了float:left又设置display:inline。　　既然设置了float:left，那标签内的元素都会向左浮动了。　　为什么又要设置display:inline。既然设置了float:left，那该标签已具有块状元素的特征了，又设置内联元素，不是有矛盾吗？ulli{ float:left; margin:012px12px0; display:inline;}　display

背景图片的设置是CSS布局时常用的一种属性，应用background的url，引入背景图片，可以设置为不重复平铺，如下面的代码：　　background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;　　在大多数情况下，此设置不会有任何问题。背景图片按设置的形式呈现，不会平铺于容器，无论容器是何宽度与高度。　　但在IE6下，有一种情况，如果未定义宽高，则

做网站时,你可能会遇到标题过长,需要转行才能显示的,但你又想它在一行里显示就行,怎么办呢?以下提供一个解决方法,希望能帮到你!兼容浏览器用CSS控制字符宽度多出以省略号结束的效果，很实用的效果，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别一下。看下面的HTML代码：<ul><li><ahref="#">使用CSS最佳习惯</

一、代码臃肿　　首先，Table里面唯一无法用CSS定义的属性只有Cellspacing，Cellpadding几个，其它属性都可以并且应当使用CSS，这样，剩下的，就是<table><tr><td>和<div>的对决，我相信一个动辄几十K大小的网页，即使使用了几十个Table，因此多出来的代码也可以忽略不计，那些埋怨Table代码臃肿的人其实该检查自己的编码习惯，能将Table写得十分臃

CSS布局中的以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。　　由于这种方式被大多数人所认同，所以方法也越来越多：　　一、使用text-indent的负值，将内容移出容器；　　二、使用display:none，将内容隐藏；　　三、使用padding将文字挤出容器之外，并将超出的部分hidden;　　四、使用font设置超小字体，达到隐藏内容的目的。　　一、看起来蛮简单，但其实有几个不理想的地方，比较吃资源

随意的命名，会让你陷入尴尬。　　举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red{color:red;}。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red{color:orange;}么？要不然就是把HTML里的每个class="red"改成class="orange"？　　在过去几年时间里，我经常遇到这样的尴尬。因此作为一些经验之谈，我整理出以下的几个命名原则：　　原则一：CSS选择符

知道大家在做页面的时候会不会遇到样式定义不生效的问题，基本的表现就是怎么改样式都没显示或只有某些浏览器正常，这时通常需要做下面的几步：　　确认所修改的样式文件是否是当前页面的样式文件（多个环境的情况）　　确认文件中的路径是否正确（可能手误多写或少写）　　如果上面两点都确认没问题或只是一部分样式失效，基本可以确定是文件的编码问题　　大家都知道使用“UTF-8”比“GB2312”跨平台的兼容性更好，却不一定知道文件的编码跟文件编码的申明不是

用CSS控制Table单元格强制换行与强制不换行　　我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。　　近日看到此方法，在此与大家分享一下！　　用CSS实现Table单元格数据自动换行或不换行的实现方法：　　1、强制换行： <styletype="text/css">.AutoNewline{ word-break:break-all;/*必须*/}</style&g

用div+css做网站经验之谈：组织选择符和声明经常要保持CSS的整洁度和有序性。　　重置样式(resetstyles)　　排版样式(typographystyles)　　布局样式(layoutstyles(header,content,footer,etc.))　　模块和widget样式moduleorwidgetstyles　　其他(etc).　　然后，在每个组里面，我按照DOM等级将选择符组织划分：　　任何父级元素样式(anypa

DivCSS实例：让把页脚保持在(未满屏页面的)底部的实例　　在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。　　当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在IE6、IE7、FF等都没有问题！窗口缩小时也没有问题！首先是JS脚本：functiontest(){ varinfoHeight=document.getElementById("info").scrol

让你的CSS命名更合理,更富有语义---------CSS网页布局经验：富有语义地类class和id标记命名　　您应该明白为什么我会说到这个，选择合适的、有意义的元素去描述你的内容，确保您所选择的是富有语义的类class和id特征值。做正确的事情会使你的生活变得容易很多，如果你是某个团队的一分子，对团队其他成员来说也是如此。看一下下面的这条规则：eg.l13k{color:#369;}　　如果您是刚接手这个工作，您在CSS文件中看到了上

在做网站时进行DivCSS布局中，需要对文本进行控制，我们今天系统的向大家介绍一下。CSS中控制换行的四种属性。一、white-space　　可以实现HTML中PRE标签的效果，以及单元格的noWrap效果，语法：white-space:normal|pre|nowrap　　取值：　　normal：默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行　　pre：换行和其他空白字符都将受到保护。这个值需要IE6+或者!

区分文字的大小单位---px和pt在做网站的网页设计CSS中，经常用到字体，而字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？　　　　px：pixel，像素，屏幕上显示的最小单位；　　　　pt：point，点，是印刷业一个标准的长度单位，1pt＝1/72英寸；　　　　在Windows里，默认的显示设置中，把文字定义为96dpi。这说明了：1px＝1/96英寸；而1pt＝1/72英寸，可以得出，在本设置中1px＝0.75

有很多网页中的CSS链接与引用是这样写的：<styletype="text/css"media="screen">@importurl("http://www.52css.com/abc.css");</style>而很多网站使用的都是link<linkrel="stylesheet"rev="stylesheet"href="52css.css"type="text/css"media="all"/>

每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？从以下五个方面入手,让你写出更加专业的CSS代码，也能使代码有好！一、重置　　首先，很认真的告诉你，总是要重置某些分类。无论你是使用EricMeyerReset、YUIReset，或者你自己编写的重置代码，只要使用就对了。　　它能很简单的移除所有元素的填充（padding）和边距（margin）：html,body,div,h1,h2,h3,h4,h

所以推荐使用 line-height:0; font-size:0; overflow:hidden; 能完美“隐藏”掉你background之上的字体 经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

用CSS网页布局来做网站，说难，其实很简单。往往有很多问题困扰着新手，这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候，我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧，这些技巧显得很有用。一、若有疑问立即检测　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请见http://validator.w3.org。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对CSS2中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。另一方面，CSS1中首次提出了浮动，它以Nets

这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。　　关于CSS透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。　　一、旧的Opacity设置　　以下代码是Firefox和Safari旧版本所需的透明度设置: #myElement{ -khtml-opacity:.5; -mo

　为什么要初始化CSS？不同的浏览器默认的样式可能不近相同，所有开发时的第一件事可能就是如果把他们统一。　　也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSSReset，以让网页的样式在各浏览器中表现

CSS网页布局时,即使是比较有经验的人,也都会犯这或那的小错误,以下是一些注意点,希望对你有帮助.1.检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2.检查CSS是否书写正确　　检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。3.用删

我们一直在讲CSS网页布局代码的优化，一直强调语义和文档的结构。随着国外对WEB标准的推广，并不是把以前的table布局都改为DIV+CSS布局就是web2.0。 我们要合理利用这些标签。 有一点值得引起注意，那就是在 web 开发人员圈子里通常被称为“div-itis”的对 div 元素的滥用现象。 　　通过大量的嵌套 div 或 span 元素来添加样式确实很方便，但还是应尽量避免这种诱惑。在多数情况下，为文档内现有元素附加样式或

一、可设置的CSS属性包括：字体属性、文本属性、颜色及背景属性、边框属性、容器属性（边距属性、填充属性）、分类属性、鼠标属性。二、基础属性字体属性：font-family font-style font-variant font-weight font-size文本属性：word-spacing letter-spacing text-decoration vertical-align text-transform　　　　　text-a

我们都知道DivCSS网页布局的好处，它对网站搜索引擎优化的影响有哪些呢？　　网站优化使用DIV+CSS佈局，页面代码精简，这一点相信对XHTML有所瞭解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录品质有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。　　表格的嵌套问题　　很多网站如何网上推广的文章中称，搜索引擎一般不抓取三层以上的表

CSS是目前网页布局主流的形式，也是52CSS.com向大家介绍的核心内容，由于CSS被广泛地使用在几乎所有网站上，所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。大家可以从中了解到DivCSS初学者应该知道的十种技巧和对Web标准的理解。一、索引　　本处的定义将帮助你和其他开发者了解网站和CSS文件，还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落。　　

也就是通过背景图的定位（background-position ）把页面中所用到的图标、背景图之类的整合到一张整的背景图里，从而大大减少了页面请求数，提高了页面浏览的性能。　　其实本民工最初这样用的时候并不知这就叫css sprites，只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图，是腾讯主站背景图的一部分：定位的样式其实只用一句：background: url("your_url.gif") no-repeat x y;

SS Sprites对CSS布局的意义、优点和缺点介绍　　关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。图片优化　　一、对于非动画的GIF更建议使用

CSS Sprites工作原理　　CSS Sprites对CSS布局的意义、优点和缺点介绍　　CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。　　原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites，技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Request

　CSS的清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。　　我们粗略的一起来看看清除浮动的方法一共有多少种(IE里面用zoom:1就不写了，下一个专题再写)。对应的DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

其实他是指DIV的高度。简写了一下，感觉不是很实用。不过在某些特殊页面中，有一定的作用。可以在IE6、IE7与FF中，自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns

酷兆并不提倡这样的方法，但是依然有很多CSSer会用到，这个资料保存在这里，以备大概查阅，请注意，不到不得已，请不要使用此方式。<!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="images/StyleSheet.css" /><![endif]--><!--[if IE 7]><LINK rel="styl

最常见的div+css网页布局形式：上、中左、中右、底四个模块，宽度760px，整体页面居中。结构代码，topleftrightfoot四个模块全部独立、互不嵌套。＜divid="top"＞head＜/div＞＜divid="left"＞ ＜divid="left_module"＞left＜/div＞＜/div＞＜divid="right"＞ ＜divid="right_module"＞right＜/div＞＜/div＞＜divid="

谈论DivCSS网页布局的模块化开发思想我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。一、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用

关于模块CSS的划分，我比较喜欢类似wordpress中的css划分方式，一般情况下通过类似下列结构划分：layout.css /* 整站布局 */public.css /* 公用组合样式 */header.css /* 页面头部区域样式 */sidebar.css /* 侧边栏区域样式 */main.css /* 主体区域样式 */footer.css /* 底部区域样式 */index.css /* 首页区域特有样式 */form.

CSS网页布局中，tbody标签与thead和tfoot标签如何使用呢？　　thead 标签用于HTML表格的表头　　表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头.　　tfoot 标签表示HTML表脚　　表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的下部打印表脚.　　tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。　　tbody 元素应该与

说实话，看到这个题目时我觉得这有什么好讨论的，肯定会是场一边倒的讨论。因为个人比较倾向于短命名，简单优雅，可能是出于程序员的洁癖，容不得任何冗余的东西。和我一个想法的人应该不在少数吧！　　先看下长命名和短命名的定义：<!-- 长命名：使用前缀体现上下文环境的CSS命名方式。 --><div class="category"> <div class="category-hd"></

今天向大家介绍一些英文字体，希望在今后的字体设置中，对您的编码有所帮助。Arial　　Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。虽然比例及字重（weight）和Helvetica极之相近，但Arial其实是Monotype Grotesque系列的变种。设计Arial时考虑到会在电脑上面使用，在字体及字距上都作了一些细微的调整和变动，以增加它在电脑屏幕上不同分辨率下的可读性。Helvetica　　Helv

对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML，的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的“地基”。　　第一部：关于构建CSS框架我们要实现的目的：ExampleSourceCode[www.52css.com]　　1.实现标准化，具备主流平台适应性的前端实现；　　2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈；　　3.重构的需求，尽可能的让类和区

关于模块CSS的划分，我比较喜欢类似wordpress中的css划分方式，一般情况下通过类似下列结构划分： 引用片段:layout.css /* 整站布局 */ public.css /* 公用组合样式 */ header.css /* 页面头部区域样式 */ sidebar.css /* 侧边栏区域样式 */ main.css /* 主体区域样式 */ footer.css /* 底部区域样式 */ index.css /

区别div和span、relative和absolute、display和visibility　div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性，现在我们整理并罗列出它们的区别与使用要点，供大家参考。一、div和span的区别　　div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。　　

自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。　　对于div,p等块级元素　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 　　html 　　<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有

源代码如下:引用片段:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta