Div+css培训.ppt

三.CSS技巧与兼容问题 IE断头台 内层非浮动对象的高度作为总高度赋给了外层对象，从而将内层对象的 内容切断。 解决方案： 把层非浮动的对象改成浮动对象； 添加一个清除浮动内容的div; 例3.5 四.W3C验证注意的问题 / W3C验证地址： 较容易发生之错误1.所有标签都必需使用小写错误：HTML Title BODY FonT正确：html title body font2.所有卷标内之属性都要有值且不可省略双引号或单引号错误：a href=index.htm连结/a正确：a href=index.htm连结/a若没有属性值就必需重复属性作为值, 如：错误：frame noresize正确：frame noresize=noresize 四.W3C验证注意的问题 3.所有标签必须成对, 若非成对需加上/在最后错误：li米奇li米妮li布鲁托正确：li米奇/lili米妮/lili布鲁托/li错误：br正确：br /4.一个网页最少要包含的标签htmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title标题/title/headbody 内容/body/html说明：通常中文网页以gb2312编码, 需加上以下这行于head与/head之间：meta http-equiv=Content-Type content=text/html; charset=gb2312 / 四.W3C验证注意的问题 5.若要显示【】【】【】的话, 需以其它值输入例如要显示 于网页中的话, 需填入：lt; gt;若要显示于网页中的话错误：正确：amp;6.卷标顺序不可错乱错误：bp文字/b/p正确：bp文字/p/b7.批注文字中不可包含----错误：!--米奇实在是---太可爱了--正确：!--米奇实在是太可爱了-- 四.W3C验证注意的问题 8.图片卷标中都必需包含批注文字批注文字就是当你把鼠标指针移至图片上时会出现的文字：错误：img src=mickey.jpg正确：img src=mickey.jpg alt=这张图是米奇 /9.XHTML1.0文件标头加于第一行一般网页：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd框架页：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN /TR/xhtml1/DTD/xhtml1-frameset.dtd 四.W3C验证注意的问题 10. JS 或 CSS 调用的标签漏了 type 属性 错误：style/style、script/script 正确：style type=text/css /style script type=text/javascript/script 错误：embed src=img/homePic.swf quality=high !--[if !IE] -- object data=img/homePic.swf width=527 height=297 type=application/x-shockwave-flash param name=quality value=high / param name=pluginurl value=http://www.M/go/getflashpalyer/ FAIL (the browser should render some flash content, not this) /object !-- ![endif]-- 11.FLASH代码验证 例3.6 Company Logo CSS+DIV带来的好处： 使页面加载速度更快； 减小页面文件大小，可以降低网站的流量； 使网站符合WEB标准-W3C规范，减少不同浏览器兼容性问题； 设计代码与内容分离，易于页面修改和维护； 代码精练，有利于搜索引擎抓取，增加收录数量和权重； 在世界上越来越多人采用 Web 标准时，掌握CSS+DIV可以提高设计师的职场竞争实力。 CSS+DIV——崭新的“老技术” 什么是DIV+CSS DIV 全称 division 意为“区分”，CSS全称 Cascading Style Sheets 意为层叠样式表，这个布局中，DIV承载的是内容，而CSS承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方