﻿﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>西米CC</title>
	<atom:link href="http://ximicc.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://ximicc.com</link>
	<description>WordPress博客建站资源 - DIV+CSS技术视频教程</description>
	<lastBuildDate>Tue, 09 Mar 2010 08:47:55 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Wordpress主题分享之一:Equator</title>
		<link>http://ximicc.com/wordpress-theme/equator/</link>
		<comments>http://ximicc.com/wordpress-theme/equator/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 02:35:12 +0000</pubDate>
		<dc:creator>ximicc</dc:creator>
				<category><![CDATA[WordPress主题]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=974</guid>
		<description><![CDATA[<img class="alignnone size-full wp-image-973" title="equator250" src="http://ximicc.com/wp-content/uploads/2010/03/equator250.jpg" alt="ThemeForest – eQuator" width="250" height="250" />

这是一个非常精致的主题，其布局模式能满足你很多的博客设计理念：两栏固定、丰富的widget支持、推荐文章图文幻灯、导航栏定制、稿件交互等等，并且在多款浏览器上兼容良好，文章的缩略图尺寸也能自适应，加上其灵活强大的广告功能设置，一定能帮助你搭建出一个强大的博客！.....<p class='read-more'><a href='http://ximicc.com/wordpress-theme/equator/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p><img class="alignnone size-full wp-image-973" title="equator250" src="http://ximicc.com/wp-content/uploads/2010/03/equator250.jpg" alt="ThemeForest – eQuator" width="250" height="250" /></p>
<blockquote><p>Now this is a theme I really like, eQuator wordpress theme Global community is a beautiful theme with an amazing layout that gives you all the options you could want in a template, 2 columns, fixed layout, full widgetized sidebar, a featured article slider showing images and posts at once, you can change and modify the top menu bar, allow other users to sign up and start posting creating your very own community, threaded commenting system, multi-browser compatible, integrated dropdown menu, auto resizing of thumbnails with timthumb, multiple ads setting, add a wordpress membership plugin to this theme and you got yourself one powerful website . Comes with PSD’s, Documentation and additional plugins Enjoy!</p></blockquote>
<p>这是一个非常精致的主题，其布局模式能满足你很多的博客设计理念：两栏固定、丰富的widget支持、推荐文章图文幻灯、导航栏定制、稿件交互等等，并且在多款浏览器上兼容良好，文章的缩略图尺寸也能自适应，加上其灵活强大的广告功能设置，一定能帮助你搭建出一个强大的博客！</p>
<p><img src="http://ximicc.com/wp-content/uploads/2010/03/Equator-Community-wordpress-theme.jpg" alt="Equator-Community-wordpress-theme" title="Equator-Community-wordpress-theme" width="450" height="716" class="alignnone size-full wp-image-981" /></p>
<blockquote><p><strong>Main Features</strong></p>
<p>- 2 Columns CSS Layout<br />
- Sidebar Widget ready Layout<br />
- Multilevel Threaded Comments<br />
- Custom Advertisement Sections [ Editable via Admin Theme Options]<br />
- Custom Feedburner Integration [ Editable via Admin Theme Options]<br />
- Custom Twitter Integration [ Editable via Admin Theme Options]<br />
- Author Information in Post Single Page<br />
- 7 Social Linking (Enable / Disable via theme options)<br />
- Related Posts<br />
- Popular Posts<br />
- Recent Comments<br />
- Custom Advertise section beside related posts box.<br />
- User Community Link Feed<br />
- Compatibility (IE 6, IE 7 , IE 8, Firefox, Opera, Safari, Chrome)<br />
- And Much More</p>
<p><strong>Files Included</strong></p>
<p>- Layered PSD File with for ease of slicing<br />
- PDF File Help file with clean instructions</p>
<p><strong>Assets &amp; Scripts Credits</strong></p>
<p>- jQuery<br />
- jQueryTooltip<br />
- Unitpngfix<br />
- Drop Down Menu – Superfish<br />
- Wefunction for icons</p></blockquote>
<p><strong>主题有以下特点：</strong></p>
<p>* 2栏CSS布局<br />
* 侧栏支持widget<br />
* 多级评论<br />
* 自定义广告单元[通过管理主题选项可编辑]<br />
* 自定义集成Feedburner[通过管理主题选项可编辑]<br />
* 自定义集成Twitter[通过管理主题选项可编辑]<br />
* Author Information in Post Single Page<br />
* 7 Social Linking（启用/禁用通过主题选项）<br />
* 相关文章、热门文章、最新评论等<br />
* 相关文章处可自定义广告单元<br />
* 兼容(IE 6, IE 7 , IE 8, Firefox, Opera, Safari, Chrome)</p>
<p>大致就这些，压缩包中有详细说明，压缩包内提供了PSD原文件。</p>
<p>下载地址（Download Links）: >>><a href="http://www.ziddu.com/download/8834799/eQuator.zip.html" target="_blank">Ziddu网盘</a> >>><a href="http://www.xun6.com/file/3c8436922/eQuator.zip.html" target="_blank">Xun6网盘</a></p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=974&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/wordpress-theme/equator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS实例教程：复合型CSS条状图表（下）</title>
		<link>http://ximicc.com/css-tutorial/css-for-bar-graphs-2/</link>
		<comments>http://ximicc.com/css-tutorial/css-for-bar-graphs-2/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 05:35:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=125</guid>
		<description><![CDATA[在CSS样式中，dl部分只是简单的把内外边距设置为0，dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float浮动，或者是希望浮动元素后面的内容不被其float浮动所影响，这个时候我们就需要设置clear来清除这种浮动关联。举个例子，假如文档中有下列内容：.....<p class='read-more'><a href='http://ximicc.com/css-tutorial/css-for-bar-graphs-2/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>在CSS样式中，dl部分只是简单的把内外边距设置为0，dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float浮动，或者是希望浮动元素后面的内容不被其float浮动所影响，这个时候我们就需要设置clear来清除这种浮动关联。举个例子，假如文档中有下列内容：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">float:left;width :200px;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是第一列，</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">float:left;width :200px;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是第二列，</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是新起一行的段落。</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>如果不使用浮动清除，那么第3个P里的文字就紧跟在第一、二个P显示在同一行，这个时候如果要达到预期中的效果，我们需要在第3个P的样式中加一个清除浮动：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">float:left;width :200px;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是第1列，</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">float:left;width :200px;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是第2列，</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">clear:both;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这个是列的下面。</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p><span id="more-125"></span><br />
在本例中，如果dt不使用浮动清除，三个图表的内容就无法实现对齐，如图：</p>
<p><img src="http://ximicc.com/wp-content/uploads/2010/01/s200839223743.jpg"  /></p>
<p>dt和dd涉及到的其它样式都比较简单，主要是背景、宽高、浮动等属性，这里就不一一解释了。进度条效果的实现依靠背景覆盖来完成，因为两张背景图只是在色彩鲜明度上有所差异，使得最终的效果呈现出类似一个半透明图层覆盖在底部背景上，兼顾了视觉上的差异和融合。</p>
<p>指针的效果在strong标签中定义，来看看它的完整CSS：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">dd</span><span style="color: Gray;"> </span><span style="color: Blue;">div</span><span style="color: Gray;"> </span><span style="color: Blue;">strong</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">absolute</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">right:</span><span style="color: Gray;"> -</span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">top:</span><span style="color: Gray;"> -</span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;"> url(&quot;/b20083922100.gif&quot;)</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">24</span><span style="color: Red;">px</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">9</span><span style="color: Red;">px</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-indent:</span><span style="color: Gray;"> -</span><span style="color: Maroon;">9999</span><span style="color: Red;">px</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">overflow:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">hidden</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">}</span></li></ol></div>
<p>里面所用到的背景就是指针图像，需要注意的是该图像的尺寸是24*9像素，所以这里有几个数值要进行精确的计算。首先因为一部分的指针图像要显示在dl区域之外，因此使用了absolute绝对定位方式；其次因为dl元素的高度我们设置成了20像素，所以指针的上、下溢出部分在高度上均为(24-20)/2即2像素，水平方向的溢出也同理参照指针的宽度9像素进行计算，根据这些数据最终计算出right和top的值。最后通过text-indent属性设置文本的缩进，目的是实现对文本的隐藏。</p>
<p>最后在CSS样式中还要加入一行Hack完善其在IE中的效果：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">*</span><span style="color: Gray;"> </span><span style="color: Blue;">html</span><span style="color: Gray;"> </span><span style="color: Blue;">dd</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span><span style="color: Gray;"> </span><span style="color: Green;">float:</span><span style="color: Gray;"> </span><span style="color: Red;">none</span><span style="color: Gray;">; </span><span style="color: Olive;">}</span></li></ol></div>
<img src="http://ximicc.com/?ak_action=api_record_view&id=125&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/css-for-bar-graphs-2/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>关于CSS中字号控制的兼容性研究</title>
		<link>http://ximicc.com/css-tutorial/how-to-size-text-css/</link>
		<comments>http://ximicc.com/css-tutorial/how-to-size-text-css/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 05:12:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=116</guid>
		<description><![CDATA[<p></p><p>过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式，涌现了很多与之相关的技术与理论资料，其中相当重要的一个领域就是关于印刷中字号和行高的精确控制。但问题是：网络是一个相当特殊的媒介，浏览者一设计者一样拥有几乎同等的控制权限，以文本为例，虽然其呈现方式很大程度上取决于设计者的意愿，但还是会在不同的浏览器或平台上存在或多或少的差异。</p>
<p>在本文中，我们将探讨在设计者意愿与用户需求之间，如何让文本的呈现方式取得一种平衡。为了达到这个目的，.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/how-to-size-text-css/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式，涌现了很多与之相关的技术与理论资料，其中相当重要的一个领域就是关于印刷中字号和行高的精确控制。但问题是：网络是一个相当特殊的媒介，浏览者一设计者一样拥有几乎同等的控制权限，以文本为例，虽然其呈现方式很大程度上取决于设计者的意愿，但还是会在不同的浏览器或平台上存在或多或少的差异。</p>
<p>在本文中，我们将探讨在设计者意愿与用户需求之间，如何让文本的呈现方式取得一种平衡。为了达到这个目的，我们需要对传统的处理方法进行研究，反思其中的实践经验和不足。我在Owen  Briggs的<a rel="external" href="http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html" target="_blank">pioneering  work</a>基础上，总结分析了六大条目，配之以大约160张截图，希望能增进大家的理解和实践。</p>
<p><strong>测试样本</strong></p>
<p>用于测试的对象是两列Arial字体的文本，左侧我们视之为主内容，右侧为边栏。我们测试的平台和浏览器主要是MAC下的Safari  2, Firefox 2，Opera 9.5，以及开启ClearType效果的Windows  XP下的IE6和IE7.每种平台或浏览器都以默认设置为运行环境，我们的测试主要是看看各个浏览器如何渲染其中的小、中、大、特大文本，以及在90%, 100%,  110%, 以及120%的缩放比例下具体效果如何。</p>
<p>首先很有必要来验证一下用于测试的浏览器在初始的情况下有着一致的标准，在<a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-0.html" target="_blank">基础例子</a>中大家可以看到，各款浏览器中默认的文本字号都是16px，若对字号进行改变，文本的缩放也遵循着一致的标准。</p>
<p><strong>PX单位字号文本  – iteration  1</strong></p>
<p>虽然我们可以直接从基础示例中默认的字号着手讲解，但对于大多数人来说，16px的正文字号显得有点太大了。所以在我们的例子中，我们把正文字号重置为14px，侧边栏文本则是12px，CSS规则如下：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">.bodytext</span><span style="color: Gray;"> </span><span style="color: Blue;">p</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">14</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">12</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>在<a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-1.html" target="_blank">结果示例</a>中可以看到，在Safari 和  Firefox中，文本会随着larger、largest的声明缩放其字号，但IE6和7则无动于衷。</p>
<p><strong>EM单位字号文本 –  iteration  2</strong></p>
<p>虽然现今浏览器的市场份额在不断变化，但毋庸置疑的是很多的用户都还在使用IE6，所以px字号设置会将这些用户拒之于文本大小调整的门外。那么接下来我们尝试一下em字号，事实上em也是W3C推荐的印刷单位。如果要在默认的设置下利用em达到等同于14px和12px字号的文本大小，需要进行如下CSS声明：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">.bodytext</span><span style="color: Gray;"> </span><span style="color: Blue;">p</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.875</span><span style="color: Red;">em</span><span style="color: Gray;">; /</span><span style="color: Blue;">*</span><span style="color: Gray;"> 16</span><span style="color: Blue;">x</span><span style="color: Gray;">.875=14&nbsp; </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.75</span><span style="color: Red;">em</span><span style="color: Gray;">; /</span><span style="color: Blue;">*</span><span style="color: Gray;"> 16</span><span style="color: Blue;">x0</span><span style="color: Gray;">.75=12&nbsp; </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>在<a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-2.html" target="_blank">结果示例</a>中可以看到以em为字号单位的文本在各款浏览器中都能进行文本缩放，但是在IE6和7中缩放的幅度似乎有点夸张了。</p>
<p><strong>BODY中的百分比字号–  iteration 3</strong></p>
<p>对于在第二个测试中IE6和7所出现的问题，我们可以通过设置body标签的百分比字号来解决，当然对于其它元素的文本还是沿用em单位字号：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">body</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.bodytext</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.875</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.75</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p><a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-3.html" target="_blank">示例</a>中可以看到，我们已经基本达成了文本缩放一致的目的。</p>
<p><strong>用PX设置行高 – iteration  4</strong></p>
<p>最近一些关于Web文档打印的文章，如<a rel="external" href="http://www.alistapart.com/articles/settingtypeontheweb" target="_blank">Setting Type on the Web to a Baseline  Grid</a>，强调了一个良好的印刷格式在垂直方向上也应该体现栅格特质，其中最重要的因素就是行高，它应该不受字号设置的影响。</p>
<p>举个例子，一种比较恰当的行高设置是18px，我们可以在body标签中进行定义：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">body</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Green;">line-height:</span><span style="color: Maroon;">18</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.bodytext</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.875</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.75</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p><a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-4.html" target="_blank">结果示例</a>中可以看到，无论是主体还是侧边，所有的文本都继承了18px的行高。当然这是在为行高值定义了单位的情况下。如果我们采用比例因子之类省略单位的行高设置，行高就会随着字号的变化而变化，当然某些情况下这也可能是我们需要的结果。</p>
<p>不幸的是在IE6和7下18px的行高不会随文本的缩放而变化，这就意味这文本足够大的时候可能会产生重叠的现象。</p>
<p><strong>用EM设置行高  – iteration 5</strong></p>
<p>既然px不适合，我们接着来尝试一下em单位，设定如下CSS规则：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">body</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Green;">line-height:</span><span style="color: Maroon;">1.125</span><span style="color: Red;">em</span><span style="color: Gray;">;&nbsp; /</span><span style="color: Blue;">*</span><span style="color: Gray;"> 16×1.125=18 </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.bodytext</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.875</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">{</span></li>
<li><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.75</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>所得到的结果在各方面都正如我们期待的一样，近乎完美。</p>
<p><strong>Safari  中等距字体的问题 – iteration  6</strong></p>
<p>细心的人可能会发现，在Safari浏览器下主体文本中等距字体文本在渲染上存在一些细微的差别：当字号以px为单位时，等距文本的宽度与其它文本没有很大的区别，但是当字号以em为单位时，等距文本的宽度就要小多了。这个问题的根源在于Safari缺省设置中，普通字体的字号为16px，而等距字体的字号则是13px。</p>
<blockquote><p>英文有那么多字体, 但都隶属于serif, sans-serif和monospace三种字组. 由于英文本身的特点,  不同于方块字(汉字), 英文字母的宽度是不相等的, 这就给出版业如报纸的排版工作增加了难度, 于是发明了等距字体(monospace).</p></blockquote>
<p>也许有些人会觉得这个问题无关紧要，但大部分人不会放弃对这些细节的追求。那么下面就是一个可行的解决方案，注意其中的[if !IE]语法，它表示IE6和7将忽略表示其后的规则：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: Blue;">style</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=&quot;</span><span style="color: Blue;">text</span><span style="color: Gray;">/</span><span style="color: Blue;">css</span><span style="color: Gray;">&quot;&gt;</span></li>
<li><span style="color: Blue;">body</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">line-height:</span><span style="color: Maroon;">1.125</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.bodytext</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.875</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Blue;">.sidenote</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Maroon;">0.75</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&lt;/</span><span style="color: Blue;">style</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&lt;!--</span><span style="color: Olive;">[</span><span style="color: #00008b;">if</span><span style="color: Gray;"> !</span><span style="color: #00008b;">IE</span><span style="color: Olive;">]</span><span style="color: Gray;">&gt;--&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&lt;</span><span style="color: Blue;">style</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">type</span><span style="color: Gray;">=&quot;</span><span style="color: Blue;">text</span><span style="color: Gray;">/</span><span style="color: Blue;">css</span><span style="color: Gray;">&quot;&gt;</span></li>
<li><span style="color: Blue;">body</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Maroon;">16</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&lt;/</span><span style="color: Blue;">style</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&lt;!--&lt;</span><span style="color: Olive;">[</span><span style="color: #00008b;">endif</span><span style="color: Olive;">]</span><span style="color: Gray;">--&gt;</span></li></ol></div>
<p>上面的规则把px字号应用到了除IE6和7的其它浏览器上，<a rel="external" href="http://www.alistapart.com/d/howtosizetextincss/ss-test-6.html" target="_blank">结果示例</a>中可以看到现在所有的浏览器下行高与字号之间都有了很好的缩放协调，包括Safari中的等距文本。</p>
<p>对于这种类似于Hack的方法存在很多争议，但个人认为在这里运用它没有什么不妥当，毕竟我们只是利用浏览器特性来矫正其元素渲染的处理方式而已。另外本例中的CSS都是内联式的，最好的方式当然是外联样式。</p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=116&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/how-to-size-text-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DIV+CSS布局实战系列视频教程【Part1 &#8211; SWF格式】</title>
		<link>http://ximicc.com/css-tutorial/zhxs-01/</link>
		<comments>http://ximicc.com/css-tutorial/zhxs-01/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 04:59:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=112</guid>
		<description><![CDATA[<p></p><p>取名朝花夕拾没有什么特别的意思，真要说的话，就是希望大家看了这一系列的教程之后，能够在学习CSS的道路上更快前进一步，早上看晚上就有收获，哈哈&#8230;在录制教程的过程中，加进了一些个人的理解和观点，不妥之处还请留言指正。</p>
<p>本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始&#8230;教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/zhxs-01/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>取名朝花夕拾没有什么特别的意思，真要说的话，就是希望大家看了这一系列的教程之后，能够在学习CSS的道路上更快前进一步，早上看晚上就有收获，哈哈&#8230;在录制教程的过程中，加进了一些个人的理解和观点，不妥之处还请留言指正。</p>
<p>本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始&#8230;教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里我就直接给出图片素材的压缩包，以及网页最终效果图：</p>
<p><strong>&gt;&gt;&gt; <a rel="external" href="http://www.qiannao.com/space/show/ximicc/%C9%CF%B4%AB%B7%D6%CF%ED/ZHXS/7CSS_CN_IMG_Matrial.rar/.page" target="_blank">下载【朝花夕拾 &#8211;  DIV+CSS布局实战系列视频教程】图片素材</a></strong></p>
<p><strong>&gt;&gt;&gt; <a rel="external" href="http://www.ximicc.com/images/Preview.jpg" target="_blank">点击浏览 &#8211; 朝花夕拾系列视频教程 &#8211;  最终效果图</a></strong></p>
<p>第一集视频采用SWF格式录制，完工之后数了数居然有57M大小，这么搞下去就算网盘放得下，我的硬盘也没地方存电影了，所以在考虑第二集用WRF格式录。本集主要的内容是一些简单的前言引入、效果图布局解构，以及基本的HTML框架布局和样式设置，对于初学者而言内容也算比较多了，大概有20分钟左右&#8230;当然一定程度上也是因为我慢悠悠的语速拖延了时间  &#8211; -! &#8230;</p>
<p>视频录制分辨率为1024×768像素：<a rel="external" href="http://www.ximicc.com/images/001.jpg" target="_blank">视频截图001</a> <a rel="external" href="http://www.ximicc.com/images//002.jpg" target="_blank">视频截图002</a> 【绝对清晰啊&#8230;】</p>
<p><span style="color: #ff0000;"><strong>下载地址 &#8211; DIV+CSS布局实战系列视频教程【Part1 &#8211; SWF格式 &#8211;  57.3MB】</strong></span></p>
<p><a href="http://www.qiannao.com/space/show/ximicc/%C9%CF%B4%AB%B7%D6%CF%ED/ZHXS/7css_cn_Flower001.swf/.page" target="_blank">朝花夕拾 &#8211; DIV+CSS布局实战系列视频教程【Part1】</a></p>
<p>文件比较大，建议大家还是用下载页面中的迅雷链吧&#8230;</p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=112&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/zhxs-01/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SD视频外链地址测试</title>
		<link>http://ximicc.com/css-tutorial/out/</link>
		<comments>http://ximicc.com/css-tutorial/out/#comments</comments>
		<pubDate>Tue, 19 Jan 2010 02:21:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=78</guid>
		<description><![CDATA[<p></p><p>SD视频外链地址测试：</p>
<p>Twitter is gaining a lot of momentum now. If you are not on Twitter you are probably missing out a lot of “what is hot and what is not” in social media. You can add Twitter to your blog as “posts and digests”, and create new tweets on blog posts, and from within WordPress. The <strong>Twitter plugin</strong> was created by Alex King, who has <a href="http://alexking.org/projects/wordpress">a bunch of other useful plugins</a> on his site.<br />
.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/out/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>SD视频外链地址测试：</p>
<p>Twitter is gaining a lot of momentum now. If you are not on Twitter you are probably missing out a lot of “what is hot and what is not” in social media. You can add Twitter to your blog as “posts and digests”, and create new tweets on blog posts, and from within WordPress. The <strong>Twitter plugin</strong> was created by Alex King, who has <a href="http://alexking.org/projects/wordpress">a bunch of other useful plugins</a> on his site.<br />
<span id="more-78"></span><br />
Adding Video to your WP site is now easier than ever with <a href="http://wordpress.org/extend/plugins/vipers-video-quicktags/"><strong>Viper’s Video Quicktags</strong></a>. With this plugin you no longer need to copy and embed code-breaking HTML from video sites like YouTube, Veoh, Vimeo, etc. You just need to paste the URL of the video into the prompt box and the plugin will embed the video automatically for you.</p>
<p>ddd</p>
<p>[flv:[skydrive:http://cid-d184636874ad2085.skydrive.live.com/self.aspx/FREE/CSS/artech-css-10.flv ]  520 360]</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0" width="530" height="421" id="divflv"><param name="movie" value="http://www.divshare.com/flash/video2?myId=10222667-404&#038;new_design=true" /><param name="allowFullScreen" value="true" /><embed src="http://www.divshare.com/flash/video2?myId=10222667-404&#038;new_design=true" width="530" height="421" name="divflv" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=78&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/out/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS实例教程：复合型CSS条状图表（上）</title>
		<link>http://ximicc.com/css-tutorial/css-graphic-01/</link>
		<comments>http://ximicc.com/css-tutorial/css-graphic-01/#comments</comments>
		<pubDate>Sat, 16 Jan 2010 22:18:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=42</guid>
		<description><![CDATA[<img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/1d1d6234ca6e42fc9e2503784c902b42" alt="" width="355" height="155" />

这是一种相对比较复杂的图表，但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签<em>dl</em>可能平常我们见得不多，一般我们在做列表的时候通常只会用到ul和<em>li</em>标签,至于<em>dl</em>一般都很少用到，它也属于列表类的标签，下面说一下大概的用法：.....<p class='read-more'><a href='http://ximicc.com/css-tutorial/css-graphic-01/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/1d1d6234ca6e42fc9e2503784c902b42" alt="" width="355" height="155" /></p>
<p>这是一种相对比较复杂的图表，但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签<em>dl</em>可能平常我们见得不多，一般我们在做列表的时候通常只会用到ul和<em>li</em>标签,至于<em>dl</em>一般都很少用到，它也属于列表类的标签，下面说一下大概的用法：</p>
<p><em>dl</em>标记定义了一个定义列表，定义列表中的条目是通过使用<em>dt</em>标记(定义标题)和<em>dd</em>标记(定义描述)创建的。<em>dt</em>给出了术语名，<em>dd</em>标记给出了术语的定义信息。</p>
<p>也就是说<em>dt</em>用来创建列表中的上层项目，<em>dd</em>用来创建列表中最下层项目，<em>dt</em>和<em>dd</em>都必须放在<em>dl</em>的起始和结束标签之间。来看一个例子：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">西米CC</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">触手生春</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">不可或缺</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">无懈可击</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">触手生春</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Html基础</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">CSS入门</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">应用实例</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">dl</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>在不进行任何样式设计的话，它的显示效果如下：</p>
<p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/3f4eda6f904847e291e6f5080d4a3bbe" alt="" width="228" height="170" /></p>
<p>在本例的CSS柱状图中，每个图标前都有相应的项目说明文字，我们把它放在dd标签中。dd中的内容就如基本的CSS柱状图原理一样，通过背景的设置来显示相应比例的效果。首先来看一下XHTML代码：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">dl</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Spring</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width:25%;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">25%</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Ximicc</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width:55%;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">55%</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Technique</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dt</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width:75%;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">75%</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">dd</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">dl</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>注意这里的strong标签，它并不是仅仅为了修饰文字，在后续步骤中它还有很重要的作用。理解了dl标签的用法之后，整个的XHTML结构看起来就不是很复杂了，最终出来的效果中将会有三条柱状图标，当然在运用的时候可以进行增减。下面是三张在CSS样式设计是要用到的背景图片：</p>
<p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/5212b355f893497d9a00d815606b765f" alt="" width="197" height="20" /></p>
<p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/929a65f3e54f4d649635ea863f8ea608" alt="" width="197" height="20" /></p>
<p><img class="alignnone" title="ximicc" src="http://i45.tinypic.com/2ntic2c.jpg" alt="" width="9" height="24" /></p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=42&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/css-graphic-01/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS实例教程：基本型CSS条状图表</title>
		<link>http://ximicc.com/css-tutorial/css-for-bar-graphs/</link>
		<comments>http://ximicc.com/css-tutorial/css-for-bar-graphs/#comments</comments>
		<pubDate>Thu, 14 Jan 2010 05:52:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/?p=25</guid>
		<description><![CDATA[<p></p><p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/7b6d927f1e8f427f97bd1723dc805943" alt="" width="208" height="68" />
<strong>原文地址：<a rel="external" href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55" target="_blank">CSS FOR BAR  GRAPHS</a></strong></p>
<p><strong>翻译整理：<a href="http://ximicc.com">西米CC</a>
</strong></p>
<p>译文已作精简，保留了与主题切实相关的部分，并对文中整段给出的代码进行分解注释，便于大家的阅读和理解。要查看英语原文请参看原文地址，关于本例的效果，原文作者已测试浏览器如下：<em>Firefox  1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1)</em>.</p>
<p>首先是最基本的条状图表，思路很简单，利用CSS中“百分比.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/css-for-bar-graphs/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/7b6d927f1e8f427f97bd1723dc805943" alt="" width="208" height="68" /><br />
<strong>原文地址：<a rel="external" href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55" target="_blank">CSS FOR BAR  GRAPHS</a></strong></p>
<p><strong>翻译整理：<a href="http://ximicc.com">西米CC</a><br />
</strong></p>
<p>译文已作精简，保留了与主题切实相关的部分，并对文中整段给出的代码进行分解注释，便于大家的阅读和理解。要查看英语原文请参看原文地址，关于本例的效果，原文作者已测试浏览器如下：<em>Firefox  1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1)</em>.</p>
<p>首先是最基本的条状图表，思路很简单，利用CSS中“百分比”宽度的弹性准确地描绘出一个百分比柱形图。</p>
<p>1.首先在页面中建立一个DIV容器并添加名称为<em>graph</em>样式，其间添加一组<em>strong</em>标签作为文本对象的容器，注意其中除了调用名为<em>bar</em>的样式之外，还直接利用行内样式设置了<em>strong</em>的宽度为84%：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">strong</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width: 84%;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">ximicc.com 84%</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">strong</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>2.在<em>.graph</em>中，我们要定义最终效果中的外围边框样式，<em>border</em>属性的3个参数分别定义了边框的粗细、线性以及颜色，在实际应用中要根据具体的页面风格进行修改。整个容器的宽度设置为200px，并利用<em>padding</em>设置DIV的内边距，目的是为了让边框与之后的文字背景色产生间距：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">.graph</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">relative</span><span style="color: Gray;">; /</span><span style="color: Blue;">*</span><span style="color: Gray;"> </span><span style="color: Blue;">IE</span><span style="color: Gray;"> </span><span style="color: Blue;">is</span><span style="color: Gray;"> </span><span style="color: Blue;">dumb</span><span style="color: Gray;">&nbsp; </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">200</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">border:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">solid</span><span style="color: Gray;"> </span><span style="color: #00008b;">#B1D632</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>加入样式后的浏览效果如下：</p>
<p><img src="http://api.photoshop.com/home_28ec9256e5c740e18bb871c4dc3d37b1/adobe-px-assets/1a08adb25232452fab70a233e71105ea" alt="" width="220" height="42" /></p>
<p>3.样式<em>.bar</em>中，首先将<em>strong</em>标签内容转换为块级元素，配合背景颜色的设置进行作用。样式中除了设定文字的颜色、对齐方式及行高之外，最重要的是<em>background</em>属性，效果中的柱状条事实上就是这里设置的背景色，结合<em>block</em>显示方式最终得到良好的体现。</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">.graph</span><span style="color: Gray;"> </span><span style="color: Blue;">.bar</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp; </span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">relative</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">#B1D632</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">center</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">color:</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">#333</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Gray;">&nbsp; </span><span style="color: Maroon;">2</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">line-height:</span><span style="color: Gray;">&nbsp; </span><span style="color: Maroon;">2</span><span style="color: Red;">em</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>我们可以运行下面的代码来查看最终的效果：</p>
<p><runcode><br />
<style>
    .graph { 
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
        font-size: 12px; 
    }
    a { 
        font-size: 12px;
        font-weight: bold;
        color: #f00;
    }
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
</style>
<div class="graph">
    <strong class="bar" style="width: 84%;">ximicc.com 84%</strong>
</div>
<p>
<a href="http://kyogo.com">翻译整理：西米CC</a></runcode></p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=25&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/css-for-bar-graphs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>当前形式下网站建设的若干注意事项</title>
		<link>http://ximicc.com/css-tutorial/web-tips/</link>
		<comments>http://ximicc.com/css-tutorial/web-tips/#comments</comments>
		<pubDate>Wed, 30 Dec 2009 01:53:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/wordpress-plugin/%e5%bd%93%e5%89%8d%e5%bd%a2%e5%bc%8f%e4%b8%8b%e7%bd%91%e7%ab%99%e5%bb%ba%e8%ae%be%e7%9a%84%e8%8b%a5%e5%b9%b2%e6%b3%a8%e6%84%8f%e4%ba%8b%e9%a1%b9/</guid>
		<description><![CDATA[<p></p><p>如今很多新手站长询问老谢我，自己不清楚该如何制作网站，是做什么网站才有更好的发展空间，老谢觉得这个问题值得思考，不单单是现在需要思考，你的网站发展中也需要深入的思考，老谢就个人经验，谈谈几点心得，希望对大家有一定的作用。</p>
<p><strong>一，分析你自己的实际情况</strong></p>
<p>这点是非常重要的，360行，行行出状元，你擅长哪方面，熟悉哪方面，就去研究这一方面，不要觉得哪些站更有利可途，就一涌而上。</p>
<p>把你的特长放大，在市场营销中，这点就是利基营销，做一些大站，不做.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/web-tips/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>如今很多新手站长询问老谢我，自己不清楚该如何制作网站，是做什么网站才有更好的发展空间，老谢觉得这个问题值得思考，不单单是现在需要思考，你的网站发展中也需要深入的思考，老谢就个人经验，谈谈几点心得，希望对大家有一定的作用。</p>
<p><strong>一，分析你自己的实际情况</strong></p>
<p>这点是非常重要的，360行，行行出状元，你擅长哪方面，熟悉哪方面，就去研究这一方面，不要觉得哪些站更有利可途，就一涌而上。</p>
<p>把你的特长放大，在市场营销中，这点就是利基营销，做一些大站，不做的。你做，并且深入分析，放大你的特长点，只盯一点，肯定比你满天撒网来的明确。</p>
<p>每个人的情况都不同，在这里就需要站长们自己去分析自己的实际情况了。</p>
<p><strong>二，深度发掘你的周边资源</strong></p>
<p>你周边的资源，会直接影响到你的发展，相信大家对这一点体会很深。做事这样，做网站也是如此。如果你有哪方面的资源，那就请好好利用吧，相信它的财富是非常大的。在这里，就要很好的整合你的资源了，包括人脉关系，工作便利等等。</p>
<p><strong>三，深度发掘你的网站</strong></p>
<p>不是挣钱的网站，不是好网站。做网站，如果不能实现盈利，说什么都是白搭，很多站长都很纳闷，我的网站部管从哪方面都比竞争对手强，但是我的网站却不盈利，而竞争对手却挣的皮包鼓鼓，什么原因?去分析你的网站的价值和用户的价值吧，这才是你最大的财富，而不要把你的眼光只盯着广告联盟那点可怜的广告费。</p>
<p><strong>四，网站的内容，要充满真诚</strong></p>
<p>这一点，也许是老谢我第一个提出的，为什么有的网站你进去会使你感觉很有安全感，非常的亲切。这就是你的网站是否有真诚感的具体表现了，网站内容是其中最重要的一个方面。那应该如何使你的网站内容充满真诚感呢?那就需要你有一定的写作功底和把握客户心理的能力，老谢建议大家读《软文学习钥匙》研究里面的客户心理把握，和掌握一定的网站内容文章撰写的技巧和能力。</p>
<p><strong>五,保持你健康的工作心态</strong></p>
<p>网站的发展，不可能什么都随你的心愿，如今的封网门，已经使很多的站长的心态失去的控制，那你又怎么能做好你的网站呢?</p>
<p>保持一颗平常心，毕竟在困难和挫折中，你会学到很多的经验，这对你以后的发展是非常的具有帮助的。</p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=184&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/web-tips/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何让自己的网站脱颖而出</title>
		<link>http://ximicc.com/css-tutorial/seo-sites/</link>
		<comments>http://ximicc.com/css-tutorial/seo-sites/#comments</comments>
		<pubDate>Mon, 14 Dec 2009 02:27:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>
		<category><![CDATA[SEO]]></category>

		<guid isPermaLink="false">http://ximicc.com/wordpress-plugin/%e5%a6%82%e4%bd%95%e8%ae%a9%e8%87%aa%e5%b7%b1%e7%9a%84%e7%bd%91%e7%ab%99%e8%84%b1%e9%a2%96%e8%80%8c%e5%87%ba/</guid>
		<description><![CDATA[<p></p><p>中国网站之多，用多如牛毛形容毫无夸张。如何在芸芸众生之中，脱颖而出，这值得你我共同思考。因为只有那些“个性”网站，才能给访客一个全新的感觉，吸引他们进一步去了解，甚至主动去宣传你的网站。今天我们浅谈几点自己关于如何打造一个标新立异网站的看法，与大家共勉。</p>
<p>从字面上理解，标新立异就要求我们做到一个“新”字与一个“异”字;具体到我们网站应用中，“新”就要求我们在网站内容上求“新”，“异”字就要求我们在网站设计上求“异”，表现与众不同。.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/seo-sites/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>中国网站之多，用多如牛毛形容毫无夸张。如何在芸芸众生之中，脱颖而出，这值得你我共同思考。因为只有那些“个性”网站，才能给访客一个全新的感觉，吸引他们进一步去了解，甚至主动去宣传你的网站。今天我们浅谈几点自己关于如何打造一个标新立异网站的看法，与大家共勉。</p>
<p>从字面上理解，标新立异就要求我们做到一个“新”字与一个“异”字;具体到我们网站应用中，“新”就要求我们在网站内容上求“新”，“异”字就要求我们在网站设计上求“异”，表现与众不同。<span id="more-185"></span></p>
<p>一、在网站内容上求“新”。这里又分开两个方面，一个是实质内容的独特、新颖，这一点不管对会员是一种负责，是一种吸收力，更是对百度等各大搜索引擎一份“美餐”。那么如何做到内容独特呢，如果你有一手的数据资源那是最好的，如果没有一手的数据资源，那么我们一定要同时对内容要进行必要的修改与完善。也就是大家所说的伪原创。一个网站的生存要以内容为核心，我们要求质而不求量，同时要做专，要不做泛。另一个是指内容发布时效性要强，做到及时快速。一个长期不更新的网站，好比是一个长期穿同一件衣服的懒女人，对一个男人来说是毫无吸引力一样。所以，我们要每天更新新的内容上去。如果你的网站权重还不错，百度都能及时收录，那么恭喜你了，赶快添加热门的内容上去，等着收流量吧。</p>
<p>二、在网站设计上求“异”。这一点是最直观，也就是我们访客所直接看得到的。也许有人会说，作为一名草根站长，现在做站不是做给访客看的，而是做给搜索引擎看的。我永远不认同这个观点。既然要做站就一定要想着做大做强，这是我们应有的信心与决心。而要做大做强，只能靠会员，而不能依赖搜索。所以我们在建站之前，就应该对网站有一种总体规划，尽量不要与大众的网站相同，如果是下载采用一些CMS系统做的，也要多花些时间在模版上设计新颖一点，多留访客一些好的观感。一个设计好的网站，相信会员会给你一个高分的。比如我的香当网是一个教育范文网，我在图标的使用上就采用了WORD与WINDOWS的文件夹，给会员一个类似自己的另一台移动电脑的感觉。我发现很多会员主动在一些论坛互相转发，而且大多数人跟贴予以好评。总之一句话，一个设计新颖的网站对会员是更容易记住，回头率自然也会高的。</p>
<p>当然网站的个性一定要建立在方便会员使用的基础上，不然最终的结果会是东施笑颦，适当其反，让会员不知从而下手，也不知道他到底能从你的网站上获得什么有用的信息，标新立异与花俏在本质上是有区别的。</p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=185&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/seo-sites/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google AdWords与百度竞价若干测评对比</title>
		<link>http://ximicc.com/css-tutorial/google-vs-baidu/</link>
		<comments>http://ximicc.com/css-tutorial/google-vs-baidu/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 05:33:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DIV+CSS技术资源]]></category>

		<guid isPermaLink="false">http://ximicc.com/wordpress-plugin/google-adwords%e4%b8%8e%e7%99%be%e5%ba%a6%e7%ab%9e%e4%bb%b7%e8%8b%a5%e5%b9%b2%e6%b5%8b%e8%af%84%e5%af%b9%e6%af%94/</guid>
		<description><![CDATA[<p></p><p>百度竞价推广和Google Adwords是目前最常见的付费推广业务，很多公司考虑通过搜索引擎进行推广时都会同时考虑百度竞价推广和Google AdWords，由于两者都具有网盟网站的广告，可以以较低的价格获得较高的点击量，因此，我这里通过比较翔实的实际数据对Google Adwords和百度竞价推广广告在网站联盟(内容联盟网络)中的效果进行了比较，供各个企业参考。
这里的数据是上个月(十一月)某博客针对某大型网站统计出来的数据，数.....</p><p class='read-more'><a href='http://ximicc.com/css-tutorial/google-vs-baidu/'>Continue Reading ...</a></p>]]></description>
			<content:encoded><![CDATA[<p></p><p>百度竞价推广和Google Adwords是目前最常见的付费推广业务，很多公司考虑通过搜索引擎进行推广时都会同时考虑百度竞价推广和Google AdWords，由于两者都具有网盟网站的广告，可以以较低的价格获得较高的点击量，因此，我这里通过比较翔实的实际数据对Google Adwords和百度竞价推广广告在网站联盟(内容联盟网络)中的效果进行了比较，供各个企业参考。<br />
这里的数据是上个月(十一月)某博客针对某大型网站统计出来的数据，数据来源使用的是谷歌分析Google Analytics进行网站端的统计，同时使用百度推广和Google Adwords对目标网站进行宣传。通过Google Analytics的“流量来源”-“推介网站”里的数据来统计百度推广和Google Adwords的实际点击数，其中百度推广的来源为cpro.baidu.com，Google Adwords的来源为googleads.g.doubleclick.net，时间选择为一个月。<br />
下面是百度竞价推广和Google Adwords双方数据对比：<br />
百度：点击次数：46，111(Analytics统计)/ 46，831(百度推广统计)，每次访问页数：1.06，平均停留时间 3秒。<br />
谷歌：点击次数：15，751(Analytics统计)/ 26，106(AdWords统计)，每次访问页数：1.18，平均停留时间 18秒。<br />
谷歌比百度每次访问页数多11%，停留时间多6倍，可见百度联盟的作弊网站较多，误点率较高，广告准确度不高。<br />
在价格上，双方的数据对比如下：<br />
百度：每次点击费用0.38元，eCPM：0.11元，点击率：0.03%。<br />
谷歌：每次点击费用0.41元(实际为0.67元)，其中新浪财经频道的价格约为1.1元，普通网站的价格约为0.2-0.3元。优质网站的价格约为0.5-1.0元。<br />
这里有一个奇怪的地方，就是AdWords点击次数到底是多少，AdWords后台数字和Google Analytics统计数字相差实在太大，这和百度推广成为鲜明对比，也使得AdWords每次点击的实际费用成为一个疑问。<br />
为什么会有如此大的差距呢?根据分析，有可能是因为Google有大量点击无法到达最终网站，疑为防火墙或防病毒软件屏蔽(据说一些防病毒软件如招行网盾会屏蔽googleads.g.doubleclick.net)，因此用户点击后无法达到最终网站，实际点击费用被提高。<br />
仔细分析百度推广的数据，发现转换率低的原因是因为有不少作弊网站，例如一个彩铃站，百度没有收录，Google才收录5页，竟然每天有40万的展示次数，一看就是刷数据自己点的，类似这样的网站还不少，导致了用户平均停留时间只有3秒，广告效果较差。<br />
Google AdWords虽然数字统计上有点问题，但广告的精准度比百度要好，同时作弊网站也少，用户停留时间也较长，广告效果好一些。<br />
因此在投放广告的时候，无论是百度推广还是Google AdWords，最好能做到针对某一些网站投放广告，以防止网盟用户作弊，这样投放广告的效果会比批量不限站点投放要好很多，也会节省一些广告费用。<br />
总而言之，Google Adwords和百度竞价推广的推广效果各有利弊，我们建议客户根据企业自身经济实力选择使用。</p>
<img src="http://ximicc.com/?ak_action=api_record_view&id=186&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://ximicc.com/css-tutorial/google-vs-baidu/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
