什么是css div布局的基础理论

html-css027

什么是css div布局的基础理论,第1张

div

所谓<div>标签我们可以理解为一个盒子。

例如:<div class="top" style='border:1px solid #000background-color:#EEE'>这里是Top</div

border:1px solid #000(这是把边框显示出来,方便我们布局)。

background-color:#EEE(这是背景色设置,#EEE为颜色值)。

div的设置属性有很多,我就大致说一下。

这里可以设置一下字体居中,字体距离上下边框的距离。

text-align:center(文字横向居中)

padding:30px(字体距离上下左右边框的距离,因为左右已经超出了30px,所以这个30px就对左右不起限制作用了。)

同样的道理,我们可以设置一部分的布局了。

布局一个中间层。

<div class="container" style='border:1px solid #000background-color:#ffetext-align:centerpadding:30px 0px'><div class="left"style='float:rightwidth:80%border:1px solid #000height:600px'>左边</div><div class="right"style='width:20%border:1px solid #000height:600px'>右边</div></div>

<--!

float:right向右浮动

width:80%宽度为整个屏幕的80%

border:1px solid #000边框,方便查看。

height:600px高度为600px。

-->

如果想像我的效果图一样铺满整个屏幕可以加入以下代码。

<style type="text/css">body{height:100% margin:0pxpadding:0px}</style>每个div,都有父容器。body就是最根源的父容器。只有把body设置为100%就可以满屏幕。

DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势:

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

2:提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。

3:提高页面浏览速度

DIV+CSS布局较Table布局减少了页面代码,加载速度得到很大的提高,这在spider爬行时是非常有利的。过多的页面代码可能造成爬行超时,spider就会认为这个页面无法访问,影响收录及权重。

另一方面,真正的网站优化不只是为了追求收录、排名,快速的响应速度是提高用户体验度的基础,这对整个搜索引擎优化及营销都是非常有利的。

4:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

5:代码精简

使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处。

6:表格的嵌套问题

很多网站如何推广的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实。但根据目前掌握的情况来看,spider爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。

使用Table布局,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,spider爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。

这虽然没有得到确认,但还是建议使用Table布局的朋友们,在设计时尽可能的不要使用多层表格嵌套,SEOer们在文章中说明了这一点,相信他们也不是没有依据的。

7:对网站的Alexa排名的影响

基于XTHML标准的DIV+CSS布局,一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面,但事实证明使用XTHML架构的网站排名状况一般都不错。

css是层叠样式表,div是html的一个元素。

css可以控制html元素在浏览器中显示的效果

网页布局设计中,一般使用div元素结合CSS的控制来做布局,所以一般都说div+css

准确的讲应该是html+css,因为做网页的时候,css不是只控制div元素,如form,ul,ol,p,img等元素均会使用css进行控制,使之达到我们想要的效果。。。