|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
自顺应高度的成绩,接纳Div+CSS举行三列或二列结构时,事前不晓得详细高度,只能依据内容的增减自顺应高度,要使两列(或三列)的高度不异,用Table很简单完成,但接纳Div+CSS就显得对照贫苦了。依照一样平常的做法,多数接纳背景图添补或JS剧本的办法使高度不异,但这些都不是最好的举措,我以为…
上面先容接纳“埋没容器溢出”和“正内补钉”和“负外补钉”分离的办法
次要代码:
#wrap{overflow:hidden;}/*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}/*列*/
完全例子代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Div+CSSExample,WayhomesBlog</title>
<styletype="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style></head>
<body>
<divid="wrap"style="width:300px;background:#FFFF00;">
<divid="sidebar_left"style="float:left;width:100px;background:#FF0000;">Left</div>
<divid="sidebar_mid"style="float:left;width:100px;background:#666;">
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
</div>
<divid="sidebar_right"style="float:right;width:100px;background:#0000FF;">Right</div>
</div>
</body>
</html>
在IE5.5、IE6、FF1.5、Opera9测试经由过程。
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。 |
|