CSSDIV制作规范与常见问题课件.ppt

ID：57153927

大小：1.60 MB

页数：22页

时间：2020-08-02

资源描述：

《CSSDIV制作规范与常见问题课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、D模块毕业设计知识点－－CSS+DIV制作规范与常见问题基本概念的回顾CSS+DIV制作规范CSS+DIV布局常见问题浏览器兼容性与BUG处理课程内容2CSS选择符类选择器：.textID选择器：#top标签选择器：phxaulliimg等HTML标签群选择器:h1,.text{font-size:15px;}并列关系，对多个CSS控制，用逗号分开派生选择符:#homeh1{color:#fff;}层级关系，对某范围内的CSS控制，用空格分开伪类选择符:a:link(有链接但没有访问过的状态）a:visited（访问后的状态）a:hover（鼠

2、标滑过的状态）a:active（鼠标按下时的状态）3CSS优先级算法A:行内样式；B：ID选择器个数；C：类选择器个数D：标签选择器，伪类个数优先级数=1000×A+100×B+10×C+D如：#maina=101那么.textimg=?#layout#main#left优先要大于#main#left4盒模型宽度计算边界重叠溢出5盒模型图解6浮动用在哪里？多列布局，图文混排文档流：独自占一行，左端对齐，从上到下依次排布浮动:元素上浮到另一层，并以上面第一个不浮动元素下方处，向左或者向右排列7清除浮动什么时候用到？避免被上层浮动元素覆盖（非IE6

3、)清除浮动的继承性对浮动元素分行如何使用直接写在要清除的元素上clear:both;在要清除的元素前添加语句

8显示与可见性显示display块元素block行内元素inline无none可见性visibility可见visible隐藏hidden9定位定位position绝对定位absolute相对定位relativediv2div1div3top:20pxdiv2left:20pxdiv3div1position:absolutediv2left:20pxtop:20px10基本概念的

4、回顾CSS+DIV制作规范CSS+DIV布局常见问题浏览器兼容性与BUG处理课程内容11制作步骤分析效果图结构建立层布局方案,画出草图计算各层的宽度高度以及定位的数值等分析各层需要实现的效果以及实现代码写出HTML页面写出CSS代码,并预览调整测试优化页面12CSS命名规范主导航：mainnav子导航：subnav页　眉：header页　脚：footer标　题：title边导航：sidebar标　识：logo标　语：banner菜单：menu子菜单：submenu注释：note内容：content搜索：search登陆：Login全局样式：gl

5、obal.css；框架布局：layout.css；样式布局：style.css;字体样式：font.css；链接样式：link.css；CSS命名要简洁易懂13代码可读性合理层次缩进CSS分类管理、字母排序是否分行代码注释HTMLCss/*maincss结束*/14CSS缩写border:1pxsolid#000;margin:5px05px10px;（上右下左）background:#f00url(bg.gif)no-repeatfixed00;font:bold12px20px宋体;15基本概念的回顾CSS+

6、DIV制作规范CSS+DIV布局常见问题浏览器兼容性与BUG处理课程内容16常见问题1浮动元素换行（宽度过大撑开，导致换行）内边距会增加宽度ul和from有默认边界，要清除布局混乱（多半是DIV嵌套错误，误删

)查看代码是否变色点击代码标签，看嵌套关系是否正确给DIV加边框，查看问题所在17常见问题2CSS设置后却不起作用拼写错误，漏写;{}，命名错误等被其他CSS覆盖，优先级不够出现奇怪的空白在浏览器内CTRL+A，看是否有多余的P或者BR仔细查看宽度，边距，填充是否准确依次删除内部元素，查看结果，找出哪里的问题18基本概念的回顾C

7、SS+DIV制作规范CSS+DIV布局常见问题浏览器兼容性与BUG处理课程内容19浏览器兼容性的测试测试浏览器包括：IE6,IE7,IE8,FF测试工具IETester20常见BUG的处理IE双边距将显示属性改为：inlineIE多字处理取消float属性不支持PNG图片使用JS文件处理2122

CSSDIV制作规范与常见问题课件.ppt

CSSDIV制作规范与常见问题课件.ppt

相关文章

相关标签