大家一起来博皮——2：液态布局和固态布局，页面框架篇

saybody

浏览: 903526 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<div style="border-right: teal 1px dotted; border-top: teal 1px dotted; font-size: 9pt; float: right; border-left: teal 1px dotted; width: 115px; color: teal; border-bottom: teal 1px dotted; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/bslogo.gif"><br>
大家一起来博皮</div>
<p>虽然博客园的皮肤很多，而且很漂亮。但是那些自己想更“个性化”自己博客皮肤的朋友，对博客园的皮肤模板还是颇多不满，认为皮肤的结构过于混乱，css样式难以掌控。针对这种情况，博客园开发团队在2007年底，对博客园皮肤模板进行了较大程度的改进和调整，力求让更多的朋友能够更方便、简单的制作自己个性化的博客皮肤。</p>
<p>但是，到底如何利用新的皮肤模板，来制作个性化的博客皮肤呢？且看《大家一起来博皮》系列文章，告诉你制作个性“博皮”的秘密。</p>
<h4>液态和固体</h4>
<p>网页就布局方式来分，可以分为液态布局和固态布局。那什么是“液态”?什么是“固态”呢？其实很简单！</p>
<p>说到“液态”大家可能最多想到的是“水”，说到“固态”大家可能最多想到是“石头”。想象一下这样的情景——我们把浏览器当成一个容器，然后把“水”倒到这个容器里面，当我们改变浏览器大小的时候，里面的“水”就会根据浏览器的长和宽的改变来改变形态。而当我们把“石头”放在容器里面的时候，“石头”并不会改变自己来适应浏览器的，所以浏览器就会出现横向或者竖向的滚动条。</p>
<p>小弟嘴拙，所以上面这个蹩脚的比喻，可能不能给你一个清晰的理解。那么请分别运行下面的两段代码，这个两个示例页面，可能对你的有进一步的帮助——</p>
<p>下面这个是液态布局的示例页面代码，其中说明了液态布局的优点和缺点。</p>
<textarea id="txtTestCode3" rows="12" cols="65">   <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#liquid_test{
border:1px solid red;
width:99%;
}
</style>
</head>
<body>
<div id="liquid_test">
<p><strong>这是一个液态布局的例子。改变浏览器的大小，来观察这个div容器和里面文字的变换。</strong></p>
<p><strong>液态布局的好处就是，无需关注用户屏幕分辨率的大小，网页能够自己去适应。但是液态布局也有其不好的方面，例如：不同显示器分辨率情况下，布局控制比较麻烦，需要考虑到情况很多。还有就是在不同分辨率的情况下，浏览器大小不同，从而使得网页看上去变化较大，不能让用户获得较为统一的视觉感受。还有就是，如果网页里面包含较大的图片时就会比较麻烦了。还有比较令人郁闷的一点是液态布局的时候，背景图片用起来比较麻烦，宽度不好调整。当然，你可以使用<a target="_blank" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/25/905740.html" title="滑动门技术">滑动门技术</a>来解决问题，但是毕竟不是每个人都喜欢利用额外的技术来达到视觉的改善。</strong></p>
<p>为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。</p>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>下面这个是固态布局的示例页面代码，其中说明了固态布局的优点和缺点。</p>
<textarea id="txtTestCode4" rows="12" cols="65">    <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#solid_test{
border:1px solid blue;
width:800px;
margin:0 auto;/*让容器居中显示*/
}
</style>
</head>
<body>
<div id="solid_test">
<p><strong>这是一个固态布局的例子。改变浏览器的大小，来观察这个div容器和里面文字的变换（其实是没有变化。但是需要注意到是：当宽度低于800px的时候，浏览器会出现横线滚动条。）</strong></p>
<p><strong>固态布局的好处就是，无论什么情况，网页容器宽度是固定的，只要调整好固定宽度时的网页布局就可以了，无需考虑多种情况下的布局显示。但是固态布局的缺点也很明显——到底要设固定宽度为多少呢？太大的时候，如果用户屏幕分辨率太小的，就会出现横线滚动条，会让人不爽。不过太小的话，那些使用宽屏的用户，就会发现，网页挤在一起的像一陀db，但是却又很多的剩余空间没有别利用，浪费掉了。</strong></p>
<p>为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。为了营造示例效果这里是些无关的填充文字。这个示例页面来自博客园<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!">YES!B/S!</a>博客。</p>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>通过上面的示例页面，我们可以看出，“液态”布局和“固态”布局，最基本的差别就是网页容器的宽度设置方式：液态布局是用百分比来设置宽度，而固态布局采用的固定值来设置宽度。他们各自的优缺点已经在示例页面中说明，你可以运行上面的代码看到。 </p>
<p>“液态”or“固态”？面临选择，我们该如何抉择？</p>
<h4>融合！石头里的水和水里的石头！</h4>
<div class="floatRPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img style="margin-right: 5px;" alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin21.png"></a><br>
融合而非吞并</div>
<p>还记得当初刚设计好这个logo（右图所示），放在网页上的时候，有个朋友评论道：“很好，FireFox吃掉IE，这个很有意思！”。当时看到这条留言的时候，就完全丧失了自己对图片设计的信心。因为，当初设计这个logo的初衷，并不是想表现谁吃掉谁，而是想表达一种“和谐的融合”这个含义。</p>
<p>其实面对众多选择，我们是不是就一定要把一个抱住怀里呵护着，而把另一个踩在脚底呢？我们难道就不能两者都有所兼顾吗？就如同上面关于“液态布局”和“固态布局”的选择。如果，我们选择了一方，就一定要抛弃另外一种吗？其实，非也、非也。我们还是可以让石头和水很好的融合的。</p>
<h5>亦水亦石</h5>
<p>博客新模板，采用了一种“亦水亦石”的布局方式。</p>
<p>首先，对皮肤制作有兴趣的朋友可以去<a title="博客模板静态页面" href="http://skintemplate.cnblogs.com" target="_blank">http://skintemplate.cnblogs.com</a>下载到最新的博客皮肤模板静态页面和开发文档。这些静态页面是根据最新的博客皮肤模板，剥离出来的静态页面。结构以及各个页面元素的id和class，和最新的博客皮肤模板是一致，这样就可以方便大家在本地进行进行模板制作和调试了。而开发文档则详细的表明了网页结构以及页面元素的id和class。（请3月8日以前下载的朋友再重新下载一遍，因为新的版本有一处较大的修改。给您带来不便，请谅解。）</p>
<p>通过对最新模版的分析（可以借助工具<a title="IE Developer Toolbar" href="http://www.cnblogs.com/JustinYoung/archive/2007/04/19/good-tools-for-web-developer.html" target="_blank">IE Developer Toolbar</a>进行分析），可以得知：模板页面自己定义的最外层容器是一个id为“home”的div。“home”里面分别是id为“header”的头部div，id为“main”的主体div，以及id为“footer”的底部版权信息div。</p>
<p>为什么要把所有的东西，都包含在一个id为“home”的div容器里面呢？考虑因素是多方面的，但是为了达到“亦水亦石”的效果，绝对是一个重量级的因素——只要我们将“#home”的宽度设置为百分比形式，那么模板就是液态的布局方式，而当我们将“#home”的宽度设置为固定宽度值的话，那么模板就又变成了固态的布局方式。</p>
<h5>石头里面的水</h5>
<p>当我们将“#home”的宽度设置为百分比时，之所以整个页面都是“液态”的，是因为“#home”容器里面的“#header”、“#main”、“#footer”各个容器都是液态布局的。所以当“#home”改变宽度的时候，“#header”、“#main”和“#footer”自然也会跟着改变宽度。这就如同，我们将很多装了“水”的气球，放在一个大的装了“水”的气球里面。当最外面的气球被挤压的时候，里面的“水气球”也会跟着变化。</p>
<p>但是，当我们将“#home”的宽度设置为固定宽度值的时候，最大的容器变成了“固态”的，而里面的那些“#header”、“#main”和“#footer”虽然是液态的，但是没有关系，它们依然能很好的呈现在“#home”容器里面。这就如同将很多装了“水”的气球，放在一个有着石头外壳的大容器里面。因为石头容器不会发生改变，所以，自然不用担心里面的“水气球”会发生变化。布局依然没有任何问题。</p>
<p>“液态布局”还是“固态布局”？我们只要改变“#home”宽度的设置方式即可，完全没有必要再去修改“#header”、“#main”和“#footer”的宽度。这就将液态和固态的切换改变，变得非常容易。</p>
<h5>水里的石头</h5>
<p>通过上面一节的描述和介绍，可以知道，博客主体内容被放在了一个id为“main”的div水气球里面。当我们将“#main”单独拎出来，作为一个“页面中的小页面”进行分析的时候。可以得知：其实“#mian”里面包含了两个div容器，第一个是id为“mainContent”的div主容器，第二个是id为“sideBar”的div侧边栏容器。（为什么侧边栏容器一定要放在后面的原因，可以参考《<a title="《播客》项目总结——web标准页面设计方面 " href="http://www.cnblogs.com/JustinYoung/archive/2007/09/17/project-summarize-web-standard.html" target="_blank">《播客》项目总结——web标准页面设计方面 </a>》一文中“排队，排队！”小节。）</p>
<p>为了便于讲解，我们需要简化这个模型，这样我们就可能需要另一个示例——一个简化了的，但是结构完全相同的示例页面。</p>
<textarea id="txtTestCode5" rows="12" cols="65">     <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#home {
margin: 0 auto;
width:95%;
background-color:#ccc;
}
#header {
background-color:red;
min-height:20px;
}
#main{
width: 100%;
min-height:200px;
background-color:black;
}
#mainContent {
float: right;
min-height: 200px;
width:69%;
background-color:Teal;
}
#sideBar {
width: 30%;
min-height: 200px;
float: left;
background-color:yellow;
}
#footer {
min-height: 15px;
background-color:pink;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="home">
<div id="header">
i'm header!
</div>
<div id="main">
<div id="mainContent">
<div class="forFlow">
这里是页面主体内容展示区域。为液态布局，会根据浏览器的宽度而发生变化。此测试页面来源于 <a target="_blank" href="http://www.cnblogs.com" title="博客园"> 博客园</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一个关注web标准设计的博客，如果你对web标准设计感兴趣，请访问此博客。与众多的web标准爱好者一同分享、进步！<br/ />
现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。
</div>
</div>
<div id="sideBar">
<img src="http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="侧边栏图片" /><br/ />
这里是侧边栏区域。一般情况下，侧边栏的内容是比较固定的，所以，对于其宽度，我们是完全可以预测的。
</div>
</div>
<div class="clear"></div>
<div id="footer">
i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>
</div>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>运行上面的代码，可以知道，这个示例页面是液态布局的，侧边栏和内容文字，都会根据浏览器的改变而发生改变。但是，当面浏览器宽度非常小的时候，问题出现了（罪魁祸首是那个宽度固定的图片）——</p>
<div class="hiddenArea">
<div class="haContracted" id="divHaF_11">
<img class="imgContracted" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif"><span class="showText">展开此处查看图片</span>
</div>
<div class="haExpanded" id="divHaS_11">
<div class="haHiddenAreaOpration"><img class="imgExpanded" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif"></div>
<div class="haMain">
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin23.gif"></a><br>
当IE6浏览器宽度非常小的时候，示例页面截图</div>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin22.gif"></a><br>
当FireFox浏览器宽度非常小的时候，示例页面截图</div>
</div>

</div>
</div>

<p>无论是在IE6中还是在FireFox浏览器中，布局都变得混乱。至于为什么IE6和FireFox混乱的情况不同，有兴趣的朋友可以看我的系列文章《<a title="IE7的web标准之道" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">IE7的web标准之道</a>》，这里便不再赘言。</p>
<p>一般情况下，侧边栏里面的内容都比较固定，所以宽度一般都是可以提前预知的，一般不会特别宽，所以适合采用“固态布局”。而页面主体内容，一般都是不可预知的，有的长，有的短，所以适合采用“液态布局”。那能不能侧边栏使用固态布局，而页面主体内容使用液态布局呢？这时候，你可能会想：将“#mainContent”的宽度用百分比方式设置，将“#sideBar”的宽度，用固定值宽度值方式设置，不就可以了吗。但是结果却是令人失望的，当你缩小浏览器的宽度到一定程度的时候，结果并不是你想象的那样。</p>
<div class="hiddenArea">
<div class="haContracted" id="divHaF_1">
<img class="imgContracted" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif"><span class="showText">错误的示例代码！简单的设置百分比宽度和固定值宽度</span>
</div>
<div class="haExpanded" id="divHaS_1">
<div class="haHiddenAreaOpration"><img class="imgExpanded" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif"></div>
<div class="haMain">
<textarea id="txtTestCode6" rows="12" cols="65">   <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#home {
margin: 0 auto;
width:95%;
background-color:#ccc;
}
#header {
background-color:red;
min-height:20px;
}
#main{
width: 100%;
min-height:200px;
background-color:black;
}
#mainContent {
float: right;
min-height: 200px;
width:69%;
background-color:Teal;
}
#sideBar {
width: 200px;
min-height: 200px;
float: left;
background-color:yellow;
}
#footer {
min-height: 15px;
background-color:pink;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="home">
<div id="header">
i'm header!
</div>
<div id="main">
<div id="mainContent">
<div class="forFlow">
这里是页面主体内容展示区域。为液态布局，会根据浏览器的宽度而发生变化。此测试页面来源于 <a target="_blank" href="http://www.cnblogs.com" title="博客园"> 博客园</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一个关注web标准设计的博客，如果你对web标准设计感兴趣，请访问此博客。与众多的web标准爱好者一同分享、进步！<br/ />
现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。现在这些文字是为了营造页面效果，故意填充的。
</div>
</div>
<div id="sideBar">
<img src="http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="侧边栏图片" /><br/ />
这里是侧边栏区域。一般情况下，侧边栏的内容是比较固定的，所以，对于其宽度，我们是完全可以预测的。
</div>
</div>
<div class="clear"></div>
<div id="footer">
i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>
</div>
</div>
</body>
</html>
</textarea><div style="clear: both;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
</div>

</div>
</div>

<p>为了达到这样的布局效果，我们需要一些技巧。下面是一个简化的例子，但是所使用的方法和技巧却是通用的。当然，也是最新博客皮肤所采用的——</p>
<textarea id="txtTestCode7" rows="12" cols="65">   <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#home {
margin: 0 auto;
width:95%;
background-color:#ccc;
}
#header {
background-color:red;
min-height:20px;
}
#main{
width: 100%;
min-height:200px;
background-color:black;
}
#mainContent {
float: right;
margin-left: -13em;
min-height: 200px;
width: 100%;
background-color:Teal;
}
#mainContent .forFlow{
margin-left: 13em;
float: none;
width: auto;
background-color:Fuchsia;
}
#sideBar {
width: 200px;
_width:230px;
min-height: 200px;
float: left;
background-color:yellow;
}
#footer {
min-height: 15px;
background-color:pink;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="home">
<div id="header">
i'm header!
</div>
<div id="main">
<div id="mainContent">
<div class="forFlow">
这里是页面主体内容展示区域。为液态布局，会根据浏览器的宽度而发生变化。此测试页面来源于 <a target="_blank" href="http://www.cnblogs.com" title="博客园"> 博客园</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一个关注web标准设计的博客，如果你对web标准设计感兴趣，请访问此博客。与众多的web标准爱好者一同分享、进步！
</div>
</div>
<div id="sideBar">
<img src="http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="侧边栏图片" /><br/ />
这里是侧边栏区域。为固态布局，固定宽度，不会根据浏览器的宽度而发生变化。
</div>
</div>
<div class="clear"></div>
<div id="footer">
i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>
</div>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>于是乎：一个名为“#main”的“水气球”里，装了一块名为“#sidebar”的“石头”……</p>
<h4>再谈“排队、排队！”</h4>
<p>在《<a title="《播客》项目总结——web标准页面设计方面 " href="http://www.cnblogs.com/JustinYoung/archive/2007/09/17/project-summarize-web-standard.html" target="_blank">《播客》项目总结——web标准页面设计方面 </a>》一文中，我曾经罗嗦过一个名为“排队、排队”的小问题。里面简单的说道：可以设置float的值来让侧边栏显示在左边还是右面。但是“水中的石头”这种采用了技巧的布局，如果想改变一下侧边栏的位置，不仅要修改侧边栏和主题容器的float样式，还需要同时修改margin-left(margin-right)样式。下面这个示例页面演示了这种改变（改变可以参看代码中样式中的注释，一共修改了4处）。对比上面的示例页面代码，可以知道，其实改变还是很简单的，呵呵——</p>
<textarea id="txtTestCode10" rows="12" cols="65">   <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#home {
margin: 0 auto;
width:95%;
background-color:#ccc;
}
#header {
background-color:red;
min-height:20px;
}
#main{
width: 100%;
min-height:200px;
background-color:black;
}
#mainContent {
float: left; /*right变为left*/
margin-right: -13em;/*mlargin-left改为margin-right*/
min-height: 200px;
width: 100%;
background-color:Teal;
}
#mainContent .forFlow{
margin-right: 13em;/*mlargin-left改为margin-right*/
float: none;
width: auto;
background-color:Fuchsia;
}
#sideBar {
width: 200px;
_width:230px;
min-height: 200px;
float: right;/*left改为right*/
background-color:yellow;
}
#footer {
min-height: 15px;
background-color:pink;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="home">
<div id="header">
i'm header!
</div>
<div id="main">
<div id="mainContent">
<div class="forFlow">
这里是页面主体内容展示区域。为液态布局，会根据浏览器的宽度而发生变化。此测试页面来源于 <a target="_blank" href="http://www.cnblogs.com" title="博客园"> 博客园</a>下博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>。是一个关注web标准设计的博客，如果你对web标准设计感兴趣，请访问此博客。与众多的web标准爱好者一同分享、进步！
</div>
</div>
<div id="sideBar">
<img src="http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/photo2006.jpg" alt="侧边栏图片" /><br/ />
这里是侧边栏区域。为固态布局，固定宽度，不会根据浏览器的宽度而发生变化。
</div>
</div>
<div class="clear"></div>
<div id="footer">
i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES!B/S!"><strong>YES!B/S!</strong></a>
</div>
</div>
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<h4>min-width和min-height</h4>
<p>IE7和FireFox等对web标准支持比较好的浏览器，已经支持min-width和min-height样式，通过利用这两个样式，我们便可以达到这样的布局效果：超过一定宽度（或者高度）时，采用液态布局；小于一定宽度（或者高度）时，采用固态布局。道理比较浅显，在此不再赘述。</p>
<h4>关于最新皮肤模板“Custom”</h4>
<p>最新的皮肤模板，叫做“Custom”，同时它也时候一款皮肤。你可以在后台直接选用这个模板作为你博客的皮肤。作为最新的皮肤模板，它在不停的完善和修改当中。如果，你对博客皮肤设计有兴趣的话，可以去<a title="博客园皮肤模板" href="http://skintemplate.cnblogs.com" target="_blank">http://skintemplate.cnblogs.com</a>下载这个皮肤模板的静态页面。这些静态页面包含了博客中所有种类的页面，里面的元素标签无论是id还是class的命名都是一致的有了这些静态页面，就可以方便的进行本地的制作和调试了。</p>
<h4>改变“FFandIE”模板侧边栏的位置</h4>
<div class="hiddenArea">
<div class="haContracted" id="divHaF_2">
<img class="imgContracted" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif"><span class="showText">不推荐没有使用“FFandIE”模板的用户阅读</span>
</div>
<div class="haExpanded" id="divHaS_2">
<div class="haHiddenAreaOpration"><img class="imgExpanded" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif"></div>
<div class="haMain">
<p>最新版的皮肤模板，修改了一处命名。将以前名为“#topicList”的div，修正为“#mainContent”。但是“FFandIE”模板，因为已经有较多的人在使用（详细情况可以参看<a title="博客园皮肤使用情报" href="http://www.cnblogs.com/skins.aspx" target="_blank">http://www.cnblogs.com/skins.aspx</a>），其中不能排除一些朋友已经根据“#topicList”自定义了一些样式。考虑到这点，所以“FFandIE”模板中并没有同步修正这个命名。所以，如果要改变“FFandIE”模板侧边栏的位置，请注意这一点。下面是供你参考的样式代码。</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">#topicList.forFlow</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
margin-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">22em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
margin-right</span><span style="color: #000000;">:</span><span style="color: #0000ff;">25px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
#topicList</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
float</span><span style="color: #000000;">:</span><span style="color: #0000ff;">right</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
margin-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">-24em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
_margin-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">-21em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">100%</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
#sideBar</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
float</span><span style="color: #000000;">:</span><span style="color: #0000ff;">left</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
margin-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">2em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
_margin-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">1.2em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span>
</div>
</div>

</div>
</div>

<h4>相关文章、资源列表</h4>
<ul style="">
<li>
<a title="《大家一起来博皮——1：两行代码一个皮肤，树立信心篇》" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/27/lets-blog-skin-01.html" target="_blank">《大家一起来博皮——1：两行代码一个皮肤，树立信心篇》</a>
    </li>
<li>
<a title="《IE6和IE7共存方法（别人是别人的，我是我的）》" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/11/889801.html" target="_blank">《IE6和IE7共存方法（别人是别人的，我是我的）》</a>
    </li>
<li>
<a title="《播客》项目总结——web标准页面设计方面" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/17/project-summarize-web-standard.html" target="_blank">《《播客》项目总结——web标准页面设计方面》</a>
    </li>
<li>
<a title="《IE7的web标准之道——1：前言（兼目录）》" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道——1：前言（兼目录）》</a>
    </li>
<li>
<a title="IE Developer Toolbar工具" href="http://www.cnblogs.com/JustinYoung/archive/2007/04/19/good-tools-for-web-developer.html" target="_blank">IE Developer Toolbar工具</a>
    </li>
<li>
<a title="最新博客园博客皮肤模板、开发文档下载" href="http://skintemplate.cnblogs.com/" target="_blank">最新博客园博客皮肤模板、开发文档下载</a>
    </li>
<li>
<a title="【博客园博皮小组】" href="http://space.cnblogs.com/group/bs/" target="_blank">【博客园博皮小组】</a> </li>
</ul>

分享到：