<?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>小强ORG &#187; 栅格化</title>
	<atom:link href="http://www.xiaoqiang.org/tag/%e6%a0%85%e6%a0%bc%e5%8c%96/feed" rel="self" type="application/rss+xml" />
	<link>http://www.xiaoqiang.org</link>
	<description>关注web前端开发&#124;web性能&#124;NodeJs&#124;用户体验&#124;交互设计</description>
	<lastBuildDate>Mon, 30 Jan 2012 09:25:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>博客改版小结</title>
		<link>http://www.xiaoqiang.org/css/blog_v1.html</link>
		<comments>http://www.xiaoqiang.org/css/blog_v1.html#comments</comments>
		<pubDate>Fri, 23 Jul 2010 03:11:28 +0000</pubDate>
		<dc:creator>小强</dc:creator>
				<category><![CDATA[Css]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[弹性布局]]></category>
		<category><![CDATA[栅格化]]></category>
		<category><![CDATA[黄金分割]]></category>

		<guid isPermaLink="false">http://www.xiaoqiang.org/?p=16</guid>
		<description><![CDATA[有一年没有写博客了，现在想想还是应该继续写博客的。这次顺便练习了一下弹性布局，小巧，简单，灵活。 主要学习到了以下几点技术： 1，采用960网页栅格化布局，左右两栏采用黄金分割比例。960栅格，实际宽度是950. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15。 2，采用弹性布局，首先将字体大小设置为63%，即1em~10px。所以转换成960栅格即wrap=96em，menu=35em，doc=59em。 3，由于内部menu和doc都设置了1.4em即想对宽度要用外层的/1.4，menu=96em/1.4=25em，doc=590em/1.4=42.14em（精确到千分位）。 4，使用%和em定义的字体大小都是继承父元素的，所以计算字体大小都是根据父节点的值做乘除，而使用em为单位的宽度则采用元素本身的字体作为参考值。 5，使用jquery展示Lightbox效果。 6，采用将网址采用二维码的方式展示，更方便智能手机的读取。 7，去掉外层div的样式wrap布局就变成自适应，很有趣吧。]]></description>
			<content:encoded><![CDATA[<p>有一年没有写博客了，现在想想还是应该继续写博客的。这次顺便练习了一下弹性布局，小巧，简单，灵活。</p>
<p>主要学习到了以下几点技术：</p>
<p>1，采用960网页栅格化布局，左右两栏采用黄金分割比例。960栅格，实际宽度是950. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15。</p>
<div id="attachment_17" class="wp-caption aligncenter" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/gold_2_col.png"><img class="size-thumbnail wp-image-17 " title="gold_2_col" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/gold_2_col-150x150.png" alt="2拦黄金分割栅格化" width="150" height="150" /></a><p class="wp-caption-text">2拦黄金分割栅格化</p></div>
<p><span id="more-16"></span></p>
<p>2，采用弹性布局，首先将字体大小设置为63%，即1em~10px。所以转换成960栅格即wrap=96em，menu=35em，doc=59em。</p>
<p>3，由于内部menu和doc都设置了1.4em即想对宽度要用外层的/1.4，menu=96em/1.4=25em，doc=590em/1.4=42.14em（精确到千分位）。</p>
<p>4，使用%和em定义的字体大小都是继承父元素的，所以计算字体大小都是根据父节点的值做乘除，而使用em为单位的宽度则采用元素本身的字体作为参考值。</p>
<p>5，使用jquery展示Lightbox效果。</p>
<p>6，采用将网址采用二维码的方式展示，更方便智能手机的读取。</p>
<p>7，去掉外层div的样式wrap布局就变成自适应，很有趣吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaoqiang.org/css/blog_v1.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

