页面制作的一些记录

记录一下平时用到的css相关的技巧。


1.使用html5的标签兼容ie8-浏览器

< !--[if lt IE 9]> 
 < script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> < /script> 
<![endif]-->

2.建议升级代码

 <!--[if lt IE 8]>
<div class="g_tips">
    <p>已经有超过90%的用户使用更高版本 <a target="_blank" title="下载chrome" href="http://www.google.com/chrome/" >Google Chrome</a > 或  
<a target="_blank" href="http://www.microsoft.com/zh-cn/download/ie.aspx?q=internet+explorer">Internet Explorer </a >  
体验到了更精彩的页面,你还不试试?</p>
</div>
<![endif]-->
< style>
.g_tips{background:#FFF691;color:#010101;text-align:center;height:40px;line-height:40px;font-family:'STHeiti','5fae8f6f96c59ed1'}.g_tips a{color:#676767;padding:0 2px;zoom:1}
</style>

3.兼容一些带壳浏览器的ie内核

 < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4.css省略号

white-space: nowrap;
text-overflow: ellipsis;

5 结合了YUI的css reset 和网上其他的综合一下 省得每次都去扒拉

	html {
    color:#858585;
    background:#FFF
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0
}
body {
    line-height: 1.5;
    font: 12px/100%  tahoma,'Microsoft YaHei',arial,'Hiragino Sans GB','5b8b4f53',sans-serif;
}

fieldset,img {
    border:0
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal
}
ol,ul {
    list-style:none
}
caption,th {
    text-align:left
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal
}

input,textarea,select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    *font-size:100%
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}
.yahei{font-family: "microsoft yahei";}
.hide{display: none!important;}
.left{float: left;}
.rel{position: relative;}

6.滚动的时候返回到顶部

(function(){
            var j_win = $(window);
            var winHeight =j_win.height();
            var topBtn = $("#toTopBtn");
            var isShow = false;
            topBtn.bind("click",function(){
                j_win.scrollTop(0);
            });
            j_win.bind("scroll",function(){
                if(j_win.scrollTop()>300){
                    if(!isShow){
                        topBtn.removeClass("hide");
                        isShow=true;
                    }
                }else{
                    topBtn.addClass("hide");
                    isShow=false;
                }
            });
        })();

7.table的样式只有一条格线的样式

.table-box table{border-collapse: collapse;border-spacing: 0;margin:10px 0 0 0;}
.table-box td{border:1px solid #e3e3e3;padding:2px 10px;}

8 Bootstrap编码规范

判断浏览器类型的js

(function(){  
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ; //判断是否IE   
var isFF = userAgent.indexOf("Firefox") > -1 ; //判断是否Firefox  
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1 ; //判断是否Safari  
var isChrome = userAgent.indexOf("Chrome") > -1 ; //判断是否Chrome  
		 
})();

select完美兼容

select{height:22px; line-height:18px; padding:2px 0}

flex

.row {
   display: -moz-box;
  display: -webkit-box;
  display: box;
  display: flex;
  -moz-flex: flex;
  flex-flow: row;
}
.item{
-webkit-box-flex: 1;
  -moz-box-flex: 1.0;
  -webkit-box-flex: 1.0;
  box-flex: 1.0;
  flex: 1;
  }

移动端的rem,以及一些样式reset

html {
    font-size: 50px;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
    min-width: 320px;
    overflow-x: hidden
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: .28em;
    line-height: 1;
    color: #333;
    background-color: #f0efed
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-weight: 500;
    line-height: 1.1
}
input,button,select,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

a {
    color: #06c1ae;
    text-decoration: none;
    outline: 0
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

js实现粘贴copy

http://zeroclipboard.org/下载地址2.0.2,支持ie8  中文文档

demo地址

对于网站字体设置,本文给出以下意见:

移动端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

 

pc端(含Mac)项目:

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

 

移动和pc端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

http://ued.ctrip.com/blog/web-page-font-settings-did-you-know.html

千分位正则:

千分位正则:/B(?=(d{3})+$)/g

深度克隆

/**
 * Deep clone an object. Faster than JSON.parse(JSON.stringify()).
 *
 * @param {*} obj
 * @return {*}
 */

function deepClone (obj) {
  if (Array.isArray(obj)) {
    return obj.map(deepClone)
  } else if (obj && typeof obj === 'object') {
    var cloned = {}
    var keys = Object.keys(obj)
    for (var i = 0, l = keys.length; i < l; i++) {
      var key = keys[i]
      cloned[key] = deepClone(obj[key])
    }
    return cloned
  } else {
    return obj
  }
}

ajax文件上传

function fileUpLoad(fileEle,url) {
     
        var fileObj = fileEle.files[0]; // js 获取文件对象
        // FormData 对象
        var form = new FormData();

        form.append(fileEle.name||"uploadFile", fileObj); // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", url, true);
        xhr.setRequestHeader("enctype", "multipart/form-data");
        xhr.onload = function () {
            //fileLoadStatus=0;
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var serverData = JSON.parse(xhr.responseText);
                } catch (e) {
                    console.log(e);
                    console.log("JSON.parse错误");
                    xhrError();
                }
                xhrSuccess(serverData);
            } else {
                xhrError();
            }
        };

        //xhr.upload.addEventListener("progress", progressFunction, false);
        xhr.send(form);
        //fileLoadStatus=1;
        return xhr;
    }
    function xhrError(errmsg){
        alert(errmsg||'文件上传失败');
       
    }
    function xhrSuccess(serverData){
        if(serverData.success==true){
            percentageDiv.html("100%");
            fileLoadStatus=2;
            if(successFunc&&typeof successFunc==="function"){
                //successFunc(serverData);
            }
        }else{
            xhrError(serverData.errorMsg);
        }
         
    }
本文标题:页面制作的一些记录
本文链接:https://56way.com/p/73.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。