(运用DIV+CSS网页布局的方法.docVIP

运用DIV+CSS网页布局的方法 摘 要： 在网页设计中网页各元素的布局是一项十分重要的内容之一，在传统的网页布局中是运用table进行调理网页各元素，而对于复杂的布局来说，它远远不能适应网页设计的要求,由此div+css技术就可以很好的解决复杂网页的布局。 关键词： div；css；布局 0 引言 在传统的网页制作方法中是运用table进行布局，它学习起来方便而且很简单，并且布局具有搭建速度快、容易控制的特点，所以现在对于网页制作初学者来说，table布局仍然是一种很好的方式。但是如今的网页设计的布局都十分的复杂，并且适应网页的美观度，运用div+css进行网页布局比运用table布局有很多的优势。可是由于css对于不同的浏览器存在着兼容性问题，所以在运用div+css设计网页时可能会出现这样或那样的问题，为此在这里给讨论几点运用div+css设计网面的方法。 1 网页中的列布局 在网页设计的过程中，列的布局是十分重要的，它布局是否合理是断定网页是否美观的一项重要的要素之一。 1.1 一列固定宽度 在网页中一列的固定是最简单的布局方式，在插入一个div标签之后运用css代码就可以控制div标签的样式。 css代码：#line{width:500px;height:700px; background-color:#0 0ee00;border:1px solid#88cc88;} 1.2 一列固定宽度居中 在以往的页面设计中，运用table来进行居中布局时，运用table中的属性 align=”center”来实现，而css中的margin属性来设计就可以解决这一问题。在网页中插入一个div标签之后运用css代码就可以控制div标签的样式。采用如下代码来实现： css代码：#line {width: 500px; height: 700px; background- color: #00ee00; border: 1px solid #88cc88;margin: auto; } 1.3 一列自适应宽度 由于浏览器的大小不同，所以设计出的网页也应该适应浏览器的大小，在网页设计中也是一项重要的内容。div+css中的自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，在网页中插入一个div标签之后运用css代码就可以控制div标签的样式。 css代码：#line { width: 80%; height: 95%; background- color: #00ee00; border: 1px solid #88cc88;} 1.4 一列、多块布局 一般的网页布局分为上中下结构，即：头部、中间主体和脚部。我们可以用三块div来对网页进行划分，分别给它们起名为：头部（header）、主体（maincontent）、脚部（footer）。 css代码：#header{ margin:5px auto; width:500px; height:80px; background:#00ee00;}#main {margin:5px auto;width:500px; height:4 00px;background:#00ee00;}#footer {margin:5px auto;width:500px; height:80px; background: #00ee00;} 这里只说明了这四种常用的布局方法，但不管多么复杂的页面设计，运用div+css网页布局中，均是以div为基础，通过一列、二列、多列这些基础的布局方法的相互组合和嵌套使用来实现复杂的布局。使得网页的布局更加的合理和美观。 2 运用css来兼容不同的浏览器 由于浏览器层出不穷，css在不同浏览器就会出现存在兼容性的问题，所以在使用div+css布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为解决这些方面的问题，提出以下几点解决方法。 2.1 运用!important来实现ie和firefox的css的兼容 相同宽度和高度的层在有边框的情况下，其显示方式就有区别。在ie浏览器中显示为css所定义的宽度和高度，而firefox中显示的是css中定义的宽度和高度加上边框的大小，css代码如下：#wrapper{width:100px! important;/*ie7+firfox*/width:80px;/*ie6*/}这样就可以解决ie和firfox的兼容问题。 2.2 页面居中问题 在ie浏览器下，页面居中可以通过body{text- align: center;}来实现或者在div中设置 align属性来设置，而firefox浏览器下此属性就失效了，可以通过margin来设置页面的居中。css代码如下： b