div+css怎么布局呢?

html-css09

div+css怎么布局呢?,第1张

最一般的布局方式是头部、主体部分、尾部,类似于word文档的页眉、文档主体内容、页脚的分布。大致模型是这样:

<div class="header">头部的内容一般是logo\网站导航等</div>

<div class="main">主体内容,一般有左右结构(两栏式)、左中右结构(三栏式)和通栏结构(一栏式)</div>

<div class="footer">尾部内容,一般为版权说明、网站地图、网站备案号、联系方式、网站统计之类的内容</div>

<style>

.head{

width:100%

height:60px

}

.main{

width:70%

height:400px

float:left

}

.main{

width:30%

height:400px

float:right

}

.footer{

width:100%

height:60px

}

</style>

<div class ="head">这里是head区域</div>

<div class ="main">这里是主要内容区域</div>

<div class="main_left">这里是右侧区域</div>

<div class="footer">这里是页脚区域</div>