Badst' weblog

（手动）摘要、自动摘要，和内容预告（当你使用 More 标签时，首页上显示的部分文章内容），这三者很容易混淆。自动摘要和内容预告都与（手动）摘要相关，但与它也有一定的区别。

这三者之间的关系是这样的：当文章没有（手动）摘要时，而且当前文章模板使用 the_excerpt() 的模板标签时，WordPress 将会自动截取文章的前 55 个单词作为自动摘要；而当文章模板使用 the_content() 的模板标签时，WordPress 则会在文章中搜索 More 标签，并将其之前的部分作为内容预告。

http://codex.wordpress.org/zh-cn:摘要

总算明白了为什么别人主页上的每个文章都是一段话配一个图片，原来是要手动加上去的。

我现在的主题，首页上是内容预告，也就是more...之前的所有内容，

函数<!--?php the_content('Read the rest of this entry &raquo;'); ?-->

如果没有more,那就是全部内容。。这样看起来确实很费力。

而在Archive里的则是摘要内容

函数<?php the_excerpt(); ?>

可以看到根本没有样式，只是一堆文字的堆积，我用的是the_content()模版标签，有more的仅选取more之前的所有文字，没有more的则选前面的150个单词。

一个很好玩的小游戏，用HTML5做的，绝对没用到Flash，效果非常好。
游戏方法：剪断绳子，把糖果喂给青蛙吃。过程中有碰到星星加分。
现在开始玩吧>>

时代在变，web标准也在变。

这是一篇转载的文章，主要内容是《Jeremy Keith在 Fronteers 2010 上的主题演讲》的翻译。
译文请看：http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
原文请看：http://adactio.com/articles/1704/

或者下载该PPT：designofhtml5.pdf(372.51 KB)

抑或观看视频：http://fronteers.nl/congres/2010 ... -html5-jeremy-keith

Jeremy Keith在 Fronteers 2010 上的主题演讲

今天我想跟大家谈一谈HTML5的设计。主要分两个方面：一方面，当然了，就是HTML5。我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范。

实际上，确实有人会谈到规范的内容。史蒂夫·福克纳（Steve Faulkner）会讲HTML5与可访问性。而保罗·艾里什（Paul Irish）则会讲HTML5提供的各种API。因此，我今天站在这里，不会光讲一讲HTML5就算完事了。

说老实话，在正式开始之前，我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑：这会子你一直在说HTML5，难道我们还不知道什么是HTML5吗？大家知道，有一个规范，它的名字叫HTML5。我所说的HTML5，指的就是这个规范。但问题是，有些人所说的HTML5，指的不仅仅是这个规范，还有别的意思。比如说，用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5，不包含CSS3，就是HTML5。

类似的术语问题以前也有过。Ajax本来是一种含义明确的技术，但过了不久，它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax，对不对？今天，HTML5也面临同样的问题，它本来指的是一个特定的规范，但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5，不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身：HTML5。

刚才已经说了，我今天想要讲的内容不多，也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面，即HTML5的设计。换句话说，我要讲的不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。

设计原理

设计原理本质上是一种信念、一种想法、一个概念，是你行动的支柱。不管你是制定规范，还是制造一种有形的物品，或者编写软件，甚至发明编程语言。你都能找到背后的一个或者多个设计原理，多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史，像国家和社会这样大规模的构建活动背后，同样也有设计原理。

就拿美国为例吧，美国的设计原理都写在了《独立宣言》中了。

我们认为这些真理是不言而喻的，人人生而平等，造物主赋予了每个人不可剥夺的权利，包括生存、自由和追求幸福。

这里有一句口号：生存、自由和追求幸福。这是被写进宪法中的核心理念，它关系到我们所有人的一切，也就是我们构建自己社会的原则。

原来有个tag叫“css3.0"，别名是“css3-0”，想改成“css3”，但却被提示别名已经被使用。

于是输入网址：http://badst.org/css3

却跳到 CSS3:文字阴影知多少 这篇文章，我就想到可能是因为中文的问题。

在网上搜索解决方法，需要用到phpmyadmin修改数据库。

步骤

1. 用phpmyadmin打开wordpress的数据库，打开wp_terms表，查找你要更改的别名，我的是dedecms2
2. 删除掉以前的那个

下班再弄吧。

CSS3中新增的3个边框效果，圆角边框，边框阴影，边框图片。

1. border-radius
2. box-shadow
3. border-image

浏览器支持情况：

前两个效果所有浏览器均以统一标准支持，border-image针对不同浏览器需增加专有代码：

Firefox: -moz-

Opera: -o-

Safari/Chrom: -webkit-

目前最新的IE9不支持border-image

border-radius

border-radius:25px;

其中的px可以改为%（整体box长宽的百分比）或em（内容字体大小的倍数比例）

如果为100%那就是一个整圆了。

定义四个角不同的值可以写成

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

简化写法，与margin同理，从topleft开始顺时针旋转。

border-radius:上左 上右 下左 下右

border-radius:上左下右 上右下左

border-radius:上左 上右下左 下右

box-shadow

box-shadow: x偏移 y偏移 阴影扩散半径 阴影颜色

不可使用%单位，可使用px,pt,em

如阴影扩散半径省略则默认为0，——> CSS3属性Box-shadow

border-image

border-image:url() 缩放x 缩放y round/stretch

round:平铺

stretch:拉伸

确实不好解释，看w3school的演示吧。

这个很不好用，必须定义border-width，但这样又拉宽了整个盒子的大小。

但确实激发了不少创作的可能。

参考：http://www.w3schools.com/css3/css3_borders.asp

这是一个非常基础的属性了，但是能实际用好还是很需要经验的。

display属性非常多，多到记不住，仔细想想比较常用的也只有：

1. block 块状，可以定义宽度高度等。
2. inline 并排，结尾不换行，常用来定义菜单横向排列。
3. none 完全隐藏。

但前几天一直在blueidea看到一个家伙发的帖子，让用div实现一个表格的效果，一个左边一栏右边两行的表格。

就想到前阵子搞的那个失败了的主题，因为评论的Ajax效果出错放弃了，那评论的样式可是花费了我不少心思。

于是乎想到似乎那里有实现过这个效果。于是翻来随便简化了下，果然可以了。

看那代码，关键两个字：

1. 外面的DIV，display: table
2. 里面的DIV，display: table-cell

演示页面：div-table —— 原来是ol/li的排版，我给改成了DIV的。

一个强大的例子：

第一个字体写英文字体，然后第二个紧跟着中文字体。

font-family: Arial, 'Microsoft YaHei', Verdana, Sans-Serif;

这种方法Chrome支持，IE貌似支持的不好。已经确认IE无法支持。速度把CSS改回来。

IE会先用Arial的字体套在中文上，发现没效果，就用了默认的宋体！

目前没有解决办法，暂时全用雅黑吧。

例：

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.

目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.

接下来看看text-shadow的语法:

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.
其中任意一个值可以为零也可为空(将做默认处理)
举个例子:

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a
一些试验与demo
我做了点小小的试验,做成了一个Demo页面.

定义和用法
text-transform 属性控制文本的大小写。
说明
这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

lowercase定义无大写字母，仅有小写字母。

http://www.w3school.com.cn/css/pr_text_text-transform.asp