CSS高级应用实用.pptx

《CSS高级应用实用.pptx》由会员分享，可在线阅读，更多相关《CSS高级应用实用.pptx（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、6.1列表6.1.1 设置列表样式 列表由若干列表项构成，列表项使用标记来表示。列表样式就是指列表项目的符号类型，在无序列表中，默认的符号类型是圆点，在有序列表中，默认的序号是阿拉伯数字。可以通过设置列表的list-style-type属性将无序列表中的符号类型设置为方块、空心圆，也可将有序列表中的序号设置为大(小)写罗马数字或大(小)写英文字母，另外，也可将无序列表的符号或有序列表的序号设置为不显示任何符号。第1页/共30页6.1列表1.List-style-type属性基本语法：List-style-type:语法说明：设计列表样式语法中属性list-style-type的取值及对应的列表

2、符号见下表。第2页/共30页属性的取值列表符号属性的取值列表符号disc黑圆点（默认值）upper-roman按大写罗马字母排序I、II、IIIcircle空心圆lower-alpha按小写字母排序a、b、csquare黑方块upper-alpha按大写字母排序A、B、Cdecimal按数字排序1、2、3none不显示任何列表项或编号lower-roman按小写罗马字母排序i、ii、iii6.1列表第3页/共30页6.1列表2、list-style-image属性列表项的符号还可以通过使用图像来丰富和美化，列表的图像属性list-style-image用来设置列表符号的图像类型。基本语法：Li

3、st-style-image:none|URL语法说明：none表示不使用图像符号；URL指定图像的名称和路径。3、list-style-position属性列表的list-style-position属性用来设置列表项的缩进，该属性包括两个属性值，一个为向内缩进，另一个为不向内缩进。基本语法：List-style-position:outside|inside语法说明：outside表示列表项不向内缩进，为默认值；inside表示列表项向内缩进。第4页/共30页6.2 边框与边距6.2.1盒模型 网页设计中的每一个元素都可以看作是一个长方形的盒子，整个网页可以看作是一个大盒子，而这个大盒子又

4、由不同的网页元素小盒子组成。每个盒子有边框border，每个盒子里有内容，内容与边框之间的距离为内边距（或填充）padding，网页中盒子与盒子之间的空白距离称为外边距margin。外边距margin填充padding内容content第5页/共30页6.2 边框与边距 一个盒子的实际宽度（或高度）是由content+padding+border+margin组成的，区块的width属性值仅仅指content的宽度，不包括paddind、border、margin所占的宽度。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边

5、各自的border、padding、margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。第6页/共30页6.2 边框与边距6.2.2 边框 在CSS中，为了设置边框的外观，提供了边框样式属性、边框宽度、边框颜色。1.边框样式属性使用边框样式属性不仅可以统一设置四条边框的样式，还可以分别设置各自的样式。基本语法：border-style:样式取值border-top-style:样式取值border-bottom-style:样式取值border-left-style:样式取值border-right-style:样式取值第7页/共30页6.2 边框与边距 语法说明 bor

6、der-style是一个复合属性，该属性值可以有多个，多个属性值之间用空格隔开。取值方法如下：取一个值：四条边框均使用这一个值；取二个值：上下边框使用第一个值，左右边框使用第二个值；取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值。第四个值：四条边框按照上、右、下、左的顺序来调用取值。border-top-style、border-bottom-style、border-left-style、border-right-style分别用来设置上、下、左、右边框样式。第8页/共30页6.2 边框与边距样式取值说明样式取值说明none不显示边框，为默认值groove凹型线dot

7、ted点线ridge凸型线dashed虚线inset嵌入式solid实线outset嵌出式double双直线表6-2 边框样式属性取值说明第9页/共30页6.2 边框与边距 2.边框宽度属性使用边框宽度属性不仅可以统一设置四条边框的宽度，还可以分别设置四条边框的宽度。基本语法：border-width:关键字|长度border-top-width:关键字|长度border-bottom-width:关键字|长度border-left-width:关键字|长度border-right-width:关键字|长度语法说明：长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可以使用相

8、对单位，如px、pt、cm等。border-width是一个复合属性，可以同时设置四条边框的宽度，设置方法与border-style类似。关键字说明thin细边框medium中等边框、是默认值thick粗边框第10页/共30页6.2 边框与边距 3.边框颜色属性使用边框宽颜色性不仅可以统一设置四条边框的宽度，还可以分别设置其颜色。基本语法：border-color:关键字|RGB值border-top-color:关键字|RGB值border-bottom-color:关键字|RGB值border-left-color:关键字|RGB值border-right-color:关键字|RGB值语法

9、说明RGB值使用十六进制的RGB和RGB函数值等同。border-color是一个复合属性，可以同时设置四条边框的宽度，设置方法与border-style类似。第11页/共30页6.2 边框与边距 6.2.3 边距与填充 1.边距边距就是用来设置网页中某个元素的四边和网页中其他元素之间的空白距离，即盒子与盒子之间的距离。和边框属性类似，可以使用边距属性统一设置四个边距，也可以分别单独设置。margin:长度|百分比|automargin-top:长度|百分比|auto margin-bottom:长度|百分比|automargin-left:长度|百分比|automargin-right:长度

10、|百分比|auto语法说明：长度包括长度值和长度单位，如5px。百分比是相对于上级元素宽度的百分 比，允许使用负值。auto为自动取边距值，是默认值。margin是一个复合属性，可以同时设置四条边框的宽度，设置方法与其它复合属性类似。基本语法：第12页/共30页6.2 边框与边距 2.填充填充属性用来控制边框和其内部元素之间的空白距离，从语法与用法上与边距类似。基本语法：padding:长度|百分比padding-top:长度|百分比 padding-bottom:长度|百分比padding-left:长度|百分比padding-right:长度|百分比语法说明：长度包括长度值和长度单位，如5

11、px。百分比是相对于上级元素宽度的百分比，允许使用负值。margin是一个复合属性，可以同时设置四条边框的宽度，设置方法与其它复合属性类似。第13页/共30页6.3定位 6.3定位定位属性用来控制网页中显示的元素的位置。定位属性对div的作用很大，因为每一个div都可以看作是一个独立体，而这个独立体在网页中的位置就是由定位属性来决定的。6.3.1定位方式 1.定位属性position定位属性position用来设置网页中HTML元素定位的具体方式。定位方式主要包含绝对定位、相对定位和静态定位。基本语法：position:static|absolute|relative语法说明：static表示

12、静态定位，是默认值。第14页/共30页6.3定位absolute表示绝对定位，需要和下一节介绍的位置属性top、bottom、right、left等结合使用。绝对定位的网页元素的参照点为设置了定位属性的最近的祖先元素，如果没有定了位的祖先级元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，参照物可能是BODY或 HTML 元素）。位置属性值为其相对于参照点的偏移量。绝对定位的网页元素不在文档流中，不会随页面大小的改变而改变。relative表示相对定位，也需要和下一节介绍的位置属性top、bottom、right、left等结合使用。相对定位的网页元素其位置相对于自身在未定位前的位

13、置进行偏移，偏移量由位置属性设置。相对定位的元素没有脱离文档流，会随着页面大小的改变而改变。第15页/共30页6.3定位 2.位置属性网页元素的定位只有在定位属性和位置属性共同作用下，才可以确定其位置，所以学习设置元素的位置属性也是很必要的。位置属性包括top、left、right、bottom四分属性，分别表示元素上、左、右、下的偏移量。基本语法：top:auto|长度值|百分比left:auto|长度值|百分比right:auto|长度值|百分比bottom:auto|长度值|百分比语法说明：auto表示采用默认值。长度值包括数值和长度单位。百分比作为属性值是一个相对值。第16页/共30页

14、6.3定位浮动属性用来设置元素是否浮动，以及它的浮动位置，浮动元素在文档流中。6.3.2浮动基本语法：float:left|right|none语法说明：auto表示采用默认值。长度值包括数值和长度单位。百分比作为属性值是一个相对值。第17页/共30页6.4 DIV布局 DIV标签是用来为HTML文档内大块的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块。通过设置DIV标签的CSS样式来控制DIV的边框、大小、颜色、定位等属性实现DIV+CSS的布局。6.4.1行布局行布局是最简单的也是最基本的布局形式。DIV在默认状态下，宽度占据整行的空间，可通过设置D

15、IV的宽度和高度属性对DIV的大小进行调整，宽度和高度属性可以设置具体数值的固定大小，也可以设置成自适应大小。第18页/共30页6.4 DIV布局 6.4.2列布局列布局也是的布局的基本形式。DIV在默认状态下，宽度占据整行的空间，可通过设置DIV的宽度和高度属性对DIV的大小进行调整，宽度和高度属性可以设置具体数值的固定大小，也可以设置成自适应大小。在列布局中，通过设置浮动属性float和定位属性position实现各DIV块在页面中的位置。第19页/共30页6.5 应用实例第20页/共30页6.5 应用实例本案例采用DIV+CSS的思路实现网页布局与效果设计。首先将图6.30看作是要完成的

16、设计图，然后按照下面的实现思路进行操作：第一步，分析效果图，进行布局规划；第二步，从效果图中提取尺寸和素材；第三步，编写HTML代码；第四步，编写CSS样式代码；第五步，对代码进行优化和调整。布局规划完之后，首先使用photoshop、fireworks等图形软件从效果图中提取必要的素材，如设计CSS样式所需的大小、颜色、图片、文本等，然后进行HTML代码的编写和CSS代码的编写以下重点从DIV+CSS设计的角度对本例的实现进行分析与讲解，对于页面中内容生成的HTML代码不作为介绍的重点。第21页/共30页6.5 应用实例 6.5.1总体布局规划与设计首先进行总体布局规划。从设计图可以看出，本

17、例的布局为典型的“回”字形布局，在设计可以分成两个层次，第一层按三行布局设计，然后对中间部分插入三列布局设计，布局规划示意图如图6.31所示。根据布局分析的结果，在Dreamwaver中制作的方法和步骤如下：第一步：在Dreamwaver中新建HTML文件，文件另存为6-11.html；第二步：在文件中依次插入三个DIV，并分别设置DIV的ID值为“top”，“conetnt”，“bottom”；第三步：在ID为content的DIV块中依次插入三个DIV，并分别设置DIV的ID值为“left”，“main”，“right”；top contentbottomcontentleftmainri

18、ghtmainright第22页/共30页6.5 应用实例为总体布局进行CSS设计的方法和步骤如下：第一步：在文件中新建CSS规则，定义top、content、bottom块的宽度width统一设为880px，CSS代码如下所示：#top,#content,#bottom width:880px;第二步：在文件中新建CSS规则，定义content块为相对定位，即position值为relative,高度height值为420px，content区块距离top区块的上边距margin-top为10px,content区块距离bottom区块的下边距margin-bottom为10px，CSS代码

19、如下右所示：第23页/共30页6.5 应用实例#content position:relative;height:420px;margin-top:10px;margin-bottom:10px;第三步：在文件中新建CSS规则，定义left区块的为绝对定位，即position值为absolute,距父容器content块左边的距离left值为0px，宽度width值为180px，边框为细实线，颜色取值为#CCC，即border值为 thin solid#CCC,CSS代码如下所示：#left position:absolute;border:thin solid#CCC;width:200px

20、;left:0px;第24页/共30页6.5 应用实例第四步：在文件中新建CSS规则，定义main区块的为绝对定位，即position值为absolute,距父容器content块左边的距离left值为210px，宽度width值为500px，边框为细实线，颜色取值为#CCC，即border值为 thin solid#CCC，CSS代码如下所示：#main position:absolute;border:thin solid#CCC;width:500px;left:210px;第25页/共30页6.5 应用实例第五步：在文件中新建CSS规则，定义right区块的为绝对定位，即positio

21、n值为absolute,距父容器content块左边的距离left值为720px，宽度width值为160px，边框为细实线，颜色取值为#CCC，即border值为 thin solid#CCC，CSS代码如下所示：#right position:absolute;border:thin solid#CCC;width:160px;left:720px;第26页/共30页6.5 应用实例第六步，优化CSS代码，将left,main,right块CSS代码中的取值相同的position和border属性放到一起形成复合样式，最终生成的整体布局CSS代码为：#content position:re

22、lative;height:420px;#left,#main,#right position:absolute;border:thin solid#CCC;#left width:180px;left:0px;第27页/共30页6.5 应用实例#main width:500px;left:210px;#right width:160px;left:720px;总体布局设设计完成后，整个页面被分成了top、left、main、right、bottom五个区块，然后分别对这五个区块进行分布局规划和设计。第28页/共30页本章小结 本章介绍了CSS中常用的属性，主要包括列表属性、边框、边距、定位等相对属性，并通过实便讲解了这些属性能实现的效果。列表是网页中经常用到的组织内容的HTML标记，结合CSS的其它属性列表可以实现横排，极大的扩展的列表的应用范围。通过盒模型的介绍，可以很好地理解网页元素的边框、边距、填充等属性，并能灵活地应用这些属性实现网页美化的效果。定位属性的灵活应用对于实现DIV+CSS的网页设计模式具有重要意义。第29页/共30页感谢您的欣赏！第30页/共30页