帕兰映像 » CSS

网页设计中的默认字体样式详解

帕兰 — Thu, 28 Jan 2010 08:39:06 +0000

浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级

通常用户看到的页面的样式会受到三层控制:

第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式

和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
不用考虑基于字体大小（em）的设计。
在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。(...)
继续阅读网页设计中的默认字体样式详解

转载请注明: 来源于网页设计中的默认字体样式详解
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/
© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: CSS, 字体, 设计理论找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

精通CSS-1: 常用设计元素的高级CSS技巧

帕兰 — Sun, 10 Jan 2010 08:28:35 +0000

提升CSS技巧往往并不需要你去创造出什么前无古人后无来者的CSS技巧，事实上，网页设计中常用的一些布局和样式技巧，每个学CSS的人都已经知道怎么实现了，但我们总是想寻找更佳的解决方案。

本文收集整理了60多个高级CSS技巧，不管你是CSS新手还是高手，相信这些技巧都能助你更进一步提高自己的CSS技能。

1. CSS布局和用户界面技巧

当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。

The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。

New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚CSSCSS技巧，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。

Simple Page Peel Effect with jQuery & CSS
此教程结合 jquery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技巧，这会是一个不错的选择。

Equal height boxes with CSS
一个使用 CSS 创建等高栏式布局的基本实例，彻底抛弃表格布局的代码冗杂与混乱。

Adaptable view – how do they do it?
让用户手动改变网站的表现，似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技巧。

CSS: The All-Expandable Box
一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大，以适应所包含的内容，而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。

Four Methods to Create Equal Height Columns
一个使用 CSS 创建等高列的教程，共涉及四个不同的技巧。兼容所有主流浏览器（甚至 IE6 浏览器）。

Vertical Centering With CSS
这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技巧。同时也介绍了如何利用这些CSS技巧，创建一个简单小巧的垂直居中的站点。

CSS vertical center using float and clear
使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器，甚至兼容 IE5 版本。

Cross-Browser Inline-Block
本教程涵盖在多重内容情况下，创建一个内联块 (inline-block) 布局的方法，而不打破布局的完整性。

The CSS “Ah-ha!” Moment
谈论大多数设计师，在其职业生涯的某个时候发出 “Ah-Ha!” 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
本文给出了关于 CSS 层，相对和绝对定位。以及 Z-Index 属性的全面概述。

The CSS Overflow Property
详解了 CSS 溢出属性的工作流程。包括可见 (visible)，隐藏 (hidden)，滚动 (scroll)，自动 (auto)，以实例说明逐一说明。

Absolute, Relative, Fixed Positioning: How Do They Differ?
分析容易混淆的绝对 (absolute)，相对 (relative)，固定位置 (fixed) 之间的差异性，详细说明各个属性的区别。

display: inline-block
介绍在不同的样式中创建内联块 (inline-block) 的方法，并兼容不同的浏览器环境。

2. CSS导航和菜单技巧

良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用，也补充和完整了网站的其他设计元素。以下是一些关于创建导航的CSS技巧和提示，使其两者兼备。(...)
继续阅读精通CSS-1: 常用设计元素的高级CSS技巧

转载请注明: 来源于精通CSS-1: 常用设计元素的高级CSS技巧
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

通过这些关键词: CSS, CSS技巧找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

18个CSS精简压缩工具和技巧

帕兰 — Sat, 12 Dec 2009 03:28:51 +0000

我们已看过8个在线CSS优化工具和CSS代码精简技巧，本文则为你带来18个CSS精简压缩工具和技巧。

压缩还是不压缩

在我们讨论如何压缩CSS之前，需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲，而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师，你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站，可能就没有必要做额外的压缩。同样，如果你在编写需要和一个开放团队分享的代码，插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而，如果你在设计一个需要大量CSS的大型网站，你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间，但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时，很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式，丢掉它。不要借口稍后或许会用到，你也知道它们是杂乱的。除非你有一个合理的理由，否则不要添加它们。

缩写

CSS缩写是一种将多行CSS合并到单行的方法。养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子：

长写版本:

#container{
    padding-top:5px
    padding-right:10px
    padding-bottom:30px
    padding-left:18px
}

缩写版本:

#container{
    padding:5px 10px 30px 18px;
}

了解更多CSS缩写技巧，可以访问下面的文章：

推荐阅读阿捷的文章：《常用CSS缩写语法总结》

CSS Sprites

CSS sprites背后的最初想法是减少HTTP请求的数量以加快页面的加载时间。Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中，通常是一个网格格式的图片。每个单独的图片通过切换大的sprite图片的background-position来显示。对于CSS代码来说，使用 sprite技术可以大大的提高代码的重用度和可维护性，这会明显的减少CSS的代码量。

要了解更多关于CSS Sprites，请查看Chris Coyier在CSS-Tricks上的教程:

当然，前端观察也有一些很有价值的关于CSS Sprites的文章和技巧。

减少注释

我喜欢在代码里面使用注释。我添加的注释越多，我就能在视觉上更快的定位到代码中的不同的部分。然而，如果你需要使用少的资源来高度优化的CSS，过度的注释就会吃掉宝贵的字节。所以，试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。

合理的字体类型(font-Family)

当文件大小成为一个大问题的时候，不要将替代字体包进你的font-famly中。去掉所有不必要的累赘，并将你的额外选项减少到一到两个。

之前:

#container{font-family:Palatino,Georgia,Times,serif;}

之后:

#container{font-family:Palatino,serif;}

关于字体，强烈推荐阅读一下玉伯写的《三谈 Web 默认字体》，文中提到的几篇文章也都值得我们去阅读和思考。

使用16进制色彩

为了减少字节数，将所有RGB色值转换成他们对应的16进制值。这开起来可能没有太大的意义，但是任何字节都是值得的！

之前:

#container{color:rgb(131, 100, 219);}

之后:

#container{color:#8364DB;}

去掉断行

查看每一个样式属性，并将不需要的硬返回去掉。你也可以去掉最后一个分号。

之前:

#container{
    margin:5px;
    padding:5px 10px 30px 18px;
}

之前:

#container{margin:5px;padding:5px 10px 30px 18px}

10个在线CSS压缩工具

CSS压缩工具可以自动完成清理你的代码的大部分工作。它们中的很多会告诉你你的文件被压缩的百分比，所以请多尝试几个以了解哪个是最好的。(...)
继续阅读 18个CSS精简压缩工具和技巧

转载请注明: 来源于 18个CSS精简压缩工具和技巧
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

通过这些关键词: CSS, 设计理论找到更多你可能喜欢的内容

CSS网页布局中易犯的10个小错误

帕兰 — Wed, 07 Oct 2009 05:03:50 +0000

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查html元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。(...)
继续阅读 CSS网页布局中易犯的10个小错误

转载请注明: 来源于 CSS网页布局中易犯的10个小错误
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

通过这些关键词: CSS技巧找到更多你可能喜欢的内容

CSS盒模型详解

帕兰 — Mon, 21 Sep 2009 11:30:35 +0000

CSS盒模型，多么专业的一个术语。但你不要被它吓到，不过就是一些CSS基本属性的应用而已。

CSS 盒模型

网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：

如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。

这个图表很好地展示了作用于页面上任意盒子的数值。

注意以上两个例子中，margin 都是白色的。Margin 比较特别，它不会影响盒子本身的大小，但是它会

影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的：

宽度 = 自身宽度+左内边距+右内边距+左边框+右边框

高度 = 自身高度+上内边距+下内边距+上边框+下边框

值未声明的情况

如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)

块级盒的默认宽度

如果未声明宽度，并且盒子是静态或者相对定位的，宽度会保持 100％的宽度，padding 和 border 会向内推动，而不是向外扩展。

但是，如果明确设置盒子的宽度为 100％，那么 padding 就会向外延展。(...)
继续阅读 CSS盒模型详解

转载请注明: 来源于 CSS盒模型详解
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

通过这些关键词: CSS 找到更多你可能喜欢的内容

CSS Overflow属性详解

帕兰 — Sun, 20 Sep 2009 09:47:07 +0000

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：(...)
继续阅读 CSS Overflow属性详解

转载请注明: 来源于 CSS Overflow属性详解
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

通过这些关键词: CSS, CSS属性, overflow 找到更多你可能喜欢的内容

8个CSS图表数据制作实例

帕兰 — Sat, 19 Sep 2009 10:07:00 +0000

有很多方法可以用来呈现数字, 我们最常用的就是制作一张静态图片. 但你也可以考虑CSS。使用CSS样式化元素来实现数据图表化. 可以使数据的控制更具灵活性。

下面. 你将看到8个CSS技巧. 教你如何使用CSS来制作漂亮、灵活的图表。

1. CSS线条图表数据

这个实例包含了三种图形数据的实现方法。上面的Basic Bar Graph实例中使用了一个

包含图表. 一个元素作为柱形的block. 然后再使用百分比来控制柱形的宽度. 这种方法中一个优点就是使用了元素而不是段落
元素。另外两个例子则是使用了定义列表dl和无序列表ul实现。

查看演示1

2. 符合标准的可访问的可视化CSS数据图表

作者Wilson Miner研究数据图表的Web accessible可访问性概念和标准兼容性技术. 涉及优势、限制或是说两者取长补短的折中用法。这里有三个使用无序列表ul基本结构实现的实例。

(...)
继续阅读 8个CSS图表数据制作实例

转载请注明: 来源于 8个CSS图表数据制作实例
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/
© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: CSS, 图表找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

CSS背景属性Background详解

帕兰 — Fri, 18 Sep 2009 05:13:43 +0000

本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。

css2 中的背景(background)

CSS2 中有5个主要的背景(background)属性，它们是：

background-color: 指定填充背景的颜色。
background-image: 引用图片作为背景。
background-position: 指定元素背景图片的位置。
background-repeat: 决定是否重复背景图片。
background-attachment: 决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

基本属性

背景色(background-color)

background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。

background-color: blue; background-color: rgb(0, 0, 255); background-color: #0000ff;

background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

背景图(background-image)

background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。(...)
继续阅读 CSS背景属性Background详解

转载请注明: 来源于 CSS背景属性Background详解
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/
© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: CSS, CSS属性, 背景找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

21个神奇的CSS技巧

帕兰 — Thu, 17 Sep 2009 05:31:15 +0000

CSS有无穷的发挥力。继53个CSS技巧后，让我们再来欣赏21个更加高阶更加神奇的CSS技巧，它们可以让你实现一些非常酷的网页效果。需要提醒的是，这些技巧并不一定都适合使用，但却有助你对CSS的运用更加娴熟。

1. 跨浏览器的CSS幻灯片

2. 基于CSS的图像地图

3. 纯CSS的LightBox灯箱效果

(...)
继续阅读 21个神奇的CSS技巧

转载请注明: 来源于 21个神奇的CSS技巧
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/
© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: CSS, CSS技巧找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

CSS定位属性Position详解

帕兰 — Tue, 15 Sep 2009 09:36:02 +0000

CSS中最常用的布局类属性，一个是Float(CSS浮动属性Float详解)，另一个就是CSS定位属性Position。

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

#div-1 { position:static; }

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

#div-1 { position:relative; top:20px; left:-40px; }

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。(...)
继续阅读 CSS定位属性Position详解

转载请注明: 来源于 CSS定位属性Position详解
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/
© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: CSS, CSS属性, position 找到更多你可能喜欢的内容

第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.