CSS解决标题过长

// 五月 4th, 2008 // 1 Comment » // 网站设计

       如果标题列表中，标题过长，超出显示区域该怎么办呢？选择自动换行还是用省略号替换？

1、文章标题自动换行 

      这个很简单，给文章标题的CSS加上word-break:break-all;就好了。

      优点：文章标题自动换行，保证标题完整性；对SEO较为有利。

      缺点：不美观；只在IE下有效；

2、文章标题用省略号替换多余部分

      这个也不难，在文章标题的CSS里加上如下代码就可以了：

         display: block;
         width: 150px;
         overflow: hidden;
         white-space: nowrap;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

      其中，width属性是用来定义宽度的，文章标题超出这个宽度的部分会用…替换。

      优点：美观。 

      缺点：文章标题显示不全；搜索引擎看到的是不完整标题，不利于SEO。

      或者你还有更好的办法？不过，没事干嘛把文章标题弄那么长呢……

PS:

• text-overflow:ellipsis; IE私有的
• -o-text-overflow:ellipsis;以Presto为引擎的Opera私有的
• -icab-text-overflow: ellipsis; iCab私有的
• -khtml-text-overflow: ellipsis; 以KHTML为引擎的浏览器（如Konqueror Safari）
• -moz-text-overflow: ellipsis;以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）
• -webkit-text-overflow: ellipsis;以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）

如何写一个很小的 CSS 文件

// 三月 3rd, 2008 // 2 Comments » // 网站设计

      看了这篇文章，想想自己也经常和 CSS 打交道，对于压缩 CSS 还是有一点心得。总结一下，和大家分享。

      我们知道，在 XHTML+CSS 布局流行的今天，CSS 已经成为一个网站事实上的”门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢？这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量，同时缩短用户打开你网页所需的时间。既节省了流量开支，又获得了更好的用户体验，何乐不为呢？下面我们一起看看有哪些缩小 CSS 的方法。

1、简化你的注释
      很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：
            /*——–*/
            /*-comments—*/
            /*——–*/
      在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：
            /*Comments*/
      这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。

2、简化颜色代码
      在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下”标准形式”：
            color: #ffffff;
            color: #ff88ff;
      事实上，在 CSS 中是可以简化这个写法的，我们可以写成：
            color: #fff;
            color: #f8f;

3、使用单行属性代替多行属性
      在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 0;
            padding-right: 0;
      我们可以写成：
            padding: 10px 0 10px 0;
      顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：
            padding: 10px 0;
      上下左右都相同时，甚至可以写成：
            padding: 10px;
      对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。

4、当值为 0 时可省略掉单位
      例如：padding: 0;�
      同时设定多个元素的属性
      举例说明。例如：
            h1 {
                margin: 0;
                padding: 0;
            }
            h2 {
                margin: 0;
                padding: 0;
            }
            h3 {
                margin: 0;
                padding: 0;
            }
      更赞的写法是这样：
            h1,h2,h3 {
                margin: 0;
                padding: 0;
      }

5、删除空白和换行
      这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：
            h1  {
                margin: 0;
                padding: 0;
            }
            blockquote {
                background-color: #ffcccc;
            }
      应该处理成：
            h1{margin:0;padding:0;}
            blockquote{background:#fcc;}
      事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。

6、设定过期时间，使用 GZip
      如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。

任意样式的CSS文字封套

// 十二月 31st, 2007 // 1 Comment » // 网站设计

来源：http://www.csstextwrap.com/

      这个叫做CSS Text Wrapper 的网站可在线快速制作任意排列样式的文字，普通的HTML文字无非是左中右，或者图文简单混排，这个网站制作出来的文字可以形成任何形状。

做的自然一些的图文结合排版：

(全文…)

CSS&JS

// 十二月 27th, 2007 // 1 Comment » // 网站设计

CSS
is buggy.

Don’t
Panic!

We
can fix it!:-)

just
use *MORE* CSS.

or
use JS!:-)

BUT,

JS
is buggy,too.

of course,
we can fix it.

just
use *MORE* JS!

ORZ

只有一个文件的PHP论坛

// 十二月 17th, 2007 // 1 Comment » // PHP

      来源：http://www.kryogenix.org/code/cruciforum/

      “Cruciforum is a very simple web forum, designed to make it really easy to add a discussion forum to a website.”Cruciforum是一个用PHP写成的论坛，称它为留言板我觉得更合适。程序总共只包含一个PHP文件，不需要任何数据库，只需将这个文件上传至服务器，保证存放该PHP文件的目录是可写的，然后浏览该文件即可完成安装，安装和升级都十分简单。

      我简单了阅读了一下源代码，此文件将一些CSS, JS, 模板内容内嵌在PHP代码里，第一次访问此文件时，文件会进行Install，创建一些静态文件(CSS, JS, theme模板等)，功能上实现了留言板最基础的功能，发表话题、回复、email、搜索留言等功能都通过function实现，每个话题都会创建静态页。创建话题中提供了一个Textile的Class，但是第三方的Textile（http://textile.thresholdstate.com/）。

      默认的主题颜色也很素雅，另外论坛已经做了Akismet反垃圾评论的设定，只需输入AKISMET_API_KEY就可实现处理Spam comments，可惜的是Akismet已被封杀。论坛还默认支持Gravatars头像。

      另外此论坛不提供用户注册、管理员管理，也没有删除留言，所以我说更像留言板。所以它说，“then go ahead and use a more powerful forums system, like Vanilla or PHPBB. Go on, we won’t mind.”个人玩玩还是好东东哦，有空来做个汉化。

      下载：Cruciforum

(全文…)