10月10日，我们的2007年英特尔研究论坛如期召开。在与记者朋友们的圆桌会上，大家提了很多很有深度的问题，表现出对我们提倡的研究方法论的极大兴趣。十七大召开了，我非常欣喜地发现，我们的观点与党中央提出的要有科学的发展观非常一致。注重科学体系，注重科学方法，符合当前时代的要求，我们会坚定信心，继续推动科研工作方法论的讨论，以促进产业界研发力量的发展，促进企业创新机制的建立与完善，共同提高企业的自主创新能力，使企业能可持续地创新和发展，为国家的自主创新和经济的可持续发展做出贡献。

英特尔是一家技术公司，在近四十年的发展过程中，形成了一套自己的科研体系，可以说是英特尔核心竞争力之一。我们借助今年英特尔研究论坛，与企业界和学术界的同行们一起分享交流了英特尔在科研工作中的心得体会。我们相信，本地企业研发实力的提高对于整个产业的健康发展至关重要，在这样一个健康的产业链中，所有的成员都会从中受益。

我们的高级院士Kevin Kahn博士在研究论坛的主题报告中很精辟地总结了英特尔的经验：对于英特尔这样的公司来说，长期成功的要素就是创新。只有不断创新，才能持续处于领先地位，从而使企业获得成功。在执行层面，这就要求有一套科学的管理方法和流程，它不仅要保证好的想法能持续产生，而且能保证好的想法转变为现实中的产品。在这套体系之外，还要有人才来保证创新体系的正常运作。这其中最重要的是，如何在企业中为技术人员设计一套职业发展体系，使他们不必转向管理职能就可以在职业道路上有充足的成长空间，从而可以保持技术队伍的高质量和稳定性。

虽然企业有不同的产品、不同的赢利模式和生态周期，但Kevin Kahn博士总结的成功要素是有普遍意义的。创新意味着风险，创新也要求有投入。如何管理风险、控制成本，只有讲究方法论，有科学的管理体系，才能从创新中取得最大收益。

各行各业面对的问题千差万别，创新的方法会有多种形式，我们希望能借助博客这个平台，能与朋友们展开交流互动，把创新方法论的讨论持续进行下去。

一天大家在团队中讨论“未知图片垂直居中”的问题，突发奇想用vertical-align:middle这个属性来实现，于是抽了时间做了下面这个不成熟的例子：
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

div{
  width:140px;
  height:140px;
  text-indent:-8px;
  text-align:center;
  line-height:138px;
  background:red;
  font-size:12px;
  *font-size:120px;
  *text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  vertical-align:middle;
}

HTML:

< div>& nbsp;<img src="ipodclassics.jpg" alt="iPod classic" />

初衷是不想用position来做,毕竟 大量的图片显示浏览器在渲染的时候会消耗 较多的资源。
缺点是 输出了 无意义的nbsp;, 而且font-size和font-indentd的计算公式不是很简单(所以以上的数字都是凑的^_^).

后来小马见了这个思路，用了点时间升级了代码,用:after输出代替了无趣nbsp ,代码见下：
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.tb-p-c{
  display: block;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  *font-size:123px;
}
.tb-p-c img{
  vertical-align:middle;
}
.tb-p-c:after {
  content: ".";
  visibility: hidden;
  font-size: 12px;
  margin-left: -5px;
}

HTML:

1

  <a class="tb-p-c"><img src="jishi070912_2.jpg" /></a>

这样子，恼人的nbsp消失了。大家对vertical-align:middle的渲染方式有了更进一步的了解了。还让很多同志发现了after这个伪类还可以用来hack.

结果圆心又给CSS升了次级：
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

.tb-p-c{
  display: table-cell;
  vertical-align:middle;
  width:140px;
  height:140px;
  text-align:center;
  *display: block;
  *font-size: 122px;
  background:red;
}
.tb-p-c img {
  vertical-align:middle;
}

这是第三次的升级，由于时间关系，没有测试上面的代码，原因是利用了display来渲染，感觉上还是会让浏览器多次渲染，所以偶没测试-_- 。
这次探讨给了我们很多很多的收获，相信如果有大家的参与，会有更多方式和我们没发现的观点。大伙别小气，多发表回复，一起提高。

1、css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.

1.1： 0px不需要单位，直接:margin:0

1.2：盒模型的缩写，语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的

1.3：css属性的最后一项”;”号省略。（不建议 ^_^）

1.4：字体宽度normal用400代替,bold用700代替。

1.5：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;

1.6：border边框的缩写，语法是border:width style color,类似boder:1px solid red;
1.7：背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)

1.8：字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.

1.9：list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

1.0：想凑10条, 还真难.就把删除无用换行符和空格算一个吧

教师，北京师范大学 教育技术学院。School of Educational Technology,Beijing Normal University。

站长，http://www.sociallearnlab.org，目前着力管理分支站点：SocialLearn’wiki，xiuli’blog。

都都的妈，协助都都建立个人好看簿，http://dudutang.haokanbu.com。

个人兴趣与教学工作的着力点，都围绕WEB2.0网络发展所引发的学习变革，具体包括学习的工具、学习的环境、学习的设计的变革研究。

xiuli zhuang
Email: xiuli.zhuang@gmail.com
Skype: sociallearn
Twitter: http://twitter.com/xiuli
Blog: http://sociallearnlab.org/blog/
Wiki: http://sociallearnlab.org/wiki
Bookmark: http://del.icio.us/sociallearn
Haokanbu: http://xiuli.haokanbu.com

演讲题目：WEB2.0课程设计与教学