Divcss培训.ppt

《Divcss培训.ppt》由会员分享，可在线阅读，更多相关《Divcss培训.ppt（36页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、CSS+DIVCSS+DIV带来的好处：带来的好处： 使页面加载速度更快；使页面加载速度更快； 减小页面文件大小，可以降低网站的流量；减小页面文件大小，可以降低网站的流量； 使网站符合使网站符合WEBWEB标准标准-W3C-W3C规范，减少不同浏览器兼容性问题；规范，减少不同浏览器兼容性问题； 设计代码与内容分离，易于页面修改和维护；设计代码与内容分离，易于页面修改和维护； 代码精练，有利于搜索引擎抓取，增加收录数量和权重；代码精练，有利于搜索引擎抓取，增加收录数量和权重； 在世界上越来越多人采用在世界上越来越多人采用 Web Web 标准时，掌握标准时，掌握CSS+DIVCSS+DIV可以提

2、可以提高设计师的职场竞争实力。高设计师的职场竞争实力。CSS+DIV崭新崭新的的“老老技术技术”什么是什么是DIV+CSSDIV+CSSDIVDIV 全称全称 divisiondivision 意为意为“区分区分”，CSSCSS全称全称 CascadingCascading StyleStyle SheetsSheets 意为层叠样式表，这个布局中，意为层叠样式表，这个布局中，DIVDIV承载的承载的是内容，而是内容，而CSSCSS承载的是样式。内容和样式的分离对于所承载的是样式。内容和样式的分离对于所见即所得的传统见即所得的传统TABLETABLE编辑方式确实是一个很大的冲击，编辑方式确实是

3、一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现式。不过随着学习，会发现DIV+CSSDIV+CSS的好处实在是太明显的好处实在是太明显了了vHTML(超文本标记语言) - XMLvXHTML（可扩展超文本标记语言）vTransitional 松散过渡型的XHTML文档类型标题内容头 head主体 body例子1.1vHTML与DOM(文档对象模型)无标题文档无标题文档 vXHTMLXHTML遵循的规范遵循的规范v 1. 1. 标记名称必须小写标记名称必须小写v 2. 2. 属性名称必须小写属性名称必须

4、小写v 3. 3. 标记必须严格嵌套标记必须严格嵌套v 4. 4. 标记必须封闭标记必须封闭v 5. 5. 即使是空元素的标记也必须封闭即使是空元素的标记也必须封闭v 6. 6. 属性值用双引号括起来属性值用双引号括起来v 7. 7. 属性值必须使用完整形式属性值必须使用完整形式正确：正确： 正确：正确：正确：正确： 文本文本 正确：正确： 正确：正确： 正确：正确：正确：正确：vXHTMLXHTML定义结构的标签：定义结构的标签：布局布局 DIV (DIV (首选首选) )文本文本 p ,h1 - h6,strong ,span,bp ,h1 - h6,strong ,span,b图片图片F

5、lashFlash img ,objectimg ,object列表列表 ul li ,ol li,dl dt ddul li ,ol li,dl dt dd表单表单 form,input,select,textareaform,input,select,textareavXHTMLXHTML引入引入CSSCSS的方式：的方式：行内式 文本内嵌式 h1color:white; 导入式 importmystyle.css; 链接式 vCSSCSS语法结构：语法结构：选择符选择符(selector)(selector)、属性、属性(property)(property)与值与值(value) (v

6、alue) body color: red; body color: red; 选择符分类：选择符分类：类型选择符类型选择符idid和和classclass选择符选择符群组选择符群组选择符包含选择符包含选择符标签指定选择符标签指定选择符组合选择符组合选择符伪类及通配选择符伪类及通配选择符 例子1.13. 行内样式 ID样式 类别样式 标记样式例子1.2divcolor:red;.contentcolor:green;#maincolor:blue;我是divv标记与标记 div：块级元素 （block） span：行内元素（inline） 例子：1.3v 布局的布局的“模型模型”: 每个每个H

7、TMLHTML元素都可以看作一个元素都可以看作一个装了东西的盒子，盒子具有装了东西的盒子，盒子具有宽宽度（度（widthwidth）和和高度高度（heightheight），盒子里面的内容，盒子里面的内容到盒子的边框之间的距离即到盒子的边框之间的距离即填填充（充（paddingpadding），盒子本身有，盒子本身有边框（边框（borderborder），而盒子边框，而盒子边框外和其他盒子之间，还有外和其他盒子之间，还有边界边界（marginmargin）。divwidth:200px;height:100px;border:50px solid #000000;margin:50px; pa

8、dding:50px;background:#ffffff; 例子1.4v 属性值的简写形式属性值的简写形式方法是按照规定的顺序，给出方法是按照规定的顺序，给出2 2个、个、3 3个或者个或者4 4个属性值，它个属性值，它们的含义将有所区别，具体含义如下：们的含义将有所区别，具体含义如下：如果给出如果给出2 2个个属性值，前者表示属性值，前者表示上下上下边框的属性，后者表边框的属性，后者表示示左右左右边框的属性；边框的属性；如果给出如果给出3 3个个属性值，前者表示属性值，前者表示上上边框的属性，中间的数边框的属性，中间的数值表示值表示左右左右边框的属性，后者表示边框的属性，后者表示下下边框的

9、属性；边框的属性；如果给出如果给出4 4个个属性值，依次表示属性值，依次表示上、右、下、左上、右、下、左边框的属边框的属性，即顺时针排序。性，即顺时针排序。例子例子1.51.5vmargin （外边距）(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左例如，margin:2em 4em、margin-left:-200pxvpadding （内边距）(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、

10、下、左 例如，padding:2px 4px 6px、padding-left:200px vborder（边框） border-color: (颜色值) border-width: (thin,medium,thick,宽度值) border-style: (none无，solid实线,dotted点状，dashed虚线状，double双线，groove 3D凹槽状，ridge 3D凸槽状，inset 3D凹边状，outset 3D凸边状) 例子1.6 (border-top、border-right、border-bottom、border-left): 例如，border-top:1px

11、 solid #000000vbackground（背景） (background-color | background-image | background-repeat | background-attachment | background-position)#contentbackground-color:#cccccc;background-image:url(img/bg. jpg);background-repeat:no-repeat;background-position:30% 20px;改进后：#contentbackground:#ccc url(img/bg. jpg

12、 no-repeat 30% 20px;例1.7 v 动态超链接动态超链接a:link, a:visited text-decoration:none;a:hover, a:active text-decoration:underline;v 例例2.1属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接上时的样式a:active在超链接上单击时，即“当前激活”时，超链接的样式vFloat 属性：属性：用于设置对象是否浮动显示，以及设置具体的用于设置对象是否浮动显示，以及设置具体的浮动方式浮动方式(none:(non

13、e:不浮动，不浮动，leftleft向左，向左，rightright向右向右) )浮动浮动(float)(float)是是CSSCSS布局中非常强大的功能，也是理解布局中非常强大的功能，也是理解CSSCSS布局关布局关系问题所在，包括系问题所在，包括divdiv在内任何元素都可以浮动显示在内任何元素都可以浮动显示float做为CSS中的一个属性定义元素在哪个方向浮动。float:left 文本或图像会移至父元素中的右侧。float:right 文本或图像会移至父元素中的左侧。 float:none 默认。文本或图像会显示于它在文档中出现的位置。 float:inherit规定应该从父元素继承

14、float 属性的值。例2.2 常用布局vPosition 定位：定位： static：默认值，也就是按照标准流（包括浮动方式）进行布局。 relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 absolute：绝对定位，使用left,right,top,bottom等属性相对于其最接近的一个absolute定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 fixed：称为固定定位，它和绝

15、对定位类似，只是以浏览器窗口为基准，进行定位。例例2.32.3vUl li,ol li,dl dt dd用法：用法：DIVCSS网页布局中常用的列表元素ulollidldtdd释义，块级元素div尽量少用，和table一样，嵌套越少越好ol有序列表:ul无序列表:很多人容易忽略dldtdd的用法:dl内容块dt内容块的标题dd内容可以这么写：标题内容1内容2例 2.4v字体样式：字体样式：Color:用于设置文字的颜色；Font-family:设置字体，多个用逗号隔开;Font-size:设置文字的大小；Font-style:设置文字样式；Font-weight:用于设置文字加粗样式；Font

16、-variant:设置英文字母大小写；Text-transform:设置英文字母大小写方式；Text-decoration:设置文本下划线；例2.5缩写：font:italicnormalbold12pt/18pt宋体v段落样式：段落样式：Line-height:设置文本行高；Letter-spacing:设置文字之间的间距；Word-spacing:单词之间的间距；Text-indent:文字缩进值；Vertical-align:设置内容垂直对齐方式；Text-align:设置文本对齐方式；White-space:设置空格字符处理方式，nowarp方式强制文本不换行，除非br例2.5v 圆角

17、样式设计圆角样式设计例3.1v IEIE捉迷藏捉迷藏捉迷藏问题主要出现在IE6中，当DIV应用稍显复杂时，常常出现的情况是在用于版本布局时，只要IE6中发现内容不能显示的情况，基本可都算是捉迷藏BUG；例3.2.1解决方案：在页面上的对象使用float浮动，最后在下面使用带有clear:both;的div对页面进行一些浮动上清理工作；可以给.layout使用固定宽和高；可以给.layout和.left使用position:relative；对.layout使用line-height属性；注意：应当在DIV的嵌套上遵循良好的习惯，尽量使用最少的层次嵌套来满足页面设计需要，使页面结构简单、实用、易

18、控制，尽可能的减少由于不必要的嵌套引来的连锁问题。例3.2.2v Ul Ul 的不同表现的不同表现列表1列表2列表3ulmargin:0;ulpadding:0;ulpadding:0;margin:0;v 高度不适应高度不适应高度不适应指的是当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层使用margin时。解决方案：对外层对象使用padding或border使外层对象重新计算自己的高度；在内层对象的上下各加一个空的div对象；固定外层对象宽度后overflow:hidden或float;在内层对象的上下各加一个空格 ；例3.4v IEIE断头台断头台内层非浮

19、动对象的高度作为总高度赋给了外层对象，从而将内层对象的内容切断。解决方案：把层非浮动的对象改成浮动对象；添加一个清除浮动内容的div;例3.5http:/validator.w3.org/W3CW3C验证地址：验证地址：较容易发生之错误1.所有标签都必需使用小写错误：正确：2.所有卷标内之属性都要有值且不可省略双引号或单引号错误：连结正确：连结若没有属性值就必需重复属性作为值,如：错误：正确：3.所有标签必须成对,若非成对需加上/在最后错误：米奇米妮布鲁托正确：米奇米妮布鲁托错误：正确：4.一个网页最少要包含的标签标题内容说明：通常中文网页以gb2312编码,需加上以下这行于与之间：5.若要显

20、示【】【&】的话,需以其它值输入例如要显示于网页中的话,需填入：<>若要显示&于网页中的话错误：&正确：&6.卷标顺序不可错乱错误：文字正确：文字7.批注文字中不可包含-错误：正确：8.图片卷标中都必需包含批注文字批注文字就是当你把鼠标指针移至图片上时会出现的文字：错误：正确：9.XHTML1.0文件标头加于第一行一般网页：框架页：10.JS或CSS调用的标签漏了type属性错误：、正确：错误：embedsrc=img/homePic.swfquality=high FAIL (the browser should render some flash content, not this) 11.FLASH代码验证例3.6结束结束