老白干的zone

今天布局网页时采用div+css样式，开始一切正常，在制作过程中突然页面布局完全混乱，大惊！！！！新建页面逐个排查，结果发现css的文件无法被引入到网页中。开始怀疑是w3c出现问题，打开sohu，sina一看其网页都很正常，所以坚信是自己的问题，难道是计算机ie的某个设置出现了问题，经查看重启均没有改善。google了一下：网页css不能正常引用，问题迎刃而解，原来是网页编码跟css编码不统一所致

以前在美化网页时，经常会为不同的链接追加不同的图标，以示区别明确告诉用户这是个什么样的链接，更直接。传统的作法是定义不同的class，然后追加到每个链接上，但是现在有了css3强大的属性选择器（IE7及以上版本都支持），就解放了我们命名的阻碍，也对html的结构尺寸减少了不少。

大家在前端开发中可能只听说过ie支持滤镜，现在好了，webkit内核的浏览器也有了自己的滤镜。

如何确定CSS的优先级？这里我们要先引入一个机制，分别用4个数字（a，b，c，d）表示优先级组合

教你用css3的:target实现手风琴和选项卡效果

焦点图在各项目中经常会用到，如：http://blog.csdn.net/pvfhv/article/details/8990220r所示的效果，其展示功能在此不在赘述，以下是应用css3的animate动画实现此效果，美中不足之处，不能点击切换每一张图片。此案例的重点是展示animate中的animation-timing-function的step-start，此功能函数实现无渐变，过渡帧之间以后一帧效果填充。例如：0%{}，10%{}，20%{}，则在0%-10%之间的效果以10%的效果填充，不会出现

导语： 最近，一个朋友问我大家耳熟能详的一些网页布局，由于平时仅为了实现某些布局而无暇总结，在此对个别典型布局进行一个小结，以此供大家研究。 一个三栏的自适应高度的布局： 方案一（绝对定位）： 页面html: 页面css: html, body { margin: 0px; height: 10

*{ padding:0; margin:0;}这一行会对ol有序排列有影响，今天在iis6上死活不能正常显示1、2、3、……在去掉这一行后显示完整，我想这可能是iis6的一个bug，因为在iis7.5上显示一点问题没有。

今天使用一大图片的顶部和底部做背景时遇到的，底部图片在ie6下不能正常显示，本人试着在网上搜索了一下，解决方案如下：background:url(zlybg.jpg) left bottom no-repeat; _background:url(zlybg.jpg) left bottom fixed;即ie6下使用fixed固定方式，ie6的显示问题就解决了，希望浏览本文的读者可以自行试一下。

1. css 字体简写规则当使用css定义字体时你可能会这样做：font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif;事实上你可以简写这些属性：font: 1em/1.5em bold ita

CSS兼容性一直是大家头疼的问题，现在说说如何区分这几个浏览器，IE6、IE7、IE8和FF，IE8均指IE8正式版,版本号:8.0.6001.18702。以颜色为例来说如何区分这几个浏览器：.csshack{    color:#f00;                            /*firefox等对css支持好的浏览器 显示为红色*/    color:#00f/9;      

碰到好些问题，Firefox下面看着很完美，ie6下面就惨不忍睹，还好，一点点慢慢解决了。一些东西摘录一下，以后也许用得到。DIV+CSS解决IE6，IE7，IE8，FF兼容问题那我来说说吧，做了几年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的没去研究过1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下

1.区别IE和非IE浏览器 #tip {background:blue; /*非IE 背景藍色*/background:red /9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF【区别符号】：「/9」、「*」、「_」【示例】：#tip {background:blue; /*Firefox 背景变蓝色*/background:red /9

css3提供了border-radius的属性，可以为网页元素设置圆形的角，从而界面优美了不少，也避免了图形后成圆角的加载问题，下面罗列了利用border-radius制作的圆形、半圆、1/4圆及椭圆，充分展示它的强大功能。