zoukankan      html  css  js  c++  java
  • 自己第一个正儿八经的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>
  • 相关阅读:
    一个FLAG #03# 蛇形填数
    一个FLAG #02# 逆序输出
    一个FLAG #01# 重学C/C++以及算法
    MAVLink笔记 #01# 维基百科翻(译)
    编译原理 #04# 中缀表达式转化为四元式(JavaScript实现)
    Java开发:手机电话号码校验
    解决java poi循环遍历行getLastRowNum出现不准确的问题
    Redis的安装和简单测试
    JS解析xml字符串,并把xml展示在HTML页面上
    解决cxf+springmvc发布的webservice,缺少types,portType和message标签的问题
  • 原文地址:https://www.cnblogs.com/xingyukun/p/1350551.html
Copyright © 2011-2022 走看看