什么是div+ css布局？

html-css05

什么是div+ css布局？,第1张

1、能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。

2、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。

3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

4、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。

5、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。

首先，建议你一点，与其在上一个div里面用margin-bottom不如在下一个div里面用margin-top，因为margin-bottom经常会失效，

而你这样的布局可以这样写

<style>

*{margin:0pxpadding:0px}

body{margin:0px

auto}

.blue{margin:0px

autobackground:#34d5f2padding:150px

50pxmargin-top:100pxwidth:500pxoverflow:hidden}

.white{margin-top:50pxbackground:#fff}

.white1{width:400pxheight:250px}

.white{width:400pxheight:500pxmargin-top:50px}

.white2{width:400pxheight:50pxmargin-top:50px}

.white,.white1,.white2{background:#fff}

</style>

<body>

<div

class="blue">

<div

class="white1">头部</div>

<div

class="white">内容部分</div>

<div

class="white2">尾部</div>

</div>

</body>

</html>

这样就是你要的效果了

DIV+CSS三行两列经典布局

这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：

<html>

<head>

<meta http-equiv='Content-Type' content="text/html charset=gb2312">

<title>XHTML之经典三行两列布局 - seobbs.net</title>

<style type="text/css">

body

{ background: #999 text-align: center color: #333 fontfamily: Verdana, Arial, Helvetica, sans-serif }

a:link, visited

{color:#004592text-decoration:none}

a:hover {color:#004592text-decoration:underline}

a:active {color:#004592text-decoration: none}

img {border:0px}

#header { margin-right: auto margin-left: auto padding: 0px width: 776px background: #EEE height: 60px text-align: left}

#contain { margin-left: auto margin-right: auto width: 776px }

#mainbg { float: left padding: 0px width: 776px background: #60A179 }

#right { float: right margin: 2px 0px 2px 0px padding: 0px width: 574px background: #ccd2de text-align:left }

#left { float: left margin: 2px 2px 0px 0px padding: 0px background: #F2F3F7 width: 200px text-align:left }

#footer { clear: both margin-right: auto margin-left: auto padding: 0px width: 776px background: #EEE height: 60px }

.text {margin:0pxpadding:20px}

</style>

</head>

<body>

<div id="header">header</div>

<div id="contain">

<div id="mainbg">

<div id="right">

<div class="text">text<p>段落< /p><p>段落</p><p>段落</p><p>段落</p> <p>段落</p></div> </div> <div id="left"> <div class="text">left</div> </div> </div> </div>

<div id="footer">footer</div>

</body>

</html>

效果演示及代码：www.st539.com/news_view.asp?id=123

SEO角度分析这个布局的优势：

我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。

如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。

都知道，搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。

为了避免这样的情况，包括新浪、搜狐、网易在内的很多网站（可能也包括你^_^），都在设计时将页面中B区和C区对调。

再来看本布局方式，页面代码顺序是“A->C->B->D”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。

这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。