如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...

跟帖中有同学给出了一些解决办法, 都说得很好, 但是我还是想说说自己常用的处理办法. 我这也不是什么高明的办法, 5 年前就有人在用, 但它方便快捷.

原理很简单, follow me.
1. 给 IMG 元素一个透明图片. 可以选用 GIF 图片, 因为文件头比较小, 图片 1px*1px 就可以了. (真扣!)
2. 设定图片的宽和高. width="150" height="150"
3. 然后通过 style 属性的 background 将需要显示的图片地址作为背景显示在 IMG 元素上.
4. 图片的 background-position 设为 50% 50%.

Okay, 我们已经得到一个不拉伸的, 垂直和水平居中的缩略图. 例子看下面.

<img src="{某透明图片的 URL}" alt="Google 别走!" style="background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />

另外, 比较常用的方法还有用 JavaScript 在 DOM ready 的时候将图片载入, 并通过计算图片和外框的大小为图片加上 margin 令图片居中. 这样可以让 document 优先加载, 保证页面显示速度, 但是, 一旦图片数量比较多, IE 可能会卡.

好了, 技术说完了八卦一下. 5 年前发生了什么? 记得当时我刚买计算机, 上网下载图片总是下载到一个透明的 GIF 图片, 百思不得其解, 所以研究了一番 (当年的小白很杯具). 后来发现网站上的图片都是通过背景的方式显示出来的. 虽然网站要防止用户在网页上下载图片几乎是不可能的, 但是这个简单的方法起码可以做到两点.
1. 保证另存网页的时候不会下载页面上的图片.
2. 粗心的用户下载了大量图片后才发现下载下载的全部是透明图片.

• CSS 中背景图片定位
• CSS 属性 background-position 的 W3C 定义
• 纯代码打造圆角边框
• CSS 菜单列表设计
• CSS: 突破框框的设计

字符实体相对于图片存在的优势

1. 加载速度快, 因为字符都是基于文本的.
2. 可以更具字体尺寸进行缩放.
3. 可以方便地改变颜色和改变造型.

撇号和引号

互联网上大部分的排版错误可能是混用了撇号好引号. 我们经常会将左单引号 (‘) 当作撇号 (’), 双撇号 (") 当作双引号 (“ ”) 来使用.

正确地使用撇号和引号, 你可以使用右单引号 (’) 当作撇号. 使用左双引号 (“) 和右双引号 (”) 作为引用符号.

箭头符号

我尤其发现箭头符号很有用, 因为他们可以作为指向的箭头和面包屑 (页面导航) 的分割符.

链接分隔符

• ( • ) 和 ⋅ ( ⋅ ) 是我喜欢的字符实体, 我将他们用来分割链接.

商标, 版权, 度数和货币符号

另外的一些通用符号可能就数商标, 版权, 度数和货币符号了.
Trademark ™ | © Copyright | Registered Trademark ®
Degree: 29° | 26 ℃ | 60 ℉
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro

用于网页设计的符号

这里有一些符号, 可能你会用在设计网页布局上.

各种各样的符号

这里有一些其他的符号, 很有可能你永远不会用到 (但它们很酷).

渲染问题

注意到 Mac 和 Windows 有不一样的渲染系统. 字符实体会在不同的操作系统中有不同的视觉表现. 在使用前, 请先核对一下.

参考链接

1. 这是一个完整的字符实体参考, Bigbaer.com - Character Entity Reference
2. W3Schools.com - Symbols Entities
3. Webstandards.org - Symbol Entities

译者的话

本文翻译自 Web Designer Wall - Using HTML Symbol Entities. 我同意作者关于字符使用三个优势的说法, 但是我不建议用户滥用这些字符, 因为不同的操作系统, 不同的浏览器和不同的界面字体都会影响其外观, 甚至是否支持某个字符都不确定.

如果你用某款手机打开这个页面, 可能会看到一些框框, 那是因为手机的字体集比较小, 字体库中没有这样的字符, 所以浏览器无法识别. 另外, 如果你使用不同浏览器打开这个页面, 出来的效果也可能大不相同. 这些差异都将导致用户体验逊色不少.

另外, 图片虽然讨厌, 但也有字符无法比拟的优越性. 试问一个字符可以用多个颜色来显示吗?

最后, 我建议择其常用字符, 必须使用的字符. 如 ©, <, >... 这些应用广泛的和必不可少的可以放心使用, 一些自己很少看到的 (如 ☃) 就不要用了.

尽信文不如无文, 希望看完这篇文章的朋友也有自己的见解, 欢迎下一个分享的人.

• CSS3 基础知识
• CSS 菜单列表设计
• 纯代码打造小圆角
• 线上 JSON 编辑工具
• Lazy Load, 延迟加载图片的 jQuery 插件

CSS 很直观, 但显然不够灵活, 导致页面设计中出现大量冗余代码. 不能使用变量和循环, 若想清除某个类型所有属性的值还需要一句一句的清除, 而不是一句完成. 而最令人痛心的莫过于现实圆角边框, 或许以下的代码是我们梦寐以求的:

.roundbox { round:3px; } /* 圆角大小为三像素 */

奈何事与愿违, W3C 里面没有这样的东西. 某些浏览器支持一些特殊的属性可以实现类似功能, 但那并不能得到其他浏览器的支持. WordPress 后台就使用了这样的属性, Firefox 等一些浏览器上显示非常好看, 但 IE 上却惨不忍睹.

为了实现小圆角, 各网站是各出奇招, 什么方法都有. 而我比较喜欢百度知道的实现办法, 因为零图片, 并且易于控制, 因为圆角部分是在 box 外部, 随时可以无害删除. 比很久之前我介绍的纯代码打造小圆角强多了.

百度知道的方法借用了 div 在 float:none 时占用全行的特性, 在 box 上方和下方各都放置几个 div, 并对这些 div 设置背景色, 边框和外边距. 也就是说, 我们只要固定了外层的宽度, 其他的就不需要操心了. 我模仿百度知道的样式做了一个例子, 效果可以参考一下右边的截图. 实现代码如下:

<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
	<div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
		Cascading Style Sheets
	</div>
	<div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
		Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.
	</div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>

其中有一点是很重要的, 记得为上下圆角所在的行添加 overflow:hidden 属性, 否则在 IE 中将会相当的恶心.

圆角是实现了, 但并不是完美无瑕的, 边角有锯齿 (纯代码打造小圆角里面的方法可以消灭锯齿, 只要你不嫌麻烦). 为什么不能使用过渡颜色呢? 因为圆角所在的行只能控制背景和边框两处的颜色, 所以不能在同一行搞出比较复杂的颜色过渡. 因为颜色被限制了, 所以圆角的大小也被限制了 (有锯齿的圆角太大会显得很难看), 如果你的 box 有边线, 圆角大小建议不要超过 4 个像素, 如果没边线, 也不要超过 6 个像素. 有更大的圆角需要最好还是采用图片, 处理简单又方便.

访问过腾讯问问的朋友可能会发现, 它的样式是抄袭百度知道的. 但你知道吗? 其实它的圆角效果是使用图片实现的. 有兴趣的朋友可以去研究一下.

以下是我个人的一点建议, 希望对你有帮助.

什么时候使用纯代码制作圆角边框?
1. 你驱使代码的能力胜于图形.
2. 你追求更快的网页显示速度, 就算是微乎其微的差别.
3. 在模板或主题中使用.

什么时候使用图片制作圆角边框?
1. 你驱使图形的能力胜于代码.
2. 你不在乎所差不几的网页显示速度, 更注重直观和维护方便.
3. 在文章或其它动态内容中使用.

• 纯代码打造小圆角
• 将 Blogroll 分为两栏 (1)
• 用 CSS 背景属性代替图片 SRC
• CSS z-index 属性的使用方法和层级树的概念
• CSS 菜单列表设计

1. 做一个直角的 DIV, 给他画上边框. (以下图片都以左上角为例)

2. 在 DIV 内部画第二个 DIV, 背景色与页面背景颜色相同.

3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.

4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.

5. 将第三个 DIV 挪到右下角的位置, Done.

我在 Yahoo! 截取了这段代码, 改了一下. 下载点击
最终效果如下图所示:

其他样式的圆角同样可以通过这样的方法来实现. 当然, 这个是比较简单的. enjoy...

• 向访客和爬虫显示不同的内容
• CSS3 基础知识
• 用 CSS 背景属性代替图片 SRC
• CSS: 突破框框的设计
• 用图片代替文字标题