企业站前端——总结

　　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布局错位的问题？（未解决，望哪位知晓得大神指教）

 

内容未结束。。。静待更新，若有更多经验及见解，欢迎评论留言