相信明天会更好

平时一般用css的浮动属性来控制sidebar的位置，如果只是用浮动属性的话，那么其背景样色或者图片是随设sidebar的内容多少来填充的，这样势必会造成sidebar内容很少时那么背景颜色也填充很少，这样与主内容不相符，造成布局很难看。这里我们假设HTML中有两个<div>。其中一个是主内容，另一个是右边工具条。工具条浮动到右边，并有一个170px的宽度，由于工具条中的内容较少，他比主文本短。所以我们把那个html包在一个<div>中像这样： CSS语言: 例如如下代码 <div id=“wapper”> <div id=“main”> main content for page,this column has a lot of text and is much taller than the sidebar. </div> <div id=“sidebar”> sidebar content here </div> </div> 这样外层的div增长到与它内部最高元素一样高，因此即使#main div很高，包围的div也一样高，所以我们就可以利用这一点来设计#wrapper div的样式，带有与右边工具条等宽度的背景图片或者颜色，然后垂直平铺，这样就避免了背景图片或者颜色值只充有内容的sidebar。代码如下： CSS语言: 包装div的css代码 #wrapper { background:url(images/1.gif) repeat-y right top; } 这样设置以后浏览器就会自动的把背景图片显示在sidebar的下方，从而也就创建了带有背景颜色的sidebar

阅读全文 »