你的位置:首页 > 网页设计

[网页设计]企业站前端——总结


  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 ></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布局错位的问题?(未解决,望哪位知晓得大神指教)

 

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