如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大 知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技 术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理
解成一个容器,它可以放文字,图片,表格等等.
解成一个容器,它可以放文字,图片,表格等等.
2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分 析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:
<div id="container">/*大容器放全部内容*/ <div id="header">/*上*/ </div> <div id="midbody">/*中*/ </div> <div id="foot">/*下*/ </div> </div>
解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码 :
#container{ width:90%;/*宽度*/ margin: 0 auto;/*边界auto为自动,这里用到了缩写形式意思为上下为0, 左右自动*/ } /*页面头*/ #header{ width:780px; height: 130px; margin: 0 auto; overflow:hidden;/*防止div被撑开,超过div大小就隐藏*/ background:#999999;/*背景色*/ } /*页面中间*/ #midbody{ width:780px; height: auto; height:auto; margin:0 auto; overflow:hidden; background: #990000; } /*页面底部*/ #foot{ width:780px; height:100px; margin:0 auto; background: #99FFCC; }
看完整体就要研究部分了,对于部分来说无非就是上下或左右结构了,例如下面的中间又分为左右。
<div id="container"> <div id="header"> </div> <div id="midbody"> <div id="leftside"> </div> <div id="rightside"> </div> </div> <div id="foot"> </div> </div>
Left / Right :
#leftside{ width:220px; float:left;/*该层位于外层的左边*/ height:500px; background:#167692; } #rightside{ width:558px; height:500px; float:right;/*该层位于外层的右边*/ background: #CCCC00; }
如果是这样的结构:
div结构为:
<div id="container"> <div id="header"> </div> <div id="midbody"> <div id="leftside"> </div> <div id="rightside"> <div id="rtop"> </div> <div id="rbottom"> <div id="left"> </div> <div id="right"> </div> </div> </div> </div> <div id="foot"> </div> </div>
CSS:
#rtop{ width:558px; height:200px margin:0 auto; background: #CCCC00; } #rbottom{ width:558px; height:300px; margin:0 auto; background: #CCee00; } #left{ width:258px; float:left; height:300px; background: #CCCCed; } #rightside{ width:300px; height:300px; float:right; background: #Cdfd00; }
只要看懂了最外层的到里面都是一样的道理。
来源:http://blog.csdn.net/brucelee0224/article/details/3009741
相关推荐
9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...
5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它能更好地遵循WCAG(Web Content Accessibility Guidelines)指南。 在实际操作中,使用Table2CSS3.0.0工具时,...
在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...
新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,首先要规划网站的结构,明确各个部分的功能和尺寸。例如,导航条(Main ...
在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...
在进行Div+CSS布局时,通常会先进行页面的规划。比如在本教程中,作者将页面分为顶部、内容部分(包含侧边栏和主体内容)和底部三个主要部分。每个部分会被封装在一个Div标签中,通过CSS设置它们的宽高、位置和其他...
通过对淘宝网首页的具体分析,我们可以看到div+css布局不仅能够让页面变得更加整洁美观,还能够有效提升网站的性能和用户体验。在实际开发过程中,开发者应该充分利用div+css的强大功能,结合具体的业务需求进行合理...
这表明文档主要围绕Div和CSS布局技巧展开,且强调了项目表现层(即前端展示层)的重要性。标签“Div+CSS 布局大全.pdf”与标题一致,进一步确认了文档的分类和主要内容。在核心内容的摘录中,我们可以看到文档的结构...
在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践,旨在实现结构与表现的分离,提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...
2. 采用 Xhtml代码编写页面,抛弃传统Table布局模式,使用DIV+CSS布局可以提高搜索引擎对网页的索引效率,提高页面浏览速度,易于维护和改版等。 DIV+CSS网页制作技术的优势在于其能够将表现与内容分离,提高搜索...
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`<div>`(division)是HTML中的一个通用容器元素,用于组织页面内容。...
综合以上信息,这个压缩包包含的98个实例将提供丰富的学习资源,帮助开发者和设计师掌握和提升使用DIV+CSS进行页面布局的技巧。通过研究这些实例,可以了解到如何有效地利用CSS选择器、浮动、定位、Flexbox或Grid...
在网页设计领域,`div+css`布局是一种广泛使用的页面构造技术,它将内容与表现分离,提高了网页的可维护性和可扩展性。本主题聚焦于一个基于`div+css`布局的减肥产品排行榜页面模版,这个模版可能是为了展示减肥产品...
这个“Div+Css布局案例源代码”压缩包包含了一系列的网站页面和首页布局实例,旨在帮助开发者更好地理解和掌握Div+CSS布局技术。 Div(Division)在HTML中是一种用于分组元素的容器,它可以将网页划分为多个独立的...
总结来说,这个案例提供了一个学习和实践CSS布局的理想平台,通过分析和比较不同的CSS文件,我们可以深化对布局原理的理解,并提升实际操作技能。无论是初学者还是有经验的开发者,都能从中受益匪浅。
本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页设计中,Div常被用作容器,用于组织和管理页面内容。通过设置Div的...