前端html+css开发简介.pptxVIP

前端开发总结;HTML(Hyper Text MarkUp Language);HTML 代码规范 标签一定闭合，以免结构混乱 标签的嵌套顺序，虽然没有严格的规定好嵌套顺序，但是浏览器解析时会依据这个规则，且不同浏览器解析的规则不一样，总之严格执行此规则开发是浏览器解析规则是不会有差异的， 块级元素：div，table，td，dl，ul，ol 行级元素：p，li，span，dd，dt，h1--h6，hr 行内元素：a，label，span，br，img，em，b，strong，i，u，sup，sub，input 标签的合理使用，会给开发带来便利，（center ，form） 前台代码开发思维的转变，要与后台功能相结合 尽量不要给标签设置属性值，让css做这件事情，做到标签与属性分离，（table可以例外） ;html;html;CSS(Cascading Style Sheets );盒子模型 ;选择器 Id “#demo” Class “.demo ” 优先级 Css写法 . P {padding:10?5 5?10px;}//建议使用，易读、css文件小 . P { padding-top:10px; padding-right:5px; padding-bottom:5px; padding-left:10px; margin-right:-5px;//不建议使用负数 } //不建议使用:冗余，文件大 ;Css代码大小写统一，很多的浏览器解析出来的css 都是大写，但实际上在书写时都会采用小写，因为它易读，其实使用大写是没有问题的！但是不可以使用大写掺小写，这样在 firefox 不出来 空格的使用，在书写时一个空格代表往后一个子集，多于或是少于一个都是没有任何作用的，解析不出任何意思，可能还会报错 分号的使用， 两句css之间是必须要使用“;”间隔开的, 但是最后一句可以不用 注释要清晰，任何代码没有注释是不完整的，可读性不高 覆盖 .demo p { margin-left:10px;} .demo p.p_1 { margin-left:0px;} 注意书写的前后顺序，后面的时候覆盖前面的，且书写时前面怎么写，后面也要怎么写，不然覆盖是没有作用的； 继承 可以减少类名的定义，是代码更加简洁，性能更佳， .demo?.div p {width:5px;height:5px;} .demo .div?.p span {display:block;} .demo .div?.p_1 {width:5px;height:5px； ;面向对象的css写法 oocss (Object Oriented Cascading Style Sheet) 定义一个宽为300像素 高度为250像素 背景颜色为浅灰的box1，在创建一个宽为400像素 高度为250像素 背景颜色为浅灰的box2 .w_300{width;300px;} .w_400{width;400px;} .h_250{height:250px;} .bg_ccc{background:#ccc;} .bd_con{border:1px #000 solid;} Html: div class=”w_300 h_250 bg_ccc”/div div class=”w_400 h_250 bd_con”/div 核心思想：求同存异 优点：节约代码，易维护 命名规则可以自己定义，这里推荐一种 宽度定义 w_宽度 例如(w_200则表示宽度为200个像素的box); 高度定义 h_高度 例如(h_300 则表示高度为300个像素的box); .bd_1_dashed_ccc { border:1px dashed #ccc; }//将border属性定义为虚线; .bd_1_solid_ccc { border: 1px solid #ccc;; }//将border 属性定义为实线; Margin:mg_r_10{margin-right:10px;}, Padding: pd_r_10{padding-right:10px;}; Float: f_l{ float:left; },f_r { float:right;}  ;各大浏览器之间的差异;Ie6 双边距Bug 当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算，3px之差。个人觉得较好解决方法是避免float和margin同时使用；或者一左一右的浮动，中间间距自适应。 Ie6 下不支持 max-height ，max-width，min-width和min-height Ie6 下不支持 cs