交互设计中心-72色

72色做了几年的前端现在来总结一下css技巧，也就是网络上推荐的所谓“顶级”的css三个技巧。
第一条：css不要换行。
.jrtjImg{ position:absolute; top:0px; left:0px;  width:78px; height:44px; z-index:999; background:url(images/jrtjJl.gif) no-repeat;}
...

button样式真的不是那么好看，而且在不同浏览器里面还不一样的显示方式，让我们这些做web的很头痛，想让他漂亮起来总是不是那么方便，现在72色就写写css的方法，就当给大家抛砖引玉，让大家行动起来让讨厌的button边的可爱点。

先预览一下把：button样式

button结构

...

现在做网站前端的真是命苦呀，要兼顾的浏览器就有n多个，一个项目坐下来累个半死，

我从网上整理了一些浏览器兼容的css方法，兼容IE6\IE7\IE8\Chrome\firefox等主流浏览器。

div类

1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
...

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

       为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。

...

针对IE8正式版的CSS hack目前可以找到的分为2种：

第一种：”\9″：

基本的写法:

...

目录菜单的最终效果如上图，代码的大致布局如下图

其实大家看到这个图很清晰的就能知道他的css原理所在，下面是详细的thml及css代码
HTML

<ul>
  <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>

CSS代码
[CODE].menu {
...

[CODE=html]CSS两列布局，右侧固定，左侧自适应宽度

这是右侧的内容

这是左侧的内容，自适应宽度

...

当大家看到这个柱状图的时候都想到用什么来实现了吗？
什么？不对用css也能实现，不可思意？out了吧，那就看看我们的国际友人怎么用纯css来写出来的。

点击预览一下

...

 

以前发了篇   高手用css画的房子   现在这个高手更牛！
...

看到 我爱css 网站列出了这些做css网站的技巧，很实用，很强大的说，转给大家看看

一、若有疑问立即检测
　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。
...