第14章 变宽度网页布局剖析和制作.pptVIP

第14章 变宽度网页布局剖析和制作 概述 变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于，宽度不确定，导致很多参数无法确定。因此，必须使用一些技巧来完成 内容 “1-2-1”变宽度网页布局 “1-3-1”宽度适应布局 分列布局背景色问题 “1-2-1”变宽度网页布局 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此，中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种情况都是很常见的布局方式。 1、“1-2-1”等比例变宽布局 例如，在网页中，网页内容的宽度为浏览器窗口宽度的85%，页面中左侧的边栏的宽度和右侧的内容栏的宽度保持1:2的比例，可以看到无论浏览器窗口宽度如何变化，它们都等比例变化。 例1：“1-2-1”等比例变宽布局 策略：只需将宽度的设置从原来确定的像素值修改为百分比即可。 “1-2-1”变宽度网页布局 如果希望宽度的变化在一定的范围内，则可以设置最大和最小宽度，代码如下： .header,.footer,.container{ min-width: 500px; max-width: 800px; } 注意：IE6.0不支持min-width和max-width属性。 “1-2-1”变宽度网页布局 2、“1-2-1”单列变宽布局 在上面的例子中，当宽度变化时，各个部分的宽度都会变化，且它们之间的比例保持不变。实际上，只有单列宽度变化，而其他保持固定的布局可能更实用。 一般在存在多个列的页面中，通常比较宽的一列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不需要扩大。 例2：side宽度固定，而content的宽度随总宽度的变化而变化 分析：如果把某一列的宽度设置为固定值，则另外一列（即活动列）的宽度就无法设置了。因为总宽度为止，活动列的宽度就无法确定，因此需要重新修改。 使用浮动的方法，其核心问题是浮动列的宽度等于“100%-300px”，而CSS不支持带有加减法运算的宽度表达方法，但是可以通过margin实现，其原理如下： 对contentWarp、content和side的css设置修改如下： .container .warpcontent { float: left; width: 100%; margin-left: -300px; } .content { background-color: #FFFF66; padding: 5px; margin-left: 300px; } .side { width: 280px; background-color: #33FF33; padding: 5px; float:right; } 内容 “1-2-1”变宽度网页布局 “1-3-1”宽度适应布局 分列布局背景色问题 “1-3-1”宽度适应布局 “1-3-1”布局可以产生很多不同的变化方式，如下： 三列都按比例来适应宽度； 一列固定，其他两列按比例适应宽度； 两列固定，其他一列适应宽度； 1、“1-3-1”三列宽度等比例布局 作为练习完成（练习1），其中要求leftside和rightside均站总宽度的20% “1-3-1”宽度适应布局 2、“1-3-1”单侧列宽度固定的变宽布局 对于一列固定、其他两列按比例适应宽度的情况，如果该固定的列在左边或右边，那么只需要在两个变宽列的外面套一个div，并且这个div宽度是变宽的，它与旁边的固定宽度列构成了一个单列固定的“1-2-1”布局，就可以使用浮动法来实现布局。 .outwarp { float: left; width: 100%; margin-left: -200px; } .innerwarp { margin-left: 200px; padding: 0; } .rightside { font-size: 12px; color: #000000; background-color: #99FF00; padding: 10px; margin-left: 5px; float: right; width: 175px; } .leftside { padding: 10px; background-color: #FFFF00; width: 30%; font-size: 12px; float: left; } .content { background-color: #FF99FF; padding: 10px; width: 64%; font-size: 12px; float