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

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>

查看全文

相关阅读:
【PAT】B1041 考试座位号（15 分）
【PAT】B1042 字符统计（20 分）
【PAT】B1044 火星数字（20 分）
LeetCode 3Sum Closest
一定要做的事(备忘)
LeetCode Integer to Roman
Container With Most Water
LeetCode ZigZag Conversion
LeetCode 5 最长回文子串　Manacher线性算法
 LeetCode Longest Substring Without Repeating Characters

原文地址：https://www.cnblogs.com/xingyukun/p/1350551.html