DIV常见布局设计.pptVIP

沧州职业技术学院 信息工程系 沧州职业技术学院 信息工程系 DIV常见布局设计 1：单行单列结构 （1）宽度固定 宽度固定主要是设置DIV对象的width属性，举例说明：图10-7中的DIV标签都属于宽度固定的标签，DIV在默认状态下，宽度将占据整行的空间。由于设置了布局对象的宽度属性为“width：200px”，高度属性为“height：200px”，因此这是一种固定宽度的布局。 （2）宽度自适应 自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度，是一种非常灵活的布局形式。自适应布局网站对于不同分辨率的显示器都能提供最好的显示效果。 单列宽度自适应布局只需要将宽度由固定值改为百分比值的形式即可。如果将实现的代码中的width:200，修改为width:75%，大家可以浏览测试。 DIV常见布局设计 1、单行单列结构 （3）单列居中 上述例子的特点是Div位于左上方，宽度固定或自适应。在网页设计中经常见到的形式是网页整体居中，在传统的表格布局方式中，使用align=”center”可以实现表格的居中。使用CSS的方法也能够实现内容的居中，CSS代码如下： #Divtest1 { height: 80px; width:500px; background-color:#FFCC00; margin-top: 0px; margin-right: auto