`
uule
  • 浏览: 6352795 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

[转]如何用div+css布局页面

 
阅读更多

如今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

  • 大小: 4.2 KB
  • 大小: 5.2 KB
  • 大小: 5.3 KB
分享到:
评论

相关推荐

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    Table转div+css工具

    5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它能更好地遵循WCAG(Web Content Accessibility Guidelines)指南。 在实际操作中,使用Table2CSS3.0.0工具时,...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...

    div+css页面布局,新手入门教材,2天学会div+css

    新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,首先要规划网站的结构,明确各个部分的功能和尺寸。例如,导航条(Main ...

    Div+CSS布局入门+实例教程

    在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...

    Div+CSS布局入门教程(一二三四)

    在进行Div+CSS布局时,通常会先进行页面的规划。比如在本教程中,作者将页面分为顶部、内容部分(包含侧边栏和主体内容)和底部三个主要部分。每个部分会被封装在一个Div标签中,通过CSS设置它们的宽高、位置和其他...

    div+css布局实例淘宝网分析

    通过对淘宝网首页的具体分析,我们可以看到div+css布局不仅能够让页面变得更加整洁美观,还能够有效提升网站的性能和用户体验。在实际开发过程中,开发者应该充分利用div+css的强大功能,结合具体的业务需求进行合理...

    Div+CSS 布局大全.pdf

    这表明文档主要围绕Div和CSS布局技巧展开,且强调了项目表现层(即前端展示层)的重要性。标签“Div+CSS 布局大全.pdf”与标题一致,进一步确认了文档的分类和主要内容。在核心内容的摘录中,我们可以看到文档的结构...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    经典DIV+CSS模板 经典DIV+CSS模板

    描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践,旨在实现结构与表现的分离,提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...

    DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf

    2. 采用 Xhtml代码编写页面,抛弃传统Table布局模式,使用DIV+CSS布局可以提高搜索引擎对网页的索引效率,提高页面浏览速度,易于维护和改版等。 DIV+CSS网页制作技术的优势在于其能够将表现与内容分离,提高搜索...

    DIV+CSS布局练习

    这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`&lt;div&gt;`(division)是HTML中的一个通用容器元素,用于组织页面内容。...

    外国个性的DIV+CSS页面布局实例98个

    综合以上信息,这个压缩包包含的98个实例将提供丰富的学习资源,帮助开发者和设计师掌握和提升使用DIV+CSS进行页面布局的技巧。通过研究这些实例,可以了解到如何有效地利用CSS选择器、浮动、定位、Flexbox或Grid...

    div+css 布局的一个减肥产品排行榜的页面模版

    在网页设计领域,`div+css`布局是一种广泛使用的页面构造技术,它将内容与表现分离,提高了网页的可维护性和可扩展性。本主题聚焦于一个基于`div+css`布局的减肥产品排行榜页面模版,这个模版可能是为了展示减肥产品...

    Div+Css布局案例源代码

    这个“Div+Css布局案例源代码”压缩包包含了一系列的网站页面和首页布局实例,旨在帮助开发者更好地理解和掌握Div+CSS布局技术。 Div(Division)在HTML中是一种用于分组元素的容器,它可以将网页划分为多个独立的...

    一个简单的网页布局案例(DIV+CSS)

    总结来说,这个案例提供了一个学习和实践CSS布局的理想平台,通过分析和比较不同的CSS文件,我们可以深化对布局原理的理解,并提升实际操作技能。无论是初学者还是有经验的开发者,都能从中受益匪浅。

    CSS基础知识《Div+CSS 布局大全》 (PDF)值得一看!

    本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页设计中,Div常被用作容器,用于组织和管理页面内容。通过设置Div的...

Global site tag (gtag.js) - Google Analytics