3行2列布局
Codebody
{
font-size:12px;
margin:0px;
font-family:Verdana;
}
.container
{
margin:10px;
width:100%;
}
.header
{
background:#9C6;
margin-bottom:5px;
height:100px;
}
.menu
{
background:#693;
margin-bottom:5px;
height:30px;
}
.pagebody
{
background:url(bg.gif) repeat-y 0px 0px;
margin-bottom:5px;
overflow:auto;
zoom:1;
}
.sidebar
{
background:#CF9;
float:left;
width:200px;
height:300px;
}
.content
{
background:#FFA;
margin-left:202px;
height:300px
}
/*.footer
{
background:#9C6;
height:60px;
margin-bottom:8px;
}*/
.footer
{
width:100%;
height:60px;
border-top:10px solid #36C;
font-size:12px;
color:#666;
text-align:center;
line-height:50px;
}
.clearfloat
{
clear:both;
font-size:1px;
line-height:0px;
height:0px;
}
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 runat="server">
<title>Untitled Page</title>
<link href="App_Themes/Theme1/MasterSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">This is the Header</div><br class="clearfloat"/>
<div class="menu">This is the Menu</div><br class="clearfloat"/>
<div class="pagebody">
<div class="sidebar">This is thesidebar</div>
<div class="content">
此例中需要说明一点的是：当content设定高度后，3像素会跑到content外侧，反之，在content内部。这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的，这是大家必须注意的一点。而当content设定高度后，如100px，那么在IE6下，当高度超过100px时，它会自动把conent撑高，而火狐去不会。所以用!important修正在IE下设定高度值使它的3像素跑到外侧，火狐下因不存在3像素问题，所以高度自动。<br />
<br />
<br />
总之，实现的方法是多种多样的，这只是本人在学习过程中总结的一点经验，权当抛砖引玉，希望能对您有所帮助，当然您有更好的办法和布局，欢迎一块来学习，交流，让web标准在中国得到更好的发展。同时希望您继续关注标准之路</div>
</div> <br class="clearfloat"/>
<div class="footer">This is the footer<span style="DISPLAY: none">
</span>
</div>
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号