CSS排版.ppt

1、网页国际标准-div css页面布局，css布局，本章将讲述如何使用div布局页面，然后通过CSS样式表实现页面结构和内容的分离。什么样的方式可以称为CSS布局？CSS网页布局有哪些分类？制作网页解释了如何使用DIV CSS来布局网页。2.1网页布局概述2.1.1网页布局的设计原则。网页设计布局是有效地排列许多元素(文本、图像、图标、表格等)。)在网络浏览器中输入网页。参考其他人的布局方法。在仔细研究了优秀的布局之后，2.12 CSS盒子模型的元素盒子的最里面的部分是实际的内容，并且内部的空白直接围绕着内容。内部边距表示元素的背景。内边距的边缘是一个边框。边框之外是外部边距，默认情况下是透明的

2、，因此它不会阻挡其后面的任何元素。CSS框模型图，内外边距设置： *边距： 0；padding : 0；宽度：宽度高度：高度边框：边框内部边距：填充外部边距：边距浮动：浮动清除：清除，在CSS中，宽度和高度是指内容区域的宽度和高度。增加内部边距、边框和外部边距不会影响内容区域的大小，但会增加元素框的大小。#箱宽： 70px；margin: 10pxpadding: 5px计算对象的实际高度和宽度：内容边框填充边框，2.13边框边框，边框样式：边框样式单边边框样式：边框-左边样式p边框样式：实心无；p边框-style:实心；边框-左样式：无；注意：如果您想使用第二种方法，您必须将单边属性放在缩写

3、属性之后。因为如果将单边属性放在边框样式之前，缩写属性的值将覆盖单边值none。边框宽度：边框宽度边框宽度： 15px边框-宽度： 15px 5px；边框-宽度： 15px 5px 15px 5px；p border-style:无；边框宽度： 50px；h1边框-宽度： 20px；边框颜色：边框颜色，2.14内部边距：填充，CSS填充属性定义元素的内部边距。填充属性接受长度值，但不允许负值。例如，如果您希望h1元素的所有边都有10个像素的内部边距，您只需要这样：h1填充10px您还可以按上、右、下和左的顺序设置每条边的内边距，每条边可以使用不同的单位或百分比：H1填充： 10px 0.25E

4、M 2EX 20pt填充-top : 10px；2.15外部边距，边距，边距属性接受任何长度单位，可以是像素、英寸、毫米或em。边距可以设置为自动。更常见的是为外部边距设置长度值。h1边距： 20px，2.16外部边距合并，这意味着当两个垂直的外部边距相遇时，它们将形成一个外部边距。合并外边缘的高度等于两个合并外边缘中较高的一个。当一个元素出现在另一个元素之上时，第一个元素的下外边缘将与第二个元素的上外边缘合并。请看下图：假设有一个空元素，它有一个外部边距，但没有边框或填充。在这种情况下，上部外边缘和下部外边缘将会合在一起，它们将合并：一般页面布局样式，一列固定宽度# game backgro

5、und-color : # cccccc；border:2px实心# 333333；宽度：300像素；高度：300像素。2.17CSS网页布局分类，2，自适应列表# game background-color : # cccccc；border:2px实心# 333333；宽度：80%；高度：300像素。3。具有固定宽度的列居中(1) #游戏背景-颜色： # CCCCC；border:2px实心# 333333；宽度：300像素；高度：300像素。margin:0px汽车，代表上下，代表左右，3。一个固定宽度的列居中(2) #游戏背景-颜色3360 # CCCCC；border:2px实心#

6、333333；宽度：700px。位置：相对；左侧：50%；边距-left :-350 px；4，两列的固定宽度# left background-color : # cccccc；border:2px实心# 333333；宽度：300像素；高度：300像素。float:left# right，float: left | right | none left:表示对象向左浮动。右：表示对象向右浮动。无：表示对象不浮动。清除：清除浮动。Left:清除左浮动。右：清除右浮动。None:不清除浮子。清除左右浮动。5。两列的自适应宽度# left background-color : # cccccc；b

7、order:2px实心# 333333；宽度：20%；高度：300像素。float:left#右宽度：70%；6，两列右列宽自适应# left background-color : # cccccc；border:2px实心# 333333；宽度：100px。高度：300像素。float:left，#右背景-颜色： # cccccc；border:2px实心# 333333；高度：300像素。7，第二列的固定宽度是居中的# main margin:0px auto宽度：408px。#左背景-颜色： # cccccc；border:2px实心# 333333；宽度：200像素；高度：300像素。

8、float:left#右，8，3列浮动中间列宽自适应CSS定位：位置属性允许您定位元素。相对元素框偏移一定距离。元素保持其预先定位的形状，并且它最初占据的空间保持不变。绝对元素框完全从文档流中移除，并相对于其包含块定位。包含块可以是文档中的另一个元素或初始包含块。该元素在正常文档流中占据的空间将被关闭，就好像该元素不存在一样。定位元素后，它会生成一个块级的框，不管它在正常流中生成什么类型的框。top:定义定位元素的上边缘和外边缘与其包含块的上边界之间的偏移。右：定义定位元素的右外边缘与其包含块的右边界之间的偏移。底部：定义定位元素的底部边缘与其包含块的底部边缘之间的偏移。Left:定义定位元素

9、的左外边缘与其包含块的左边缘之间的偏移。注意：如果“位置”属性的值为“静态”，设置“顶部”和“左侧”属性将无效。8，三列浮动中间列宽自适应* margin:0px#左背景-颜色： # CCCC11；border:2px实心# 333333；宽度：100px。高度：300像素。位置：绝对；top:0px。left:0px，#右背景色： # 11 CCCC；border:2px实心# 333333；宽度：100px。高度：300像素。位置：绝对；top:0px。右侧：0像素；#中间边距-左left:104px右边距：104px。背景颜色： # CCCCCC；border:2px实心# 333333

10、；高度：300像素。9，高适应性主体，html margin:0px高度：100%；#左背景-颜色： # CCCCCC；宽度：300像素；高度：100%；float:left，横幅菜单，固定在左侧，自适应在右侧，网站描述信息，4.18浮动：浮动，浮动框可以向左或向右移动，直到其外边缘接触到包含框或另一个浮动框的框架。因为浮动框架不在文档的正常流中，所以文档的正常流中的块框架的行为就像浮动框架不存在一样。请参见下图：当向右浮动框架1时，它脱离文档流并向右移动，直到其右边缘接触到包含框架的右边缘：当向左浮动框架1时，它脱离文档流并向左移动，直到其左边缘接触到包含框架的左边缘。因为它不再在文档流中，所以它不占用空间，