CSS簡單的頁面布局實例

jopen 11年前發布 | 121K 次閱讀 CSS 前端技術

不錯 很簡單的例子.新手入門用：

 

未標題-1.jpg

 

index.html

<html>
    <head>
        <title>DIV+CSS簡單的頁面布局示例</title>
        <link rel="stylesheet" href="class.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="logo" class="bgcolor">LOGO</div>
                <div id="banner">
                    <div id="left" class="bgcolor">BANNER1</div>
                    <div id="right" class="bgcolor">BANNER2</div>
                </div>
            </div>
            <div class="nav"> </div>
            <div id="menu" class="bgcolor">水平導航條</div>
            <div class="nav"> </div>
            <div id="content">
                <div class="left_box border">欄目（一）</div>
                <div class="right_box border">欄目（二）</div>
                <div class="nav"> </div>
                <div class="left_box">
                    <div class="left border">欄目（三）</div>
                    <div class="right border">欄目（四）</div>
                </div>
                <div class="right_box">
                    <div class="left border">欄目（五）</div>
                    <div class="right border">欄目（六）</div>
                </div>
            </div>
            <div id="sidebar">
                <div class="bar border">欄目（七）</div>
                <div class="nav"> </div>
                <div class="bar border">欄目（八）</div>
                <div class="nav"> </div>
                <div class="bar border">欄目（九）</div>
            </div>
            <div class="nav"> </div>
            <div id="footer" class="bgcolor">頁腳</div>
        </div>
    </body>
</html>
class.css
/ CSS Document /


body{
    margin:0;
    padding:0;
    text-align:center;
    font:12px Arial,宋體; 
}


.border{
    border:1px solid #888;
}


.bgcolor{
    background:#DDD;
}


container{



width:960px;
margin:0 auto;



}


header{



float:left;
width:100%;



}


logo{



float:left;
width:200px;
height:80px;



}


banner{



float:right;
width:750px;



}


banner #left{



float:left;
width:540px;
height:80px;



}


.nav{
    float:left;
    height:10px;
    width:100%;
    overflow:hidden;
    clear:both;
}


banner #right{



float:right;
width:200px;
height:80px;



}


menu{



float:left;
width:100%;
height:30px;



}


sidebar{



float:right;
width:200px;
height:410px;



}


sidebar .bar{



float:left;
width:100%;
height:130px;



}


content{



float:left;
width:750px;



}


content .left_box{



float:left;
width:370px;
height:200px;



}


content .right_box{



float:right;
width:370px;
height:200px;



}


content .left{



float:left;
height:200px;
width:180px;



}


content .right{



float:right;
height:200px;
width:180px;



}


footer{



float:left;
width:100%;
height:60px;



}</pre> 

來自：http://blog.csdn.net/all_dash/article/details/9733609
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！