第一次用css布局做东西

nihongye

浏览: 102047 次
性别:
来自: 深圳

最近访客更多访客>>

khwzh

zkbucciarati

cccyyy12

hujian_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS velocity XHTML HTML

<!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">
<link href="css/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
    body {
        font-family: sans-serif;
        font-size: 14px;
    }
    /**{*/
        /*border:1px solid black;*/
    /*}*/
   //布局代码
    #container {
        width: 911px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #head {
        text-align: left;
    }

    #row0 {
        padding-top:0;
    }
    
    #grid1_0 {
        float: left;
        width: 700px;
        height: inherit;
    }

    #grid1_1 {
        width: 204px;
        float: right;
        height: inherit;
    }


    #grid4_0 {
        float: left;
        width: 449px;
        height: inherit;
    }

    #grid4_1 {
        float: right;
        width: 450px;
        height: inherit;
    }


    #grid6_0 {
        float: left;
        width: 294px;
        height: inherit;
    }

    #grid6_1 {
        float: right;
        width: 608px;
        height: inherit;
    }

    #foot{
        padding-bottom:8px;
    }
    .row {
        float:left;
        width:100%;
        padding-top:8px;
        text-align: left;
    }
</style>

<script type="text/javascript">
//将某个div放置在divMap中指定的区域
function preparedDiv(divId)
{
    if(typeof disableDivs != "undefined" && disableDivs === true)
    {
        return;
    }
    if(typeof divMap[divId] == "undefined" || divMap[divId] == null)
    {
        alert("在divMap中未找到快"+divId+"的定义!");
        return false;
    }
    var targetDiv  = document.getElementById(divMap[divId]);
    var srcDiv  = document.getElementById(divId);
    targetDiv.innerHTML = srcDiv.innerHTML;
}



//    var disableDivs = true;
    var divMap = {headContent:"head",
                  search:"row0",
                  news:"grid1_0",newsAd:"grid1_1",
                  ad0:"row3_ad0",
                  stockBid:"grid4_0",projectBid:"grid4_1",
                  ad1:"row5_ad1",
                  regionInfo:"grid6_0",
                  materialInfo:"grid6_1",
                  ad2:"row7_ad2",
                  company:"row8",
                  ad3:"row9_ad3",
                  knowledge:"row10",
                  footContent:"foot"
    };
</script>
</head>
<body>
<div id="container">
    <div id="head">
        head loading...
    </div>
    <div id="row0" class="row">
        row0 loading...
    </div>
    <div id="row1" class="row">
        <div id="grid1_0">
            grid1_0 loading...
        </div>
        <div id="grid1_1">
            grid1_1 loding...
        </div>
    </div>
    <div id="row3_ad0" class="row">
        row3_ad0 loading...
    </div>

    <div id="row4" class="row">
        <div id="grid4_0">grid4_0 loading...</div>
        <div id="grid4_1">grid4_1 load...</div>
    </div>

    <div id="row5_ad1" class="rowAd row">
        row5_ad1 loading...
    </div>

    <div id="row6" class="row">
        <div id="grid6_0">grid6_0 loading...</div>
        <div id="grid6_1">grid6_1 loading...</div>
    </div>

    <div id="row7_ad2" class="row">
        row7_ad2 loading...
    </div>

    <div id="row8" class="row">
       row8 loading... 
    </div>

    <div id="row9_ad3" class="row">
       row9_ad3 loading...
    </div>

    <div id="row10" class="row">
       row10 loading...
    </div>


    <div id="foot" class="row">foot loading...</div>
</div>
//velocity include 这个页面所有块的内容
#parse("/website/indexDivs.htm")
//indexDivs.htm里面的一块代码
<div id="ad2" style="display:none">
</div>
<script type="text/javascript">
    preparedDiv("ad2");
</script>
</body>

</html>

分享到：