<?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>博客观察 &#187; 网页技术</title>
	<atom:link href="http://www.blogviews.cn/category/code/feed" rel="self" type="application/rss+xml" />
	<link>http://www.blogviews.cn</link>
	<description>看那天边，白云朵朵淡淡</description>
	<lastBuildDate>Wed, 07 Sep 2011 13:58:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>百度统计要升级了</title>
		<link>http://www.blogviews.cn/code/tongji-baidu.html</link>
		<comments>http://www.blogviews.cn/code/tongji-baidu.html#comments</comments>
		<pubDate>Thu, 09 Sep 2010 11:14:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[百度统计]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=2141</guid>
		<description><![CDATA[<p>2010年9月9日晚间，百度统计要升级一些新功能：</p><p><strong>1. </strong><strong>历史趋势图增加</strong><strong>分小时查询</strong><strong>功能，更精准分析历史趋势，掌控每一个时段的流量规律</strong></p><p><strong>2.</strong><strong>各个报告中</strong><strong>Flash</strong><strong>图表指标可选择“设为默认指标”，记住您关心的指标，为您省时省力！</strong></p><p><strong> 3. </strong><strong>增加</strong><strong>新访客比率</strong><strong>指标，新访客占比一目了然</strong></p><p><strong>更多详细内容 <span class='read-more'><a href='http://www.blogviews.cn/code/tongji-baidu.html'>[Read More…]</a></span></strong></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>2010年9月9日晚间，百度统计要升级一些新功能：</p>
<p><strong>1. </strong><strong>历史趋势图增加</strong><strong>分小时查询</strong><strong>功能，更精准分析历史趋势，掌控每一个时段的流量规律</strong></p>
<p><strong>2.</strong><strong>各个报告中</strong><strong>Flash</strong><strong>图表指标可选择“设为默认指标”，记住您关心的指标，为您省时省力！</strong></p>
<p><strong> 3. </strong><strong>增加</strong><strong>新访客比率</strong><strong>指标，新访客占比一目了然</strong></p>
<p><strong>更多详细内容请移步百度统计的官方博客：</strong></p>
<p><a href="http://hi.baidu.com/tongji2009/blog/item/f8eb6b5034f6322a42a75bd3.html" target="_blank">http://hi.baidu.com/tongji2009/blog/item/f8eb6b5034f6322a42a75bd3.html</a></p>
<p>不过对于不只一个网站的同学，例如我来说。还是更喜欢量子统计的统计首页，多个网站的基本数据并列，你可以直接查看异常的那个网站，而不用一个个的看详细报告。</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-4502193303731901";
/* 468x60, 创建于 08-7-1 */
google_ad_slot = "2799869379";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p> ]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/tongji-baidu.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>查看网站编码格式-原来这么简单</title>
		<link>http://www.blogviews.cn/code/utf-8.html</link>
		<comments>http://www.blogviews.cn/code/utf-8.html#comments</comments>
		<pubDate>Thu, 09 Sep 2010 10:33:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=2137</guid>
		<description><![CDATA[<p>近期Discuz被QQ收购后，推出的X1.5版本确实不错，风格回归到经典，功能还增加一些不错的。可是x1.5一直处于测试期，前几天放出的RC版本也只有GBK版本的。</p><p>俺就一直在纠结到底在用GBK还是UTF-8,而且也没有弄明白他们的具体差别，后来就想看看最常去又觉得不错的几个论坛用的什么版本的。 <span class='read-more'><a href='http://www.blogviews.cn/code/utf-8.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>近期Discuz被QQ收购后，推出的X1.5版本确实不错，风格回归到经典，功能还增加一些不错的。可是x1.5一直处于测试期，前几天放出的RC版本也只有GBK版本的。</p>
<p>俺就一直在纠结到底在用GBK还是UTF-8,而且也没有弄明白他们的具体差别，后来就想看看最常去又觉得不错的几个论坛用的什么版本的。</p>
<p>百度一下，没想到看网站编码格式这样简单：</p>
<p>查看-字符编码，就直接显示当前网站的编码格式了。。。</p>
<p>哎，没技术就是容易丢人呐。。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/utf-8.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS 3.0 参考手册 (中文版)</title>
		<link>http://www.blogviews.cn/code/css-3-0.html</link>
		<comments>http://www.blogviews.cn/code/css-3-0.html#comments</comments>
		<pubDate>Mon, 23 Aug 2010 10:53:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=2062</guid>
		<description><![CDATA[<p>CSS3.0参考手册是由腾迅的ISD团队制作的，非常的不错，下面是它的官方介绍：</p><p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p><p><h2>手册难点</h2></p><p> 中文资料少，对英文翻译功底要 <span class='read-more'><a href='http://www.blogviews.cn/code/css-3-0.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>CSS3.0参考手册是由腾迅的ISD团队制作的，非常的不错，下面是它的官方介绍：</p>
<p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p>
<h2>手册难点</h2>
<ol>
<li> 中文资料少，对英文翻译功底要求较高；</li>
<li> 基础语法要求字斟句酌，避免产生歧义；</li>
<li> 兼容性列表涉及浏览器及版本众多；</li>
<li> 草案中的Grid布局被业界同仁普遍认为比“天书”还难…</li>
</ol>
<p>CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。</p>
<h2>备受期待的 CSS 3 新功能</h2>
<p>圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa &#8211; 加入透明色、文字阴影等等<br />
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。</p>
<h2>下载：</h2>
<p><a href="http://isd.tencent.com/css3/css3.0manual.chm.zip"><strong>CSS 3.0 参考手册 (中文版) 下载 (366k)</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/css-3-0.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>NAME的域名注册也要涨价了</title>
		<link>http://www.blogviews.cn/code/name.html</link>
		<comments>http://www.blogviews.cn/code/name.html#comments</comments>
		<pubDate>Mon, 21 Jun 2010 16:20:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[name]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1932</guid>
		<description><![CDATA[<p>刚收到name.com的邮件，下个月起com/net域名也要涨价了。</p><p>COM的涨7%，NET涨10%，虽然不是很多，也挺那个的。</p><p>看来有竞争是好事，自从世界上第二大的根域名.cn落到第四后，竞争力大减，所以com/net也有底气涨价了。</p><p>PS:wordpress 3.0的中文官方语 <span class='read-more'><a href='http://www.blogviews.cn/code/name.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" src="http://ih.constantcontact.com/fs039/1103081181045/img/1.jpg" alt="" width="300" height="46" /></p>
<p>刚收到name.com的邮件，下个月起com/net域名也要涨价了。</p>
<p>COM的涨7%，NET涨10%，虽然不是很多，也挺那个的。</p>
<p>看来有竞争是好事，自从世界上第二大的根域名.cn落到第四后，竞争力大减，所以com/net也有底气涨价了。</p>
<p>PS:wordpress 3.0的中文官方语言包怎么还没好啊。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/name.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>MagicLinux 2.5 RC 1 发布</title>
		<link>http://www.blogviews.cn/code/magiclinux-2-5-rc-1.html</link>
		<comments>http://www.blogviews.cn/code/magiclinux-2-5-rc-1.html#comments</comments>
		<pubDate>Thu, 19 Nov 2009 07:24:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[MagicLinux]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1702</guid>
		<description><![CDATA[<p>在延期近一个月后，MagicLinux 开发团队最终发布了 MagicLinux 2.5 的第一个 RC 版本。MagicLinux 2.5 RC 1 包括 Kernel 2.6.31.6（兼容内核是 2.6.30.9）、Xorg Server 1.6.5、KDE 4.3.3 等主要组件。</p><p>自 Beta 3 以来的主要更新如下：</p><p><h3>Bugs 修复</h3></p><p>修正 firefox 版本错误的问题</p><p>修复 USB 设备不能正常挂载的问题</p><p>修复 qsopcast 的频道列表乱码问题</p><p>将 akonadi/nepomuk/mysql 从 CD 版本中移除 <span class='read-more'><a href='http://www.blogviews.cn/code/magiclinux-2-5-rc-1.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>在延期近一个月后，MagicLinux 开发团队最终发布了 MagicLinux 2.5 的第一个 RC 版本。MagicLinux 2.5 RC 1 包括 Kernel 2.6.31.6（兼容内核是 2.6.30.9）、Xorg Server 1.6.5、KDE 4.3.3 等主要组件。</p>
<p>自 Beta 3 以来的主要更新如下：</p>
<h3>Bugs 修复</h3>
<ul>
<li>修正 firefox 版本错误的问题</li>
<li>修复 USB 设备不能正常挂载的问题</li>
<li>修复 qsopcast 的频道列表乱码问题</li>
<li>将 akonadi/nepomuk/mysql 从 CD 版本中移除</li>
<p><span id="more-1702"></span>
</ul>
<h3>系统软件更新</h3>
<ul>
<li>firefox 更新到 3.5.4</li>
<li>gimp 更新到 2.6.7</li>
<li>chmlib 更新到 0.40</li>
<li>openal-soft 替换 openal</li>
<li>freealut 在 openal-soft 上重编译</li>
<li>mplayer 更新到 svn20090922，并分出 gui 包</li>
<li>e2fsprogs 更新到 1.41.9</li>
<li>内核更新到 2.6.31.5</li>
<li>兼容内核更新到 2.6.30.9</li>
<li>policykit被polkit 取代,同时更新相关的包</li>
<li>kde4 更新到 4.3.3</li>
<li>taglib 更新到 1.6</li>
<li>taglib-extra 更新到 1.0.1</li>
<li>amaork 更新到 2.2.0</li>
<li>kde4-konversion 更新到 1.2.1</li>
<li>mesa 升级到 7.6</li>
<li>libdrm 升级到 2.4.15</li>
<li>xorg-server 升级到 1.6.5</li>
<li>xorg-x11-drv 系列更新到最新版本</li>
<li>libgpod 更新到 0.7.2</li>
</ul>
<h3>仓库更新</h3>
<ul>
<li>添加 chromium-bsu （一个纵版射击游戏）及相关依赖</li>
<li>更新 chromium （google 浏览器)</li>
<li>更新 gnome 到 2.28.0(未完全完成,同时更新了大量相关包)</li>
</ul>
<p>更多信息，请参阅 MagicLinux 2.5 RC 1 <a href="http://www.linuxfans.org/bbs/viewthread.php?tid=190314">发布公告</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/magiclinux-2-5-rc-1.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Silverlight 4 beta发布</title>
		<link>http://www.blogviews.cn/code/silverlight-4-beta.html</link>
		<comments>http://www.blogviews.cn/code/silverlight-4-beta.html#comments</comments>
		<pubDate>Thu, 19 Nov 2009 07:22:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1699</guid>
		<description><![CDATA[<p>Silverlight 4 beta增加了一些比较有趣的新功能：</p><p>Webcam/mic support（摄像头、麦克风支持）</p><p>Printing API（打印API）</p><p>MouseWheel on common controls（控件支持滚轮）</p><p>Implicit Styles（隐式风格） <span class='read-more'><a href='http://www.blogviews.cn/code/silverlight-4-beta.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>Silverlight 4 beta增加了一些比较有趣的新功能：<br />
Webcam/mic support（摄像头、麦克风支持）<br />
Printing API（打印API）<br />
MouseWheel on common controls（控件支持滚轮）<br />
Implicit Styles（隐式风格）<br />
Controls: RichTextBox, ViewBox and WebBrowser（新增加了RichTextBox, ViewBox and WebBrowser三个控件）<br />
DataBinding improved（数据绑定功能改善）<br />
CLR 4.0 (compatibility with dll from the Full .NET 4.0) （支持、兼容CLR 4.0）</p>
<p>更多有关Silverlight 4 beta详细信息请看官方网站：<br />
<a id="89" href="http://silverlight.net/getstarted/silverlight-4-beta/">http://silverlight.net/getstarted/silverlight-4-beta/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/silverlight-4-beta.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firefox播放Flash全屏时崩溃的解决办法</title>
		<link>http://www.blogviews.cn/code/firefox-bug.html</link>
		<comments>http://www.blogviews.cn/code/firefox-bug.html#comments</comments>
		<pubDate>Fri, 17 Jul 2009 05:06:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1522</guid>
		<description><![CDATA[<p>在 Firefox 中看 Flash 时一旦点击全屏，Firefox 即刻崩溃。这个问题不少人都遇到过，其实这是由 NVIDIA 驱动程序的 bug 造成的，据说 ATI 用户也有类似的问题。以下是另一种解决办法。</p><p>找到 Firefox 安装目录中的 firefox.sh，在其第二行加入：</p><p> <span class='read-more'><a href='http://www.blogviews.cn/code/firefox-bug.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>在 Firefox 中看 Flash 时一旦点击全屏，Firefox 即刻崩溃。这个问题不少人都遇到过，其实这是由 NVIDIA 驱动程序的 bug 造成的，据说 ATI 用户也有类似的问题。以下是另一种解决办法。</p>
<p>找到 Firefox 安装目录中的 firefox.sh，在其第二行加入：</p>
<pre><code>    export LD_PRELOAD=/usr/lib/libGL.so.1
</code></pre>
<p>或者创建一个包含如下内容的脚本：</p>
<pre><code>    #!/bin/sh
    LD_PRELOAD=/usr/lib/libGL.so.1 firefox
</code></pre>
<p>注意：有的系统没有 libGL.so.1，而是 libGL.so，只需作相应的替换即可。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/firefox-bug.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>火狐3.5不支持tab mix plus</title>
		<link>http://www.blogviews.cn/code/tab-mix-plus.html</link>
		<comments>http://www.blogviews.cn/code/tab-mix-plus.html#comments</comments>
		<pubDate>Wed, 01 Jul 2009 02:20:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1504</guid>
		<description><![CDATA[<p>火狐发布了最新版本3.5后，偶装上试用了一下。</p><p>浏览速度没有发现大的改变，而且启动速度还慢了一些，可能是安装包就比3.0版本大不少吧。</p><p>而且和以往一样，这次更新版本后又不兼容tab mix plus 这个插件了。</p><p>tab mix plus是我用火狐必安的一个插件，因为从遨游来的用户一般都 <span class='read-more'><a href='http://www.blogviews.cn/code/tab-mix-plus.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>火狐发布了最新版本3.5后，偶装上试用了一下。</p>
<p>浏览速度没有发现大的改变，而且启动速度还慢了一些，可能是安装包就比3.0版本大不少吧。</p>
<p>而且和以往一样，这次更新版本后又不兼容tab mix plus 这个插件了。</p>
<p>tab mix plus是我用火狐必安的一个插件，因为从遨游来的用户一般都比较喜欢这个插件。有了它，就可以：双击关闭，地址栏在新标签页打开等等功能。或许有别的办法可以实现这些功能，可是偶至今没有找到一个更好的替代办法。</p>
<p>因此，装了3.5试用了一下下之后，还是无奈的换回了3.0。</p>
<p>PS:有位老兄提供了可以兼容于火狐3.5版本的tab mix plus,地址在这里：</p>
<p><a href="http://www.huo119.com/post/113.shtml" target="_blank">http://www.huo119.com/post/113.shtml</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/tab-mix-plus.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>火狐3.5正式发布</title>
		<link>http://www.blogviews.cn/code/firefox-3-5.html</link>
		<comments>http://www.blogviews.cn/code/firefox-3-5.html#comments</comments>
		<pubDate>Wed, 01 Jul 2009 02:05:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1502</guid>
		<description><![CDATA[<p>Mozilla昨日发布了速度更快的火狐3.5浏览器，其实时下载跟踪器（live download tracker）显示，用户下载量最高时达到115次/秒，短短数小时内下载量已超过130万次。 </p><p style="text-indent: 2em;">Windows和Mac电脑用户都可下载火狐3.5，该浏览器有很多新功能，包括新的针对更 快速网络 <span class='read-more'><a href='http://www.blogviews.cn/code/firefox-3-5.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>Mozilla昨日发布了速度更快的火狐3.5浏览器，其实时下载跟踪器（live download tracker）显示，用户下载量最高时达到115次/秒，短短数小时内下载量已超过130万次。 <img src="http://img3.cache.netease.com/tech/2009/7/1/2009070105045290017.gif" border="0" alt="" /><br />
<img src="http://img4.cache.netease.com/tech/2009/7/1/200907010505061af18.jpg" border="0" alt="" /></p>
<p style="text-indent: 2em;">Windows和Mac电脑用户都可下载火狐3.5，该浏览器有很多新功能，包括新的针对更 快速网络应用软件如Google Docs的新JAVASCRIPT引擎，无需插件可播放网页嵌入视频的能力，专有的浏览模式，可下载字体和允许网站知道你所在位置的地理定位技术等。</p>
<p style="text-indent: 2em;">Mozilla基金会CEO约翰·利里（John Lilly）表示，网络上发生的事情太多，正是浏览器发挥作用的时候，火狐3.5集合了最具创新的网络技术，是最完美和功能最强的现代浏览器。火狐3.5一共有70种语言版本。</p>
<p style="text-indent: 2em;"><a href="http://www.mozilla.com/products/download.html?product=firefox-3.5&amp;os=win&amp;lang=zh-CN" target="_blank">点击下载火狐3.5正式版</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/firefox-3-5.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>五种方法让CSS实现垂直居中</title>
		<link>http://www.blogviews.cn/code/css.html</link>
		<comments>http://www.blogviews.cn/code/css.html#comments</comments>
		<pubDate>Mon, 01 Jun 2009 16:54:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网页技术]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.blogviews.cn/?p=1472</guid>
		<description><![CDATA[<p>利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。</p><p>使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看<a href="http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html">测试页面</a>，有简短解释。)</p><p><h3>方法一</h3></p><p>这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。</p><p><span style="color: #009900;">&#60;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wrapper"</span>&#62;</span></p><p><span style="color: #009900;">&#60;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cell"</span>&#62;</span></p><p><span style="color: #009900;">&#60;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&#62;</span></p><p>Content goes here<span style="color: #009900;">&#60;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&#62;</span></p><p><span style="color: #009900;">&#60;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&#62;</span></p><p><span style="color: #009900;">&#60;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&#62;</span></p><p><span style="color: #cc00cc;">#wrapper</span> <span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00aa00;">:</span>table<span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span></p><p><span style="color: #cc00cc;">#cell</span> <span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #3333ff;">:table-</span>cell<span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00aa00;">:</span><span style="color: #993333;">middle</span><span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span></p><p><strong>优点：</strong></p><p>content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断</p><p><strong>缺点：</strong></p><p>Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签其实没那么糟糕. <span class='read-more'><a href='http://www.blogviews.cn/code/css.html'>[Read More…]</a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。</p>
<p>使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看<a href="http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html">测试页面</a>，有简短解释。)</p>
<p><img src="http://oncoding.net/uploads/allimg/090325/22012122J-0.jpg" alt="" /></p>
<h3>方法一</h3>
<p>这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wrapper"</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cell"</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&gt;</span>
		Content goes here<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #cc00cc;">#wrapper</span> <span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00aa00;">:</span>table<span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span>
<span style="color: #cc00cc;">#cell</span> <span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #3333ff;">:table-</span>cell<span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00aa00;">:</span><span style="color: #993333;">middle</span><span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span></pre>
</div>
</div>
<p><strong>优点：</strong><br />
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断</p>
<p><strong>缺点：</strong><br />
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签其实没那么糟糕.<span id="more-1472"></span></p>
<h3>方法二：</h3>
<p>这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。</p>
<p>因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&gt;</span>
	Content goes here<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #cc00cc;">#content</span> <span style="color: #00aa00;">{</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00aa00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00aa00;">:</span><span style="color: #993333;"><span style="color: #cc66cc;">50</span>%</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #993333;">240px</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00aa00;">:</span><span style="color: #993333;">-120px</span><span style="color: #00aa00;">;</span> <span style="color: #808080; font-style: italic;">/* negative half of the height */</span>
<span style="color: #00aa00;">}</span></pre>
</div>
</div>
<p><strong>优点：</strong><br />
适用于所有浏览器<br />
不需要嵌套标签</p>
<p><strong>缺点：</strong><br />
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)</p>
<h3>方法三</h3>
<p>这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。<br />
content 清除浮动，并显示在中间。</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"floater"</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&gt;</span>
	Content here
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #cc00cc;">#floater</span>	<span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">float</span><span style="color: #00aa00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #993333;"><span style="color: #cc66cc;">50</span>%</span><span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00aa00;">:</span><span style="color: #993333;">-120px</span><span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span>
<span style="color: #cc00cc;">#content</span>	<span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00aa00;">:</span><span style="color: #993333;">both</span><span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #993333;">240px</span><span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00aa00;">:</span><span style="color: #993333;">relative</span><span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span></pre>
</div>
</div>
<p><strong>优点：</strong><br />
适用于所有浏览器<br />
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现</p>
<p><strong>缺点：</strong><br />
唯一我能想到的就是需要额外的空元素了.</p>
<h3>方法四</h3>
<p>这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&gt;</span>
	Content here<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #cc00cc;">#content</span> <span style="color: #00aa00;">{</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00aa00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00aa00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00aa00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00aa00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">right</span><span style="color: #00aa00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00aa00;">:</span><span style="color: #993333;">auto</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #993333;">240px</span><span style="color: #00aa00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00aa00;">:</span><span style="color: #993333;"><span style="color: #cc66cc;">70</span>%</span><span style="color: #00aa00;">;</span>
<span style="color: #00aa00;">}</span></pre>
</div>
</div>
<p><strong>优点：</strong><br />
简单</p>
<p><strong>缺点：</strong><br />
IE(IE8 beta)中无效<br />
无足够空间时，content 被截断，但是不会有滚动条出现</p>
<h3>方法五</h3>
<p>这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"content"</span>&gt;</span>
	Content here<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #cc00cc;">#content</span> <span style="color: #00aa00;">{</span><span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #993333;">100px</span><span style="color: #00aa00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00aa00;">:</span><span style="color: #993333;">100px</span><span style="color: #00aa00;">;</span><span style="color: #00aa00;">}</span></pre>
</div>
</div>
<p><strong>优点：</strong><br />
适用于所有浏览器<br />
无足够空间时不会被截断</p>
<p><strong>缺点：</strong><br />
只对文本有效(块级元素无效)<br />
多行时，断词比较糟糕</p>
<p>这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blogviews.cn/code/css.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

