css 左右布局一例

<!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" style="height:100%;">
<head runat="server">
    <title></title>
</head>
<body style="height:100%; padding:0;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
    <div style="height:100%;margin:0;padding:0;background-color:Green;">
        <div id="header" style="height:100px; background-color:Yellow;">header</div>
        <div id="menu" style="background-color:Blue;width:240px; float:left;display:inline;z-index:100">
            <p>
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
                menu<br />
            </p>
        </div>
        <div id="main" style="background-color:transparent;width:100%;margin-left:-260px;float:right;z-index:9999;">
            <div style="margin-left:260px;">
                内容
            </div>
        </div>
    </div>
    <div id="footer" style="height:20px; margin:-20px; background-color:Red;"></div>
    </form>
</body>
</html>

 

posted on 2013-04-10 22:53  空明流光  阅读(214)  评论(0编辑  收藏  举报

导航