什么是div+ css布局？

html-css014

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

</head>

<style>

body{margin:0padding:0font-size:12pxfont-weight:normalfont-family:"宋体" tahomacolor:#666}

ul,li,img,p,h3{list-style:noneborder:nonemargin:0padding:0}

h3{padding:20px}

a,a:hover{text-decoration:nonecolor:#666font-weight:normalfont-size:12pxfont-family:"宋体" tahomatext

-align:center}

a:hover{color:#3366ff}

#nav,#header,#wapper,#sitemap,#foot{margin:0 autowidth:910pxclear:both}

#nav{margin:20px auto 0height:34pxbackground:#ddd}

#nav li {float:left}

#nav li a{width:120pxheight:34pxline-height:34pxdisplay:blockfloat:leftfont-weight:bold}

#nav li a:hover{background:#3366ffcolor:#fff}

#header{height:100pxbackground:#fffposition:relative}

#header #logo{padding-top:25pxfloat:left}

#header #sub_nav{position:absolutetop:70pxleft:500px}

#header #toolbar{float:rightmargin:14px 20px 0display:inline}

#header #toolbar a{margin-top:10pxwidth:100pxheight:24pxborder:1px solid

#99cceebackground:#ddf0ffdisplay:blockline-height:24pxcolor:#666}

#header #toolbar a:hover{border-color:#3366ffbackground:#bbd0ddcolor:#333}

#wapper{background:#dddpadding:20pxwidth:870pxdisplay:table}

#main{width:600pxfloat:left}

#about{background:#fffwidth:600pxheight:400px}

#local_contact{overflow:hidden}

#local_contact li{background:#fffwidth:290pxheight:160pxdisplay:blockfloat:left}

.m_r{margin-right:20px}

.m_t{margin-top:20px}

#sidebar{width:260pxfloat:leftmargin-left:10px}

#contact,#lawyer,#frend_link{width:260pxheight:160pxbackground:#fffmargin-bottom:10px}

#frend_link{height:250px}

#sitemap{height:180pxbackground:#dddmargin:20px auto}

#foot{background:#dddheight:30pxmargin-bottom:20pxtext-align:centerline-height:30pxdisplay:table}

</style>

<body>

<div id="nav">

<ul>

<li><a href="#">华厦通</a></li>

<li><a href="#">新闻快讯</a></li>

<li><a href="#">代理合作</a></li>

<li><a href="#">文档</a></li>

<li><a href="#">关于我们</a></li>

</ul>

</div>

<div id="header">

<div id="logo"><a href="#"><img src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif" /></a></div>

<div id="sub_nav"><a href="#">什么是华厦通</a>| <a href="#">产品</a>| <a href="#">功能</a></div>

<div id="toolbar">

<a href="#">登录华厦通</a>

<a href="#">申请试用</a>

</div>

</div>

<div id="wapper">

<div id="main">

<div id="about"><h3>关于我们</h3></div>

<div id="local_contact">

<ul>

<li class="m_t m_r"><h3>沈阳</h3></li>

<li class="m_t"><h3>北京</h3></li>

<li class="m_t m_r"><h3>上海</h3></li>

<li class="m_t"><h3>南京</h3></li>

</ul>

</div>

</div>

<div id="sidebar">

<div id="contact"><h3>联系方式</h3></div>

<div id="lawyer"><h3>我们的律师团</h3></div>

<div id="frend_link"><h3>友情链接</h3></div>

</div>

</div>

<div id="sitemap"><h3>网站地图</h3></div>

<div id="foot">@copyright</div>

</body>

</html>

CSS去掉div的边框可以去掉css的border属性，或者覆盖border属性为none来实现。

1、如图，这是一个带边框的div测是页面。

2、第一个div的边框是这行css实现的效果

border: 5px solid black

3、第二个div没有设置边框样式

4、第三个div的css设置了边框样式，但被内联样式覆盖为none，因此也能不显示边框。

代码如下

<div class="box1"></div>

<div class="box2"></div>

<div class="box3" style="border: none"></div>

div{

width:200px

height:120px

margin-bottom:10px

background-color:yellow

}

.box1, .box3{

border: 5px solid black

}