第13章css+div页面布局.ppt

4.2 常见的布局方式——1-2-1布局 4.3 常见的布局方式——1-3-1布局 4.4 常见的布局方式——1-((1-2)+1)-1布局 5. 简单CSS布局分析 5.1 固定宽度且居中方法一 宽度固定且居中的版式是网络中最常见的排版方式之一。这里介绍两种实现方法。 首先将整个页面内容用一个大的div包裹起来，id为container，对它设置固定宽度且居中，并且让container里面的内容左对齐。 当设置了container的宽度以后，它就自动左对齐了。 方法一实现居中的关键之处在于#container属性中的“margin:0 auto;”，它使得该块与页面的上下边界距离为0，左右则自动调整。 5.2 固定宽度且居中方法二 方法二换一种角度来进行思考。 它将#container采用relative的定位方法，用left属性将其左边框移动到页面的50%处，并且用“margin-left：-350px”将整个块往回拉了350像素，同样设置宽度为700px。这样便再次实现了固定宽度居中对齐的排版样式。 从这个例子可以看出，负值margin的巧妙用途。 5.3 左中右版式 将页面分割为左中右3块也是网页中常见的一种排版模式。 这里制作的是左栏与右栏的宽度和位置固定，中间栏的宽度随页面自动调整。 实现的关键在于将左栏与右栏都采用绝对定位，设置宽度为190px，中间栏的宽度为100%，并将设置其margin-left和margin-right都为190px（空出左右块的位置）。 #left #right #middle 6. CSS排版实例 6.1 CSS排版实例——电子相册 实例： 6.2 利用CSS页面布局制作个人文集 使用固定宽度且居中的版式制作个人文集页面。 实例：13-24.html 6.3 练习——CSS页面排版 仿照上例，将“练习13-个人主页”由表格排版改为CSS排版。 * Neusoft Institute of Information 教育创造学生价值 Neusoft Institute of Information 教育创造学生价值 1.div与span标记 1.1 概述 在使用CSS排版的页面中，div与span是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种效果。 div（division）是一个区块容器标记，即div与/div之间相当于一个容器，可以容纳各种HTML元素。 可以把div与/div之间的内容视为独立的对象，只要对div进行控制，其中的各标记元素都会因此而改变。 如果在上例中把div替换成span标记，效果完全一样。span标记的作用也是独立出各个区块。 1.2 div与span的区别 区别： div是一个块级（block-level）元素，它包围的元素会自动换行。 span是一个行内（inline ）元素，在它的前后不会换行。 此外，span标记可以包含于div标记中，成为它的子元素。反过来则不成立，即span标记不能包含div标记。 通常情况下，对于页面中大的区块使用div标记，而span标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片或一个超链接等。 2.盒子模型 2.1 概念 什么是“模型”——本质特征的抽象 布局的“模型” 2.1 概念 所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。可以通过调节盒子的边框和距离等参数，来调节盒子的位置。 一个盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）这4个部分组成。 2.3 border border 一般用于分离元素，计算元素实际的宽和高时，要将border也考虑进去。 border的属性主要有3个：color、width、style 注意在不同浏览器中的不同显示效果。 2.3 border 如果希望在某段文字结束后加上虚线用于分割，而不是用border将整段话框起来; 可以通过单独设置border-bottom来完成。 2.4 padding padding用于控制content与border之间的距离; 加入Padding-bottom的语句，实现如下效果。 2.5 margin margin是指元素与元素之间的距离。 加入margin-bottom的语句，实现如下效果。 2.6 行内元素之间的水平margin 当两个行内元素紧邻的时候，他们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。 实例：13-8.html span.left{ margin-right:30px; background-color:#a