zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    SI与EMI(一)
    设计上如何避免EMC问题
    EMC与地之重新认识地
    EMC学习之电磁辐射
    围殴拓扑和端接之终结篇
    T型及Fly_by拓扑之应用总结
    拓扑结构介绍及其种类
    [转]Verilog综合时wire和reg如何防止被优化
    Verilog基础知识0（`define、parameter、localparam三者的区别及举例）
    [转]jumbo frame介绍
  • 原文地址：https://www.cnblogs.com/songsh96/p/659645.html
Copyright © 2011-2022 走看看