html命名侧边栏_HTML——左侧边栏布局

/p>

"http://www.w3.org/TR/html4/strict.dtd">

上中下布局

body{

background: #42413C ;

margin: 0;/*消除body中的留白*/

padding: 0;

text-align: center;

}

.container{

width: 778px;

background: #FFF;

margin: 0 auto;/*侧边的自动值与宽度结合使用，可以将布局居中对齐*/

text-align: left;

}

.header{

padding: 10px 0;

background: #ADB96E;

}

.sidebar{

float: left;/*侧边栏居左，改为right可令侧边栏居右*/

width: 200px;

background: #a4f;

}

.maincontent{

width: 570px;

background: #eee;

}

.footer{

clear: both;/*清除前后的浮动元素，使页脚显示在其下方*/

position: relative;/*修改IE浏览器中clear无效的bug*/

padding: 10px 0;

background: #CCC49F;

}

网页头部

侧边栏

侧边栏

侧边栏

网页正文

网页正文

网页正文

网页正文

网页正文

网页正文

脚注