CSS+DIV布局的测试实例

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>
相关阅读:
CSS 之伪类及伪元素
 php使用strlen()判断中文汉字字符串长度
 代码评审
 Windows下获取本机IP地址方法介绍
 c++ windows 获取mac地址
 Windows编译安装OpenSSL
visio studio2008 删除最近的项目
 Windows中杀死占用某个端口的进程
 apache日志文件太大的问题
 text段,data段,bss段,堆和栈
原文地址：https://www.cnblogs.com/songsh96/p/659645.html