2025年CSS+Div布局方法课件.pptVIP

第12章

CSS+Div布局方法;引言;第12章CSS+Div布局方法;12.1CSS布局理念

;12.1CSS布局理念;12.1.1将页面用Div分块;container

;HTML框架代码;说明;当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局，如是单栏、双栏还是三栏等。

这里以下图为例。;;说明：;12.1.3用CSS定位;12.1.3用CSS定位;12.1.3用CSS定位;12.1.3用CSS定位;12.1.3用CSS定位;12.1.3用CSS定位;12.1.3用CSS定位;12.2固定宽度布局;12.2.1一列固定宽度;操作步骤;操作步骤;操作步骤;12.2.2两列固定宽度;操作步骤：;操作步骤：;操作步骤：;操作步骤：;12.3可变宽度布局;12.3.1一列自适应;12.3.1一列自适应;!DOCTYPEhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/

title一列自适应布局/title

style

#one_col{

width:80%;

height:300px;

background-color:#0c3;

border:1pxsolid#f39;

}

/style

/head

body

divid=one_col就一列的自适应1/div

/body

/html;从浏览效果中可以看到，Div的宽度为浏览器窗口宽度的80%的值，当扩大或缩小浏览器窗口大小时，其宽度将维持在浏览器宽度的80%。;使用两列宽度自适应性来实现左右栏宽度能够做到自适应，设置自适应主要通过宽度的百分比值设置。

;style

#left{

width:60%;

height:250px;

background-color:#0c3;

border:1pxsolid#f39;

float:left;

}

#right{

width:30%;

height:250px;

background-color:#fc3;

border:1pxsolid#f39;

float:left;

}

/style;;浏览器效果图;12.3.3两列右列宽度自适应;style

#left{

width:150px;

height:250px;

background-color:#0c3;

border:1pxsolid#f39;

float:left;

}

#right{

height:250px;

background-color:#fc3;

border:1pxsolid#f39;

}

/style;;浏览器效果图;12.3.4

三列浮动中间宽度自适应;style

body{margin:0px;}

#left{

width:150px;height:250px;

background-color:#fc0;border:3pxsolid#333;

position:absolute;top:0px;left:0px;

}

#center{

background-color:#cfc;border:3pxsolid#333;

height:250px;

margin-left:150px;margin-right:150px;

}

#right{

height:250px;width:150px;

background-color:#fc0;border:3pxsolid#333;

position:absolute;right:0px;top:0px;

}

/style;;浏览器效果图;12.3.5

三行二列居中高度自适应布局;1）在头部插入CSS代码;1）在头部插入CSS代码;2）在体部插入HTML代码;3）浏览器中浏览的效果;;本章结束