• 自己第一个正儿八经的div+css页面


    虽然很简单,但毕竟是自己第一次按照web标准画的页面,呵呵。
    这是一个简单的两行三列的大表格布局。以后设计简单页面就可以“照方吃炒肉”了。

    代码如下:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>收藏本站</title>
    <style type="text/css">
        #main
    {
            width
    :100%;
            height
    :100%;
            height
    :800px;
        
    }

        #left
    {
        width
    :150px;
        height
    :100%;
        background
    :gray;
        float
    :left;
        
    }
            #function
    {
                width
    :100%;
                height
    :79%;
                background
    :orange;
            
    }
            
            #status
    {
                width
    :100%;
                height
    :165px;
                background
    :silver;
                margin-top
    :2px;
                
            
    }
        
        #middle
    {
        width
    :700px;
        height
    :100%;
        margin-left
    :5px;
        margin-top
    :0px;
        background-color
    :fuchsia;
        float
    :left;
        
    }
            #map
    {
                width
    :100%;
                height
    :79%;
                background
    :aqua;
            
    }
            
            #search
    {
                width
    :100%;
                height
    :165px;
                background
    :blue;
                margin-top
    :2px;
                
            
    }


        #right
    {
        width
    :200px;
        height
    :100%;
        margin-top
    :0px;
        background
    :lime;
        float
    :left;
        margin
    :0px 0px 0px 5px;
        
    }
        
            #list
    {
                width
    :100%;
                height
    :79%;
                background
    :orange;
            
    }
            
            #detail
    {
                width
    :100%;
                height
    :165px;
                background
    :silver;
                margin-top
    :2px;
                
            
    }

    }
    </style>
    </head>

    <body>
    <div id="main" >
        
    <div id="left"  >
            
    <div id="function"></div>
            
    <div id="status"></div>
        
    </div>
        
    <div id="middle" >
            
    <div id="map"></div>
            
    <div id="search"></div>
        
    </div>
        
    <div id="right" >
            
    <div id="list"></div>
            
    <div id="detail"></div>
        
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    临时表的问题
    List集合和Set集合互转
    mysql数据库事件
    mysql存储过程事务
    N皇后问题
    递归实现字符数组的全排列及组合
    判断一个序列是否为某二叉搜索树的后续遍历结果
    递归实现两个有序链表的合并
    递归实现字符串反转
    根据字节数截取字符串
  • 原文地址:https://www.cnblogs.com/xingyukun/p/1350551.html
Copyright © 2020-2023  润新知