<acronym id="6i0ao"><small id="6i0ao"></small></acronym>
<acronym id="6i0ao"><center id="6i0ao"></center></acronym>
首页资源大厅实施方案

第8章网页的CSS布局【精品】文库吧文档共享平台

2019-05-04 格式:DOC

《第8章网页的CSS布局【精品】文库吧文档共享平台》提供在线全文查看,更多与《第8章网页的CSS布局【精品】文库吧文档共享平台》相关内容,请进入www.gokv.tw查看。

1、就像小河里的水流一样,即所谓标准文档流(Normal Document Stream),这是我们首先要了解的概念。然后,当我们了解了盒子的浮动(Float)和定位(position)方法之后,就可以随心所欲地布局网页元素了。 . 盒子模型 盒子(Box)是网页排版布局的最基本单元。盒子里面可以装文字,图像等网页元素,盒子模型的结构如图-所示。下面,通过一个实例来验证一下盒子的构造或称盒子模型。 例. 假如我们现在网页里插入张相同的图画,两张图片紧挨着,如图-。为了看清盒子模型,现在对后张画加上CSS样式,设定它的边框宽(border width:px),上,右,下,左个边框的颜色分别为:# #f #f #c, 内边距(padding:px),外边距(margin:px)之后,变成了图-。 图-原始图片 图- 第张图片设置边框,内边距,外边距 HTML代码如下: <,html>, <,head>, <,title>,盒子模型<,/title>, <,style type=",text/css",>, .tp { border-top-width: px, border-right-width: px, border-bottom-width: px, border-left-width: px, border-top-color: #, border-right-color: #F, border-bottom-color: #F, border-left-color: #C, padding: px, marg。

2、lt,h>,块级元素DIV<,/h>, <,div>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,div>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,div>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,h>,行内元素Span<,/h>, <,span>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,span>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,span>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,/body>, <,/html>, 效果如图- 。

3、离。两个块级元素之间在垂直方向上的距离,等于二者margin中的最大者。注意,不是二者之和。 Margin-bottom DIV DIV Margin-bottom DIV DIV Margin-top 图. 块级元素之间的距离取大的 . 嵌套盒子间距离(margin)的计算 两个盒子嵌套,外面的盒子成为?#26696;浮?#30418;子,包在里面的称为“子”盒子。在网页布局中,DIV标记形成嵌套的情况很普遍,往往有多层嵌套,即形成“祖?#28014;保案浮保?#23376;”甚至更复杂的情况。 子块级元素?#19981;?#22312;水平方向上自动延伸。不过,延伸的界限不是网页边界,而是父盒子的限制位置。 例-盒子嵌套 <,html>, <,head>, <,title>,父子块的边距算法<,/title>, <,style type=",text/css",>, <,。-- .father{ /* 父div */ background-color:#ffbb, text-align:center, font-family:Arial, Helvetica, sans-serif, font-size:px, padding:px, border:px solid #, } .son{ /* 子div */ background-color:#adff, margin:px px px px, padding:px, border:px dashed #, } -->, <,/style>, <,/he。

4、<,/div>, <,div class=",son",>,Box-<,/div>, <,p>,CSS中有一个float属性,在默认情况下(即在标准流中)其值为none,不起作用。如果需要的话,float的值可设为left或right,块级元素就会向其上级元素的左侧或右侧靠紧,上级元素盒子的宽度不再延伸,而是收缩,变成行内元素。浮动属性在网页布局中起着非常重要的作用<,/p>, <,/div>, <,/body>, <,/html>, 运行效果如图- 图- 初始效果 本例中使用了DIV嵌套。外层DIV使用类选择器(class=",father",),其中包含个DIV块级元素box-,box-,box-,以及一段文字。这都是为后边观察浮动效果做准?#28014;? .. 设置DIV浮动 ... 设置第个浮动DIV 在图-基础页面中,先让box-左浮动,看看浮动后的效果。方法就是将-.html头部样式表中 .son{ background-color:#CC } 改为 .son{ background-color:#CC float:left, } 效果图如-所示。 图- 设置第个盒子左浮动效果 图- 浮动后的box- 图- box-左浮动后的box- 由此可见,第个DIV盒子box-向上左浮动后脱离标准流,不再遵守标准。

5、行显示,就必须在p段落中结束浮动的影响。具体方法是,修?#27169;?#27573;落的样式表。 .father p{ border:px dashed #, background-color:#ffba, } 改为: .father p{ border:px dashed #, background-color:#ffba, clear:left, } 这时,左浮动的效果在p盒子中消失了。效果如图-。                 图- 左浮动取消了,右浮动还在 如果要取消所有的浮动效果,则应修改.father p样式表: .father p{ border:px dashed #, background-color:#ffba, clear : both, } 修改后效果如图-所示。            图- 用both 清除所有浮动效果 注意:clear方法只能在不需要浮动效果的盒子中使用,例如本例中的p盒子。决不能在已经浮动过的盒子(如box-,box-,box-)中使用。有时候,为了结束浮动效果,专门再增加一个空DIV盒子,然后设置其样式clear : both,以结束浮动的效果。 . 盒子的定位 在CSS中与排版布局有关的属性除了float之外,还有一个就是position,按字面意思可翻译成定位。Position有个取值: l Static:静态定位。这是默认属性值。 l Relative:相对定位。它以盒子自身起始的位置为参照。例如以盒子起始位置的左上角为圆点,进行X,Y轴方向移位定位。 l Absolute:绝对定位。绝对定位的基准是一个已经定位的祖先盒子。例如父盒子已经定位,则以父盒子的左上角为坐标原点,在X。

6、子box-,box-,box-全部左浮动后,<,p>,…<,p>,标记中的文字向上移动,接在box-后面按行内元素方式排?#23567;?#27492;时,个DIV盒子相当于幅图片?#27492;?#24207;排列,其他文字则环绕在他们周围。 ... 改变浮动方向 在上例的基础上,如果改变浮动的方向,例如,让box-右浮动,即改变.son的样式如下: .son{ background-color:#CC, float:right, } 则效果如图-所示。 图- box-右浮动效果 Box-右浮动后,固定在父容器的右侧。其余内容(box-,box-及p标记中的文字)向左移动。 本例虽然简单,但它说明了一个问题,就是使用CSS布局,可以在现有HTML代码不作任何改动的情况下,调换盒子的显示位置,从而达到改变网页布局的目的。 ... 使用clear属性结束浮动 为了更好地说明clear的用法,在上例的基础上,修改Box-中的代码,使之实现行显示。代码如下: <,div class=",son",>,   Box-<,br/>,   Box-<,br/>,   Box-<,br/>,   Box- <,/div>, 效果如图-所示。                图- box-变成行显示 Clear的作用是结束浮动的影响。有种用法:clear :left结束左浮动,clear :right结束右浮动,clear :both 同时结束左,右浮动的效果。为什么要结束浮动效果,什么时候结束浮动效果。我们以图-为例说明。 如果不想让文字环绕在浮动后的盒子周围,而是单独在新。

7、下浮动是如何实现的。 .. 制作基础页面 先做一个基础页面,作为后面练?#26696;?#21160;的起始文件。文件名为-.Html。 例- 基础网页-.html,代码如下: <,html>, <,head>, <,title>,float属性<,/title>, <,style type=",text/css",>, body{ margin:px, font-family:Arial, font-size:px, } .father{ background-color:#ffff, border:px solid #, padding:px, } .father div{ padding:px, margin:px, border:px dashed #, } .father p{ border:px dashed #, background-color:#ffba, } .son{ background-color:#CC, } .son{ background-color:#FF, } .son{ background-color:#FF, } <,/style>, <,/head>, <,body>, <,div class=",father",>, <,div class=",son",>,Box-<,/div>, <,div class=",son",>,Box-。

8、gt,行内元素Span<,/h>, <,span style=",display:block",>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,span>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,span>,<,img src=",img/.jpg", width=",", height=",", />,<,/span>, <,/body>, <,/html>, 效果如图- 图- display属性转换块级元素和行内元素 .. 在标准流中盒子间距离的计算 通常情况下(即在标准流中),两个盒子之间的位置关系无非是水平并排放置,垂直上下放置或者内外嵌套放置种情况。这时,计算两个盒子的距离实际上就是计算二者的margin。这里有一定规定。 . 行内元素间水平间隔(margin)的计算 两个行内元素只能在一行中并排放置,二者之间的距离就是相邻外边距(margin)之和。 Span Span Margin-right Margin-left 图. 行内元素之间的距离外边距之和 . 块级元素间垂?#26412;?#31163;(margin)的计算 两个块级元素不可能处在一行,故只能有垂直方向的距。

9、切记?#27492;?#26102;针方向即上,右,下,左的顺序。 归纳一下 : 个参数:表示上下左右, 个参数:表示上下,左右, 个参数:表示上,左右,下, 个参数:表示上,右,下,左。 以上简写方法在CSS中有普遍性,各种属性简化表示基本如此。 .还有一种简化写法,就是在同一行中标出同一元素的不同属性。例如: Border:px green dashed, 上边样式表示条边都是宽px,绿色,虚线。 . 标准流 标准文档流(Normal Document Stream)简称文档流。它是指在平常情况下,即不使用人为的排版,定位等CSS规则时,网页元素默认的排列规则。 网页元素按其在页面中占位的情况看分为行内元素(in line)和块级元素(block level)。 ..行内元素 在同一行内?#27492;?#24207;排列的元素称为行内(in line)元素。文字可在一行中一个挨一个的排列,是最典型的行内元素。<,a>,<,img>,<,b>,<,span>,等都是行内元素。他们的共同特点是能和别的元素共同排列在一行,不单独?#21152;行小?#24403;到达行尾时自动折行排?#23567;?#27599;一行的长度取决于其父容器的宽?#21462;? ..块级元素 每一个元素都要独占一行的称为块级元素。如:<,Li>,<,DIV>,<,table>,等。不管块级元素本身宽度是多少,它的占位符(由虚线框标出)一直延伸到该行的末尾。每一行的长度取决于其父容器的宽?#21462;? 例. 块级元素与行内元素 代码如下: <,html>, <,head>, <,title>,块级元素与行内元素<,/title>, <,/head>, <,body>, &。

10、 第章 网页的CSS布局 网页布局排版就是把各种网页元素摆放在页面的指定的位置上。这些网页元素包括logo,banner,导航条,文字,图片等。不同的网页有不同的布局,一般情况下如何布局都是随网页内容和作者的创意而定。早期的网页布局通常是使用表格来实现的。通过表格的嵌套可以实现很复杂的布局,不过布局过后的后台代码已经很复杂了,很难读懂。表格布局的缺点?#20849;?#27490;如此,缺少灵活性,一旦完成网页再想修改布局是很困难的。为了改变这种状况,现在的网页一般都采用CSS布局方法。 网页中的每个元素(文字或图像等)都占据着一定的页面空间。我们可以想象这个空间是一个盒子(Box),如图-所示。盒子中间放着网页元素(例如文字“楷”),盒子边框(border)有一定宽度,网页元素和盒子内边框之间的距离称为内间距(padding),盒子外边框与别的盒子相邻还有一定的外间距(margin)。 Margin-top border-top Margin-left padding-top 楷 Margin-right padding-left padding-right border-left border-right padding-bottom border-bottom Margin-bottom 图- 盒子模型 网页的CSS布局就是把这些盒子摆放好,以便达到预期的效果。所以,学习CSS布局首先应当了解单个的盒子(box)模型,了解盒子内部及盒子之间的一些特点。然后再了解正常情况下页面是如何自动摆放每个盒子的位置的。正常情况下,文档元素(文字,图像等)?#27492;?#24207;一个个排列起来。

11、in: px, } <,/style>, <,/head>, <,body>, <,img src=",img/.jpg", width=",", height=",", />, <,img src=",img/.jpg", width=",", height=",", class=",tp",/>, <,/body>, <,/html>, 图-的两张图片都没有进行任何设置,即默认边框宽度,内边距,外边距都是零。所以,两张图片紧挨着。图- 中第张图片的上,右,下,左个边框宽度(border width)设置均为px,颜色分别为# #f #f #c。个内边距(padding)均为px,个外边距(margin)均为px。 思考:若将上述代码中样式.tp修改如下,效果是否一样。(一样) .tp { border-width: px, border-color: # #f f #c, padding: px, margin: px, } ..盒子属性的简写形式 . 盒子的属性可以用多种方式简?#30784;?#21487;以给出个,个,个,个参数值。以边框宽度为例: Boeder-width:px, 表示上,右,下,左个边框均为px。 Border-width:px px:表示上,下边框宽px,左右边框宽px。 Border-width:px px px,表示上边框宽px,左,右边框宽px,下边框宽px。 Border-width:px px px px,表示上,右,下,左边框宽分别为px,px,px,px。

12、 图- 块级元素与行内元素 从效果图中看到,块级元素的盒子会在水平方向上自动延伸,直至一行的最右端为止,如虚线所示。这是块级元素的特点,虚线所包含?#27573;?#23601;是该块级元素所占的位置。行内元素可在同一行内排列多个原素。 .. 行内元素与块级元素的相互转换 可以使用盒子的display属性来实现块级元素和行内元素的相互转换。 例- 将上例?#22411;?#20004;个DIV块级元素的Display属性改设为inline,将第个span行内元素的display属性改设为block。观察其效果。 代码如下: <,html>, <,head>, <,title>,块级元素与行内元素<,/title>, <,/head>, <,body>, <,h>,块级元素DIV<,/h>, <,div style=",display:inline",>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,div style=",display:inline",>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,div>,<,img src=",img/.jpg", width=",", height=",", />,<,/div>, <,h&。

13、ad>, <,body>, <,div class=",father",>, <,div class=",son",>,子div<,/div>, <,/div>, <,/body>, <,/html>, 运行效果: 图-盒子嵌套 图- 父盒子的border,padding,margin 图-子盒子的border,padding,margin 由以上图可见,子DIV盒子到父DIV上边框的距离为子margin-top+父padding-top,既px+px=px,二者右边距为子maegin-right+父padding-right ,既px+px=px,二者下边距为子margin-bottom+父padding-bottom,既px+px=px,二者左边距为子margin-left+父padding-left,既px。 . 盒子的浮动 CSS中有一个float属性,在默认情况下(即在标准流中)其值为none,不起作用。如果需要的话,float的值可设为left或right,实现左浮动或右浮动。元素就会向上层浮动后就脱离了标准流。 在标准流中,一个块级元素在水平方向会自动延伸,一直延伸到其父元素的边界,而在垂直方向上和其他块级元素?#26469;?#25490;列,不能并排。但是,使用向上?#26696;?#21160;”方式后,该元素脱离标准流,那将会是怎样的情景呢。 下面通过一些具体例子认识一。

14、流的规则,Box-盒子自身宽度已不再伸展,其宽度为仅仅能容下其中文字而已(图-)。而标准流中的DIV盒子box-取代了原box-的位置(图-),box-浮动于box-之上,box-和box-的左边界重合。 ... 设置第个浮动DIV 接下来再让第个盒子也左浮动。方法是再在上边第一步的基础上,修改样式.son。将 .son{ background-color:#FF, } 改为: .son{ background-color:#FF, float:left, } 修改后效果如图-。 图- box-,box-左浮动后效果 Box-,box-都左浮动以后,两者都脱离了文档流,向上浮动于box-之上。这时,他们反而像行内元素一样顺序排?#23567;?#20197;下分解图会看得更清楚。 图- box-及其占位空间 图 - box-及其占位空间 图 - box-,box-左浮动后,box-上移,占位情况 ...设置第个浮动DIV 接着上面的实验,再将最后一个DIV盒子box-也左浮动。方法是在上一步的基础上,修改样式.son。具体如下,将 .son{ background-color:#FF } 改为: .son{ background-color:#FF, float:left, } 修改后的效果如图-。 图- 个DIV盒子全部左浮动 个DIV?#23567;?/p>

本文标题是:第8章网页的CSS布局【精品】文库吧文档共享平台,欢迎您的阅读。

相关文件如下:

【offic文件】-第8章网页的CSS布局

第8章网页的CSS布局(序列版1)

第8章网页的CSS布局√已校正

第8章网页的CSS布局【可编辑版本】-www.gokv.tw

第8章网页的CSS布局【精品】文库吧文档共享平台

第8章网页的CSS布局-图文可编辑文库吧文档共享平台

【修订号**-第8章网页的CSS布局】文库吧文档共享平台

【WORD】-第8章网页的CSS布局精品

第8章网页的CSS布局【未删减版本】

?#26223;?#20844;文件√第8章网页的CSS布局】

北京pk10双面盘预测
<acronym id="6i0ao"><small id="6i0ao"></small></acronym>
<acronym id="6i0ao"><center id="6i0ao"></center></acronym>
<acronym id="6i0ao"><small id="6i0ao"></small></acronym>
<acronym id="6i0ao"><center id="6i0ao"></center></acronym>
七星彩开奖 MG电子游戏容易赢钱吗 5张牌牛牛压庄有什么技巧 如何在家就能赚钱 大乐透004期历史记录 七乐彩中1等奖咋领 宁夏十一选五走势图带连线 体育彩票7 麻将发牌 双色球图表走势 四川体彩金7乐软件 北京pk赛车开奖网站 2011年七星彩开奖结果 亨利娱乐网站 篮球加时赛比分算总分吗