用CSS实现一个星级评定的效果
开篇的时候总是在想，这个叫星级评定到底贴切不贴切，总之大家知道是这么个效果就好了。大家先看一下截图吧
1. 定义一个UL列表（当然如果你喜欢可以使用其他标签）
2. 设定每个LI项目为为display:inline，然他们单行显示,然后每个LI下的A设置背景，默认为未加亮星星，本例里图片的宽度 是 30像素，所以这个宽度要和图片宽度是一致的。
3. 给每个A设置鼠标请过效果。
4. 大家可以看到UL使用到了相对定位，目的就是要设定一个标签让他有已经评分后加亮星星的效果，这一步也是整个实现过程的灵魂，前面我们说过，每个图片是30像素的宽度，所以这里设定的宽度当然是以30为递增的。一个就是30像素，2个是60像素，以此类推。
5. 如果要实现半个加亮星星的效果，只需要设置宽度为30的一半即可。
全文阅读 »
CSS制作一个符合w3c标准的表单
提示：你可以先修改部分代码再运行。
最优的CSS代码书写顺序
在日常的开发中，肯定会是团队合作比较多，所以不能以个人为中心的去设计，布局，所以提到团队协作与代码规范的问题，今天向大家提倡一种CSS代码书写顺序。这样便于阅读，查找与修改属性这语汇，使CSS代码更加的清晰规范。
一、显示属性
* display
* list-style
* position
* float
* clear
二、自身属性
* height
* margin
* padding
* border
* background
三、文本属性
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
图片边框变换CSS Hover状态效果
DIV CSS最有可能遇到的八个面试问题
现在相关单位招聘美工，都有DIV CSS布局方面的知识要求，现列举DIV CSS最有可能遇到的八个面试问题，希望对您有所帮助。
一、超链接访问过后hover样式就不出现的问题？
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
二、IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
三、为什么FF下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }
四、为什么web标准中IE无法设置滚动条颜色了？
解决办法是将body换成html
五、为什么无法定义1px左右高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
六、怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明:
七、怎样使一个层垂直居中于浏览器中？
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
八、firefox嵌套div标签的居中问题的解决方法
如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。
这样的方法在IE里看起来一切 正常；但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto.
CSS hack 用CSS条件注释实现
今天只是说一下CSS条件注释
第一条是给FF看的，下面的if IE 6 if IE 7判断语句是个IE6 IE7看的。这个顺序不能随便换，因为浏览器也是从上至下解释的，后面的效果覆盖前面的。然后再在IE6 IE7单独的样式文件中针对性地写代码。
实际上，CSS条件注释和CSS hack本质上一样，只是表现形式不同而已。条件注释把HACK代码写在了独立的CSS文件中而已。
优点：CSS代码可读性强些了，更加清晰了，没有杂乱的HACK符号。
缺点：在IE6 7 单独的CSS文件中写的语句，支离破碎，以后要想修改，维护起来特别麻烦。如果你的ID CLASS命名比较规范，比较语义化，那还好点。
总结：如果你的XHTML页面体积小，就用一般的CSS HACK方法，直接写在一个样式文件里吧。页面大了再考虑CSS条件注释。
[推荐]CSS文字大小px和pt的区别
在网页设计CSS中，经常用到字体，而字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？
px：pixel，像素，屏幕上显示的最小单位；
pt：point，点，是印刷业一个标准的长度单位，1pt＝1/72英寸；
在Windows里，默认的显示设置中，把文字定义为96dpi。这说明了：1px＝1/96英寸；而1pt＝1/72英寸，可以得出，在本设置中1px＝0.75pt，字体9pt＝12px。
但是，用户可以修改文字定义的dpi大小，例如改成144dpi，这样，1px＝0.5pt，字体9pt＝18px。原先用12px来组成的一个文字，现在需要18px来组成，px多了，文字就“大”了，更易阅读了。
所以，px和pt的区别在于，px会随显示器的分辨率而改变，pt会随Windows系统字体大小设置而改变。
支持放大显示效果的TOP排行
关于打印样式的注意事项
今天有个朋友问我关于打印样式的问题，当时正是工作时间一时不好回答，只好在工作完成后整理，总结一下打印样式的相关知识。
在讲解之前，我们还是先来了解一下什么叫打印样式？打印样式也就是说通过CSS指定给打印机来识别的打印时的输出样式。在HTML中链接的打印样式是：
打印样式有哪些注意事项呢？
1. 打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出CSS中的背景内容，只有当浏览器被设置可以打印背景的情况下才能打印出背景。
2. 打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm ，打印与网页不一样，打印一定要留下白边，单位用英寸(in)。
如果需要在打印内容中出现图片，请在HTML代码中加入。尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦。隐藏不需要的或是次要的内容。
3. 尽量不要让内容浮动，有些浏览器打印浮动的div的过程中，会有一个麻烦，需要特别加以注意。例如，基于Gecko的浏览器（例如Netscape 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。这些内容就不会被传送到打印机，下一个页面也不会有它的踪影――它消失了。
如何测试打印样式？通常来说我们不可能用打印机来进行测试，在IE浏览器菜单栏“文件”中有“打印预览”，可以通过这个打印预览来做测试。
