<?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>WEB前端开发 &#187; 布局</title>
	<atom:link href="http://www.css88.com/archives/tag/%e5%b8%83%e5%b1%80/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>射雕双飞翼布局的几个补充布局</title>
		<link>http://www.css88.com/archives/1370</link>
		<comments>http://www.css88.com/archives/1370#comments</comments>
		<pubDate>Fri, 05 Jun 2009 18:50:48 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[双飞翼布局]]></category>
		<category><![CDATA[布局]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1370</guid>
		<description><![CDATA[前段时间一直在开发css框架，同事提示我看射雕的双飞翼布局，非常不错的一个布局，引用射雕自己的话： 1.实现了内容与布局的分离，即Eric提到的Any-Order Columns. 2.main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。 3.任何一栏都可以是最高栏，不会出问题。 4.需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;） 5.在浏览器上的兼容性非常好，IE5.5以上都支持。 那么究竟什么是双飞翼布局呢？大家可以看看； 渐进增强式布局探讨（上） 渐进增强式布局探讨（下） 网页栅格系统研究（4）：技术实现 射雕还专门做了个栅格化的双飞翼demo：Grids Layout Demo 其实类似这种布局国外有人很早也做了，同一个html文档通过css样式能做出40种不同的布局展现，当然甚至可以更多，包括我也曾经关注过，不过个人认为决定网页布局的应该是信息架构，而不纯粹的依靠html文档流和css样式。 今天仔细的研究了射雕的双飞翼，自己在射雕demo的基础上，在3栏模式下做了一点扩展，这些布局在他的Grids Layout Demo中没有看到，所以今天做了几个补充布局：http://www.css88.com/demo/Grids%20Layout/cssA/to.html 回到CSS框架，双飞翼布局能做框架吗，毫无疑问他是可以的，但是会有以下几个问题： 1，如果做像Blueprint一样的框架，就是950，24列的各种形式都要有的话，那么这个双飞翼栅格布局框架的代码不是一般的多，因为他变化太多，太灵活了，这一点非常重要。射雕也在网页栅格系统研究（4）：技术实现中写到: 这套栅格系统并不能实现所有布局。这和YUI Grids类似，只能实现预定的一些布局。比如三栏布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况，&#8230;对于同一个站点来说，太多不同的三栏比例不是好事 2,这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层div的class不同。如果要交换左右栏，只要非常简单的修改下class就可以; 3,通过两栏布局和三栏布局可以组合出多种布局。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《射雕双飞翼布局的几个补充布局》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1370/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>同一个html结构的40种不同布局</title>
		<link>http://www.css88.com/archives/664</link>
		<comments>http://www.css88.com/archives/664#comments</comments>
		<pubDate>Thu, 26 Mar 2009 06:04:32 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[布局]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=664</guid>
		<description><![CDATA[前端时间看到一个老外的同一个html结构的40中不同布局（http://blog.html.it/layoutgala/） 这也体现了css真正的精髓！ 我今天也照着样子做了一遍，疯掉，做到30个就做的头晕了，做了就不浪费，拿出来和大家共享一下。 http://www.css88.com/demo/css_n/bg1.html http://www.css88.com/demo/css_n/bg2.html http://www.css88.com/demo/css_n/bg3.html http://www.css88.com/demo/css_n/bg4.html http://www.css88.com/demo/css_n/bg5.html http://www.css88.com/demo/css_n/bg6.html http://www.css88.com/demo/css_n/bg7.html http://www.css88.com/demo/css_n/bg8.html http://www.css88.com/demo/css_n/bg9.html http://www.css88.com/demo/css_n/bg10.html http://www.css88.com/demo/css_n/bg11.html http://www.css88.com/demo/css_n/bg12.html http://www.css88.com/demo/css_n/bg13.html http://www.css88.com/demo/css_n/bg14.html http://www.css88.com/demo/css_n/bg15.html http://www.css88.com/demo/css_n/bg16.html http://www.css88.com/demo/css_n/bg17.html http://www.css88.com/demo/css_n/bg18.html http://www.css88.com/demo/css_n/bg19.html http://www.css88.com/demo/css_n/bg20.html http://www.css88.com/demo/css_n/bg21.html http://www.css88.com/demo/css_n/bg22.html http://www.css88.com/demo/css_n/bg23.html http://www.css88.com/demo/css_n/bg24.html http://www.css88.com/demo/css_n/bg25.html http://www.css88.com/demo/css_n/bg26.html http://www.css88.com/demo/css_n/bg27.html http://www.css88.com/demo/css_n/bg28.html http://www.css88.com/demo/css_n/bg29.html http://www.css88.com/demo/css_n/bg30.html    更多就看这里吧http://blog.html.it/layoutgala/，我是头已经晕了，呵呵 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《同一个html结构的40种不同布局》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/664/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

