網路城邦
上一篇 回創作列表 下一篇   字體:
CSS語法:多列式框架版面(float)
2015/03/24 18:50:36瀏覽136|回應0|推薦0

<style type="text/css">

*{

        margin:0;

        padding:0;

}

.header,.contenter,.footer {

        width:900px;

        margin:0 auto;

}

.header {

        background-color: #FF9;

        }

.content {

        background-color: #6FF;

        width:700px;

        float:left;

        }

.side {

        background-color: #0F0;

        width:198px;

        float:right;

        margin-left:2px;

        }

.banner {

        background-color: #FCF;

}

.col{

        width:700px;

}

.col-a {

        background-color: #CF0;

        width:350px;

        float:left;

}

.col-b {

        background-color: #36F;

        width:350px;

        float:left;

}

.contenter {

        background-color: #F9F;

        }

.footer {

        background-color: #FC3;

        clear:both;

}

</style>

</head>

 

<body>

<div class="header"> header </div>

<div class="contenter">

  <div class="content">

    <div class="banner">banner</div>

    <div class="col">

     <div class="col-a">col-a</div>

     <div class="col-b">col-b</div>

    </div>

   </div>

  <div class="side">side </div>

</div>

<div class="footer"> footer </div>

</body>

( 知識學習隨堂筆記 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=dereklintw&aid=21738581