一起CSS

每天物流平台是一个网上物流平台，在这个平台里车主和货主可以自由发布所需的信息，可以在地图上看到自己的车或者货当前所在的位置，还可以用手记发送指令进行相关的操作。该平台预计 5 月 15 号发布第一版测试版，域名目前未知。

因为该公司没有提供logo，所以用了一个临时的，该平台所属广州华正道物流有限公司，德立物流有限公司好像其公司在香港开的分公司，具体什么关系不清楚，反正就是这么一个平台了。

查看大图 查看网页

HTML 标签 strong 和 em 都表示强调，在合适的地方使用这两个标签往往能给网站带来良好的效果。但他们有什么区别呢？ HTML 标签 strong 和 em 的区别，可以从三个层次上来谈： 首先看 HTML 4.01 中的说明：

em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。

em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果，因此也就成了 em 和 strong 的默认样式。 感觉上面已经解释得很清楚了？我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释：

em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。并且举了一个非常好的例子：

<p><em>Cats</em> are cute animals.</p>

强调猫，讨论的是哪种动物聪明可爱。

<p>Cats <em>are</em> cute animals.</p>

强调是，讨论的是猫是不是聪明可爱。

<p>Cats are <em>cute</em> animals.</p>

强调聪明可爱，讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。

<p><strong>Warning.</strong> This dungeon is dangerous.<strong>Avoid the ducks.</strong> Take any gold you find.<strong><strong>Do not take any of the diamonds</strong>,they are explosive and <strong>will destroy anything within ten meters.</strong></strong> You have been warned.</p>

strong 表示的是重要性上的强调，不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重，比如可以用两个 strong 来表示内容很重要。 可以看出，第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处，在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候，仔细阅读 HTML5 草案。有很多元素的语义，都阐释得非常清楚，对于我们如何在最恰当的地方使用最恰当的标签，非常具有价值。 em 是句意强调，加与不加会引起语义变化。 strong 是重要性强调，和局部还是全局无关，局部强调用 strong 也可以，strong 强调的是重要性，不会改变句意。

文章转自：岁月如歌

原文地址：http://lifesinger.org/blog/?p=909

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

一，设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

1. 能分清设计稿中的公共与私有的部分
2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二，切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

1. 切成所需要的图片（如何将需要的部分切出来）
2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
3. 在2的基础上，规划切出来的图片（包括文件分布）
4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

1. 还原设计稿视觉效果，并通过标准验证（HTML）
2. 在1的基础上，实现多浏览器的兼容（HTML）
3. 在2的基础上，标签语义化（HTML）
4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
7. 在6的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

文章转自：Webteam

原文地址：http://webteam.tencent.com/?p=133

文章列表或类似文章列表的区域，如果宽度不是很长，为了防止标题字数过多而换行或撑破容器，使布局错位，我们一般会让超过部分自动隐藏或显示成省略号。用程序很容易控制，但不利于 SEO ，所以很多人选择了 CSS 。但用 CSS 就没有问题了吗？我看未必。由于各个浏览器对 CSS 的支持不一样，所以出现了很多不兼容的情况，在这个问题上也一样。那到底会出现什么问题呢？

1、设置的是自动隐藏

自动隐藏，那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题，那么后面的字就会被“剪掉”，只显示半部分。也许你会说：那就设一个正好的宽度。但是你有没有想过：如果标题中有标点符号、英文字母或数字呢？标点符号还好解决，中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了，英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。

2、设置的是显示省略号

设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容，不兼容的浏览器仍然可能出现换行或撑破容器的情况。

3、自动隐藏于显示省略号一起用

一般情况下都是自动隐藏于显示省略号一起用，但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。

下面看一个例子，请点击这里，这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果：

从效果图可以看到：能显示省略号的浏览器效果还不错，但不能显示省略号的浏览就出现了文字被“剪掉”的情况，而且“剪”的部分都不一样。

另：如果加上 -o-text-overflow:ellipsis ，Opera 也可以显示省略号。

虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号，但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以，由于目前种种情况，我认为用 CSS 并不合适。

前几天《CSS制作仿image menu效果》的第二个有提示的例子（点击这里查看），为了防止图片与文字颜色一样是，文字难以看清，所以使用了滤镜和属性 opacity 制作了半透明效果，然而用 IE 8 beta 2 浏览时却没有效果，如下图：

我又用 IE 8 beta 2 查看以前《制作半透明效果》的例子，也是没有效果。其他浏览器都没有问题，为何 IE 8 beta 2 却没有效果？难道 IE 8 beta 2 连自家的滤镜都不认识？但是我曾经看过一个也使用了 alpha 滤镜例子，在 IE 8 beta 2 里有效果。难道是我的例子不兼容 IE 8 beta 2 ？于是我试图修改代码，然而无论我增加或删除某些属性，始终没有效果。最后来了个狠的——把 DOCTYPE （最顶上的那行）声明删掉，终于，IE 8 beta 2 里有效果了。

效果是有了，但 DOCTYPE 声明是不能删的啊。删了的话，兼容就是个问题了，最起码盒子模型的解释都不一样（详情请查看《用标准W3C盒子模型》）。就为了 IE 8 beta 2 ，而使例子在 IE 系列浏览器中都错位，不值得。当然可以用 CSS hack ，但是不推荐。更好的解决办法我认为是：1）使用 jQuery ；2）把提示文字定位到其他地方。

才用 IE 8 beta 2 没多久，就发现几个问题，看来 IE 8 beta 2 真是不怎么样，希望正式版会更好。