CSS+DIV布局的测试实例

最后显示效果如下图：

代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SammyDiv.aspx.cs" Inherits="Buying_SammyDiv" %>

<!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>Sammy Test Div</title>
    <style type ="text/css">
        #rtop{       
        margin:0 auto;
        height:30%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCCC00;
        }
        
        #rbottom{        
        margin:0 auto;
        height:70%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCee00;
        }
        
        #left{        
        float:left;
        height:100%;
        width:50%;    
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;   
        background: #CCCCed;
        }
        
        #container{        
        width:600px;  
        height:300px;   
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;  
        background-color:Green
        }
        
        #leftside{
        width:20%;
        height:60%;
        float:left;
        font-family:Arial; 
        font-size:x-large;
        vertical-align:middle; 
        text-align:center;
        background: gray;
        }
        
        #rightside{
        width:80%;
        height:60%;
        float:left;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #Cdfd00;
        }
        
        #foot{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:InactiveBorder;
        }
        #header{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:Red
        }
       

    </style>
</head>
<body>
    <form id="formtest" runat="server">
    <div  id="container">
        <div id="header">
            header   
        </div>
        <div id="midbody">
          <div id="leftside">
            leftside
          </div>
          <div id="rightside">         
             <div id="rtop">
                right top
             </div>
             <div id="rbottom">
                 <div id="left">
                    left
                 </div>
                 <div id="right">
                    right
                 </div>
             </div>
          </div>
        </div>
        <div id="foot">
            foot           
        </div>
        </div>
    </form>
</body>
</html>

posted on 2007-02-28 15:07  Sammy  阅读(268)  评论(0)  编辑  收藏  举报

导航