1.插入图片时，图片必须用div包裹起来，给div固定宽高，图片设为max-width:100%; 原因：图片需要在后期后台添加，而你永远都不知道客户给你上传的图片是什么样子？什么大小的？如果客户上传的图片大于你原有的图片，你所有的样式都会疯狂的 手机端图片的自适应问题： 解决方法一：通过JS获取比较大的一边，设置为100%，让其余的部分自适应，，尽量保证图片全部显示；为避免横向拉伸，可以设置图片水平居中。 解决方法二：后台程序上传图片时裁剪图片 2.使用图片轮播的时候，注意多个轮播代码是否会冲突 3.hover的效果必须提前定好，包括点击之后最好有个标记提醒用户当前是哪个页面，这个样式最好也提前定好，后期交给程序添加样式 4.会更换的背景图片的样式最好写成行内样式 原因：便于程序后期循环 5.后台程序需要循环取出数据的地方，样式要写的特别小心，比如： ul li的循环，li定的class最好一样，利于后台循环，调整样式，当然，最好li中不要定class 7.除了首页，最好所有的header和footer都是共用一个公共样式，方便后台程序 8.banner没有特殊情况，最好是切成图片，利于后期更换，还有 9.浮动问题：在设置完浮动后，马上在其父级清除浮动 10.h1标签只用于标题，尽量少用
11.透明： a.几乎兼容所有浏览器的透明属性代码： opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。 b.当父元素设置透明后，子元素文字也透明解决办法： 另外写个div作为透明层，文字放在其同级div里，用position实现重叠覆盖的效果 12.个别页面无滚动条，造成页面整体往右偏移的问题： 单独为IE6，7设置固定高度，在IE6，7下，内容多于高度时会自动撑开，增加高度；或者设置overflow：scorll；13：手机端： A。图片高度100%，水平居中 B。百分比的情况下使用固定字体，比如在宽为640的屏幕下字体大小为30px，那么在320宽度的手机屏幕，字体大小则为15px；或者使用rem字体，按body的字体大小进行换算，没有继承性。 C。盒子模型，使用boder-box，便于布局 D。CDN加载时间长，不利于网页性能优化，不建议使用 E。SVG可以生成背景图片，字体图标，IE9以上浏览器兼容，（AI可生成SVG图片） F。z-index，定位优先级：fixd>relative>absulote G。二级菜单hover时画面闪烁的问题，加一个stop（true，true） H。find，找它所有的子元素；childrean找它当前的子元素 I。手机端列表页，图片的高宽固定问题1：background-position: center;在火狐中无效代码：<style type="text/css" scoped="" > .banner{width: 100%; background-position: center center;background-attachment:fixed;}</style><div class="banner" style="background:url('img/banner1.png') no-repeat;"></div> 问题描述： background-position: center center;在火狐中无效，按照网友的回答，添加了background-attachment:fixed;这句，同样无效；但是若我改成background:url('img/banner1.png') no-repeat center;则在火狐中能有效居中。目前还不知道原因问题2：浮动问题 a.问题描述：两个div在同一行，只设右浮动，在IE下出现问题 解决办法：同时设置左右浮动，并在其父级清除浮动 b.问题描述：ul li的浮动问题，最后一个li的margin-right【IE9以下不支持last-child属性】 解决办法：后台程序判断是第几个li，给最后一个li加上一个class，设置margin-right：0；或者运用after伪类选择器改变最后一个li的样式
问题3：IE7、IE9及以上现代浏览器都兼容，但IE8布局错位的问题？（未解决，望哪位知晓得大神指教）
内容未结束。。。静待更新，若有更多经验及见解，欢迎评论留言
新闻热点
疑难解答
