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>
  • 相关阅读:
    tcprstat分析服务的响应速度
    mysqldump之不老将
    Java数据持久层框架 MyBatis之API学习二（入门）
    Java数据持久层框架 MyBatis之API学习一（简介）
    插入数据库日期格式转换
    eclipse出现错误：he type java.util.Map$Entry cannot be resolved. It is indirectly referenced
    注释中不允许出现字符串 "--"。
    mybatis if条件查询 及<号的问题
    This is probably because there is no OLE editor registered against the type of file you were trying to open.
    github not authorized eclipse
  • 原文地址：https://www.cnblogs.com/songsh96/p/659645.html
Copyright © 2011-2022 走看看