Div+CSS布局入门教程(五)

<div id="banner"></div>

#banner {
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
    width:730px; /*设定层的宽度*/
    margin:auto; /*层居中*/
    height:240px; /*设定高度*/
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
    clear:both /*清除浮动*/
}

<div id="pagebody"><!--页面主体-->
    <div id="sidebar"><!--侧边栏-->
    </div>
    <div id="mainbody"><!--主体内容-->
    </div>
</div>

#pagebody {
    width:730px; /*设定宽度*/
    margin:8px auto; /*居中*/
}
#sidebar {
    width:160px; /*设定宽度*/
    text-align:left; /*文字左对齐*/
    float:left; /*浮动居左*/
    clear:left; /*不允许左侧存在浮动*/
    overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
    width:570px;
    text-align:left;
    float:right; /*浮动居右*/
    clear:right; /*不允许右侧存在浮动*/
    overflow:hidden
}

border:1px solid #E00;
height:200px