`
seandeng888
  • 浏览: 158568 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

DIV网页排版入门指南

阅读更多

前言

       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些。

盒子模型

       什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin)CSS盒子模式都具备这些属性。如下图所示:

 
       这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。

文档流

文档流:将窗体自上而下分成一行一行并在每行中按从左至右的挨次排放元素,即为文档流。

div是块级元素,在页面中独占一行,自上而下排列。

每个非浮动块级元素都独有一行浮动元素则按规则浮在行的一端若当行容不下则另起新行再浮动。内联元素也不会独有一行一切元素(包括块级,内联和列表元素)均可生成子行用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位然则在IE中浮动元素也存在于文档流中。

浮动

4.1 浮动概述

假如某个DIV元素A是浮动的,如果A元素上一个元素也是浮动的,那么A会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤下到下一行。注:靠近页面边缘的一端是前,远离页面边缘的一端是后。);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

标签元素:float

这个规则只能影响使用清除的元素本身,不能影响其他元素。

元素值:none

默认值。

元素值:left

元素向左浮动。

元素值:right

元素向右浮动。

元素值:inherit

从父元素继承float属性。

4.2 浮动特性

编号

特性

1

相邻的浮动元素,left属性最前面的元素,排在最左面。

2

邻的浮动元素,right属性最前面的元素,排在最右面。

3

成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。

4

height不相等的div浮动元素排序时,照拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。

5

把添加float的属性的div元素嵌入在一个div中,并给此div添加widthheight属性。浏览器宽度缩小时,也不会发生变形。

 

清除浮动

5.1 概述

标签元素:clear

该规则只能影响使用清除的元素本身,不能影响其他元素。

该属性的值指出了不允许有浮动对象的边。 

这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

元素值:none

表示两边允许有浮动元素。

元素值:left

表示该元素左边不存在浮动元素。

元素值:right

表示该元素右边不存在浮动元素。

元素值:both

表示该元素两边都不存浮动元素。

绝对定位

6.1 概述

标签元素

position

元素值:absolute

是生成绝对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位。可以选取具有定位的父级对象(如:relativeabsolute的结合使用)或者body坐标原点进行定位,也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的,当设定TRBL值后则根据浏览器的左上角作为原始点。

 

6.2 relativeabsolute的结合使用

        在网页设计时经常会用到浮动来对页面进行布局,但是浮动所带来的不确定因素却很多(例如:IE浏览器的兼容问题)。相对来说,在有些布局中定位使用会更加简单、快捷、兼容性更好(relativeabsolute相结合来使用)。比如有一个父级DIV标签head,其它下包含多个子标签。首先给head设置relative定位,那么可以看到里面所有的子元素在设置absolute后都会相对head进行定位,而不是相对body定位。这样相对于用浮动来说就简单方便了很多,也不需要担心兼容问题。

固定定位

7.1 概述

标签元素

position

元素值:fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

 

优势

8.1 实现结构与表现分离

结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},这样结果body内容部分就自动缩进两个汉字。

改用CSS排版后,我们主要考虑的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

  • 大小: 19.2 KB
0
1
分享到:
评论

相关推荐

    CSS在DIV网页排版中的实用技巧

    ### CSS在DIV网页排版中的实用技巧 随着网络技术的发展,网页设计的需求也日益多样化,为了提高网页的设计质量,合理地使用CSS与DIV结合进行网页布局成为了一项重要的技能。以下是一些关于如何利用CSS在DIV网页排版...

    DIV排版

    总结,DIV排版是网页设计的核心技能之一,结合源码管理和开发工具,可以实现高效、灵活且易于维护的网页布局。通过不断学习和实践,开发者能够更好地应对各种网页设计挑战,创造出色用户体验的网站。

    CSS3+DIV网页样式与布局从入门到精通(未来科技) 源代码

    ### CSS3+DIV网页样式与布局从入门到精通——核心知识点解析 #### 一、CSS3简介 **CSS3**(Cascading Style Sheets Level 3),即层叠样式表第3级,是用于增强HTML文档表现力的一种样式语言。CSS3在CSS2的基础上...

    实践DIV+CSS网页布局入门指南

    本实践指南将引导初学者深入理解并掌握这一核心技术,为构建高效、灵活和可维护的网页布局打下坚实基础。 首先,我们需要了解什么是DIV。在HTML语言中,`<div>`标签(division的缩写)是一个无语义的容器元素,用于...

    css+div网页模板整站

    《CSS+Div网页模板整站解析》 在网页设计领域,CSS(层叠样式表)与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习...

    divcss布局入门教程

    资源名称:div css布局入门教程内容简介:在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了...

    HTML+CSS+DIV网页设计.zip

    HTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS...

    《DIV+CSS入门教程》

    总的来说,《DIV+CSS入门教程》是一本实用且全面的指南,无论你是零基础的网页设计爱好者,还是希望提升技能的前端开发者,都能从中受益。通过这本书的学习,你将能够熟练运用DIV和CSS构建出专业且吸引人的网页,...

    css div 网页设计css div 网页设计css div 网页设计

    本篇文章将深入探讨CSS与`div`在网页设计中的应用、重要性以及如何有效利用它们。 首先,让我们理解CSS的核心概念。CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制...

    CSS+DIV网页样式与布局 从入门到精通作者是喻浩 --源代码和示例

    《CSS+DIV网页样式与布局 从入门到精通》是由喻浩编著的一本专业教程,旨在帮助读者全面掌握使用CSS(层叠样式表)和DIV(定义文档结构的HTML元素)进行网页设计和布局的技术。这本书深入浅出地讲解了如何通过这两种...

    div + css 实现不同排版的40个实例(页面内容一致,通过CSS控制布局)

    XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id=...

    网页排版输出

    网页排版输出是网页设计中的一个重要环节,它关乎到网页的视觉效果、用户体验以及信息的清晰传达。在设计人员与开发人员的工作流程中,排版工具起到了桥梁的作用,帮助设计师将创意理念转化为实际的网页布局。 ...

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

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

    HTML+CSS+DIV网页设计源码.zip

    HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...

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

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

    CSS+DIV网页样式与布局从入门到精通(未来科技)2017出版---源代码

    CSS+DIV网页样式与布局从入门到精通(未来科技)2017出版,即http://product.dangdang.com/25108302.html 这本书的源代码

    精美网页CSS+DIV排版

    本文将深入探讨如何利用CSS+DIV来实现精美的网页排版。 首先,理解CSS的作用至关重要。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许我们将样式(如颜色、字体、...

    Div+CSS网页样式与布局从入门到精通 实例

    本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术,通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、它们在网页布局中的作用,以及如何从入门到精通。 Div...

    DIV+CSS入门教程

    总之,"Div+CSS"入门教程旨在教授初学者如何利用XHTML标签(不仅限于DIV)和CSS进行网页布局,同时强调遵循Web标准和最佳实践,以创建可扩展、可维护的网页设计。在实际工作中,避免误解和滥用技术,如过度依赖DIV或...

Global site tag (gtag.js) - Google Analytics