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>
  • 相关阅读:
    BootStrap .row-cols 类的用法
    苹果手机浏览器$(document).on(“click”,function(){})点击无效的问题
    $("节点名").html("字符串")和$("节点名").text("字符串")区别
    linux 安装Nginx
    linux安装nginx
    vue dev开发环境跨域和build生产环境跨域问题解决
    正在载入中......loading页面的几种方法
    浏览器断点调试js
    vue组件之间传值方式解析
    基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面
  • 原文地址:https://www.cnblogs.com/xingyukun/p/1350551.html
Copyright © 2011-2022 走看看