`
liyiye
  • 浏览: 423902 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Css+Div布局学习(一)—Div布局基础

阅读更多

如果我们要进行Css的布局,那float(浮动)就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性,如果不采用浮动,元素将一个接一个地往下排列。float属性有三个值:left、right和none,后面我们就会使用这些值的。我们将使用事例来说明布局的特性。

我们做一个html文件,为后面的讲解准备一下:

  1. <body>
  2. <div id="Masthead">Masthead</div>
  3. <div id="Sidebar_a">Sidebar_a</div>
  4. <div id="Sidebar_b">Sidebar_b</div>
  5. <div id="Content">Content</div>
  6. <div id="Footer">Footer</div>
  7. </body>

这样的html使用浏览器打开一定是就几个字符把,我们先加一些简单的Css来标记,这样可以更加清楚地看到页面的布局。

  1. body
  2. {
  3.   padding:10px;
  4.   margin:10px;
  5. }
  6. div
  7. {
  8. border:1px solid #000;
  9. background-color:#CCC;
  10. height:20px;
  11. padding:10px;
  12. text-align:Center;
  13. }
  14. #Masthead
  15. {
  16. margin-bottom:10px;
  17. background-color:#CCCCCC;
  18. }
  19. #Sidebar_a
  20. {
  21. margin-bottom:10px;
  22. background-color:#3399CC;
  23. }
  24. #Sidebar_b
  25. {
  26. margin-bottom:10px;
  27. background-color:#33ff33;
  28. }
  29. #Content
  30. {
  31. margin-bottom:10px;
  32. background-color:#ff3366;
  33. }
  34. #Footer
  35. {
  36. background-color:#ffff00;
  37. }

我们给每一个Div加上了一个边框,并给每一个Div使用上背景颜色,方便标志。

 

Masthead
Sidebar_a
Sidebar_b
Content
Footer

 

上面5个Div,分别代表了网页模板里面最常见的表头、表尾、两个边栏和中间的内容。现在还没有添加更多的Css,所以还只是5个从上到下的Div而已。我们先分析一下,首先表头Masthead和表尾Footer两部分已经基本符合要求了,不会需要做更多的改变,那就是中间的两个边栏Sidebar和内容Content需要从左往右排列,我们先看看完成的Css和布局的样子:

Masthead
Sidebar_a
Sidebar_b
Content
Footer
  1. #Masthead
  2. {
  3. background-color:#CCCCCC;
  4. margin-bottom:10px;
  5. }
  6. #Sidebar_a
  7. {
  8. float:left;
  9. width:25%;
  10. margin-bottom:10px;
  11. background-color:#3399CC;
  12. }
  13. #Sidebar_b
  14. {
  15. float:right;
  16. width:25%;
  17. margin-bottom:10px;
  18. background-color:#33ff33;
  19. }
  20. #Content
  21. {
  22. margin-bottom:10px;
  23. height:150px;
  24. background-color:#ff3366;
  25. }
  26. #Footer
  27. {
  28. clear:both;
  29. background-color:#ffff00;
  30. }

首先说明一下,所有的html没有作任何修改,只是添加了一些Css。
比较前面和后面的Css,Masthead和Content里面的内容没有什么改变,Content里面的height:150px;只是为了说明内容较多情况下会是怎么样的情况。关键就是Sidebar_a内的float:left;和Sidebar_b内的float:right;。正是这两个属性使我们的布局顺利完成了。大家还可以自己尝试一下,把Sidebar_a和Sidebar_b内的属性换一下,两个边栏的位置就对换了,这个正体现了Div+Css布局的灵活性。

Masthead
Sidebar_a
Sidebar_b
Content
Footer

我们别忘记了在表尾Footer内有clear:both;属性,这个属性又是做什么的呢?浮动使用了以后会对后面的元素造成影响,所以要清理掉。
注意:上面的Html里面的五个Div不能顺便的变换位置,不然就不能正常地显示。特别是Content要在两个边栏的后面。
上面只是简单地说明了Div的布局,大家要熟练使用还是自己多多练习了。

分享到:
评论

相关推荐

    css+div网页模板整站

    CSS+Div布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...

    精通CSS+DIV网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    css+div布局源码模板

    一、CSS+Div布局基础 CSS(Cascading Style Sheets)层叠样式表,是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。Div元素是HTML中的一个常用容器标签,通过CSS,我们可以对Div进行定位、...

    《精通CSS+DIV网页样式与布局》源码.rar

    《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar

    CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例

    综上所述,“CSS+DIV布局赏析案例”是一个综合性的学习资源,涵盖了从基础到高级的CSS布局技巧。通过研究这个案例,开发者可以提升自己在网页布局设计方面的能力,更好地理解和应用CSS与DIV的组合。

    Table2CSS表格转CSS+DIV布局工具

    【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件,旨在帮助用户将传统的HTML表格...通过使用该工具,用户不仅可以节省手动重构布局的时间,还能学习到更多关于CSS和DIV布局的原理与实践。

    《精通CSS+DIV网页样式与布局》光盘源码

     第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局...

    首页CSS+DIV布局模板

    【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的&lt;div&gt;元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...

    精通css+div 网页样式与布局 ppt文件

    正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...

    CSS+DIV网页布局实例40例.rar

    《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源,它涵盖了CSS(层叠样式表)和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例,旨在帮助用户从实践中掌握网页布局的...

    css+div布局实例

    CSS+DIV布局实例是学习网页布局时不可或缺的一部分,它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式,实现灵活多变的设计效果。 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等...

    十步学会用css+div建站

    【描述】:这是一份以PPT(演示文稿)形式呈现的CSS+div建站基本教程,内容涵盖了从零开始到熟练运用CSS和div进行网页布局的全过程。PPT作为一种直观的教学工具,通常包含清晰的步骤、示例和解释,便于学习者理解和...

    CSS+div 布局

    下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它允许开发者将样式与结构分离,使得网页设计更加灵活和易于维护。CSS规则由...

    css+div布局练习

    下面将详细介绍CSS+div布局的重要概念、技巧以及实践应用。 一、CSS简介 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许我们将样式(颜色、字体、间距、布局等)与...

    用CSS+DIV做的网上书店模板

    【CSS+DIV布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它通过控制元素的样式,如字体、颜色、大小、位置等,来实现网页的布局和...

    精通CSS+DIV 书中实例和源代码

    5个完整网站的CSS+DIV布局和美化方案,具体可能包括电商网站、博客系统、新闻门户、企业官网等多种类型的网站。每个网站的案例都会涉及不同的设计挑战,如导航菜单的制作、图片轮播效果、响应式设计的实现等。通过...

    CSS+DIV布局

    CSS+DIV布局是一种流行且高效的方式,用于实现灵活多样的网页设计。理解并掌握这一技术对于提升网站的整体视觉效果至关重要。 首先,我们来了解什么是CSS。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、...

    精美css+div网站实例源码

    CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维布局。 2. **CSS选择器和属性**: 源码中包含了各种CSS选择器,如类选择器、ID选择器、元素选择器以及属性选择...

    精通css+div网页样式与布局

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...

    CSS+DIV详解网站好帮手

    《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...

Global site tag (gtag.js) - Google Analytics