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>
  • 相关阅读:
    VMware 安装Windows Server 2008 R2
    Linux系统常用命令
    VMware安装CentOS 7和kali 2019.03
    Windows系统下常用命令
    javaFx 图书管理系统,采用 jfoenix-8.0.4 开源框架,使用 MaterialDesighn 风格
    华中大数据结构课程设计-------基于查找表的单词检索软件--------静态表、动态表、哈希表
    Java语言程序设计 :医院简易挂号管理系统 华科Java实验
    java 通过TCPUDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端
    JAVA 通过 Socket 实现 TCP 编程
    app自动化测试python
  • 原文地址:https://www.cnblogs.com/xingyukun/p/1350551.html
Copyright © 2011-2022 走看看