如果我们要进行Css的布局,那float(浮动)就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性,如果不采用浮动,元素将一个接一个地往下排列。float属性有三个值:left、right和none,后面我们就会使用这些值的。我们将使用事例来说明布局的特性。
我们做一个html文件,为后面的讲解准备一下:
- <body>
- <div id="Masthead">Masthead</div>
- <div id="Sidebar_a">Sidebar_a</div>
- <div id="Sidebar_b">Sidebar_b</div>
- <div id="Content">Content</div>
- <div id="Footer">Footer</div>
- </body>
这样的html使用浏览器打开一定是就几个字符把,我们先加一些简单的Css来标记,这样可以更加清楚地看到页面的布局。
- body
- {
- padding:10px;
- margin:10px;
- }
- div
- {
- border:1px solid #000;
- background-color:#CCC;
- height:20px;
- padding:10px;
- text-align:Center;
- }
- #Masthead
- {
- margin-bottom:10px;
- background-color:#CCCCCC;
- }
- #Sidebar_a
- {
- margin-bottom:10px;
- background-color:#3399CC;
- }
- #Sidebar_b
- {
- margin-bottom:10px;
- background-color:#33ff33;
- }
- #Content
- {
- margin-bottom:10px;
- background-color:#ff3366;
- }
- #Footer
- {
- background-color:#ffff00;
- }
我们给每一个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
- #Masthead
- {
- background-color:#CCCCCC;
- margin-bottom:10px;
- }
- #Sidebar_a
- {
- float:left;
- width:25%;
- margin-bottom:10px;
- background-color:#3399CC;
- }
- #Sidebar_b
- {
- float:right;
- width:25%;
- margin-bottom:10px;
- background-color:#33ff33;
- }
- #Content
- {
- margin-bottom:10px;
- height:150px;
- background-color:#ff3366;
- }
- #Footer
- {
- clear:both;
- background-color:#ffff00;
- }
首先说明一下,所有的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布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通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布局赏析案例”是一个综合性的学习资源,涵盖了从基础到高级的CSS布局技巧。通过研究这个案例,开发者可以提升自己在网页布局设计方面的能力,更好地理解和应用CSS与DIV的组合。
【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件,旨在帮助用户将传统的HTML表格...通过使用该工具,用户不仅可以节省手动重构布局的时间,还能学习到更多关于CSS和DIV布局的原理与实践。
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的<div>元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...
正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源,它涵盖了CSS(层叠样式表)和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例,旨在帮助用户从实践中掌握网页布局的...
CSS+DIV布局实例是学习网页布局时不可或缺的一部分,它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式,实现灵活多变的设计效果。 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等...
【描述】:这是一份以PPT(演示文稿)形式呈现的CSS+div建站基本教程,内容涵盖了从零开始到熟练运用CSS和div进行网页布局的全过程。PPT作为一种直观的教学工具,通常包含清晰的步骤、示例和解释,便于学习者理解和...
下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它允许开发者将样式与结构分离,使得网页设计更加灵活和易于维护。CSS规则由...
下面将详细介绍CSS+div布局的重要概念、技巧以及实践应用。 一、CSS简介 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许我们将样式(颜色、字体、间距、布局等)与...
【CSS+DIV布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它通过控制元素的样式,如字体、颜色、大小、位置等,来实现网页的布局和...
5个完整网站的CSS+DIV布局和美化方案,具体可能包括电商网站、博客系统、新闻门户、企业官网等多种类型的网站。每个网站的案例都会涉及不同的设计挑战,如导航菜单的制作、图片轮播效果、响应式设计的实现等。通过...
CSS+DIV布局是一种流行且高效的方式,用于实现灵活多样的网页设计。理解并掌握这一技术对于提升网站的整体视觉效果至关重要。 首先,我们来了解什么是CSS。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、...
CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维布局。 2. **CSS选择器和属性**: 源码中包含了各种CSS选择器,如类选择器、ID选择器、元素选择器以及属性选择...
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...