一些小小栗子（备用）

PC端

HTML部分的实例

1、页面默认使用高版本浏览器内核

2、正经来说在QQ聊天窗口中发送链接地址，有时候会有网页面部分内容介绍

CSS部分实例

1、阻止页面选中事件，例如，当鼠标双击按钮时，会选中按钮的文字

/*取消双击选中文字*/
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;

2、一般网页端我会用的字体

font: 14px/1.5 Helvetica, Tahoma, Arial, "PingFang SC", STXihei, "Microsoft YaHei", "WenQuanYi Micro Hei";

3、文字内容超出部分隐藏，并用（...）显示

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

4、CSS3控制侧边栏滚动条显示效果；

/*滚动条，选择器为外层容器*/
.school_content::-webkit-scrollbar{width: 8px;}
.school_content::-webkit-scrollbar-track{background-color: #fff;border-left: 1px solid #ff8400;}
.school_content::-webkit-scrollbar-thumb{background-color: #ff8400;}
.school_content{overflow: scroll;overflow-x: hidden;}

可以用jquery.mCustomScrollbar.min.js提供更好的兼容行和更多的定制化
5、Select 标签，后面的小三角形，去掉；

.aselect{appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   background-color:transparent
   }

JS部分实例

1、js获取元素的各个值；

网页可见区域宽： document.documentElement.clientWidth;
网页可见区域高： document.documentElement.clientHeight;
网页正文全文宽： document.documentElement.scrollWidth;
网页正文全文高： document.documentElement.scrollHeight;
网页被卷去的高(ff)：document.body.scrollTop;
网页被卷去的高(ie): document.documentElement.scrollTop;
网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
某个元素的宽度：obj.offsetWidth;
某个元素的高度：obj.offsetHeight;
某个元素的上边界到body最顶部的距离：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）

2、js控制页面弹窗弹出；（现在为3张图片连续弹出，可以修改成同一张图片弹出n次之后不再弹出）

//这个需要引入jquery,
    //设置记录次数，起始值为1
    var Num = 1;
    //获取写好的html弹出窗样式
    var Obj = $("#img");
    //打开网站，第一个图片延迟3秒弹出
    ​Obj.delay(3000).fadeIn();
    //每次点击关闭（$(".close")为关闭按钮）之后不超过设定的值启动另一个计时器（在最底下）
    $(".close").click(function(){
        //隐藏当前弹窗  
        Obj.hide();
        //增加次数
        Num++; 
        //根据需求修改次数，      
        if(Num>3){            
         Obj.hide();
         return false;
        };       
        if(Num<=3){
         //按照图片的名字修改参数
         Obj.find("img").attr("src", alNum + '.png');
         //alNum值按照自己的需求改动，如果可以你能每次弹不同的内容
         //这里的意思是每隔7秒弹出图片，
         Obj.delay(7000).fadeIn();  
    }

3、js方法显示可剩余输入字数；
HTML部分

0/500

JS部分

/**
 *方法中obj为输入框的id，size为限制输入字数，msg为显示剩余字数的元素id 
 **/
function conWrite(obj, size, msg) {
    if(document.getElementById(obj) != null) {
        //已经输入字符
        var nLength = document.getElementById(obj).value.length;
        //剩余输入字符
        var length = size - document.getElementById(obj).value.length;
        document.getElementById(msg).innerText = nLength;
    }
}

M端

HTML部分

1、手机端常用头部

2、M端点击电话号码，自动拨打电话

400-900-xxxx

CSS部分实例

1、手机端字体

font-family: 'Consolas', 'Courier', 'Monaco', sans-serif,monospace;

2、手机端适配大小（媒体查询，rem随着html的字体大小而变化，当然还可以细化一些）
Ps : 下面的媒体查询是以设计图宽度为750为比例，初始html字体为30px，调试完成，并不包括所有尺寸，其实我没正式用过，只是没事儿调了一下而已。

@media screen and (min-width: 320px) {
   html {font-size: 12.8px;}
}

@media screen and (min-width: 360px) {
   html {font-size: 14.3px;}
}

@media screen and (min-width: 375px) {
   html {font-size:15px;}
}

@media screen and (min-width: 400px) {
   html {font-size: 16.5px;}
}

@media screen and (min-width: 440px) {
   html {font-size: 17.6px;}
}

@media screen and (min-width: 480px) {
   html {font-size: 19.2px;}
}
@media screen and (min-width: 540px) {
   html {font-size: 21.6px;}
}
@media screen and (min-width: 640px) {
   html {font-size: 25.6px;}
}
@media screen and (min-width: 720px) {
   html {font-size: 28.8px;}
}
@media screen and (min-width: 750px){
   html {font-size: 30px;}
}

JS部分

1、rem适配

window.onload = function(){
  (function () {
        var width = document.documentElement.clientWidth;
        var styleNode = document.createElement("style");
        styleNode.innerHTML = "html{font-size:" + (width / 16) + "px!important}";
        document.head.appendChild(styleNode);
  })();
}

这里是用16（也就是用正常字体16px）作为基数来计算font-size，并给html赋值；
用less写的话需要配合考拉，并且less文件的第一行必须声明初始rem；
以设计图宽度为750px为例，
那么less文件第一行必须声明@rem:46.875;，
值的来源为750/16 = 46.875
下面应用的话height: 660/@rem;
这里的660为在PS或其他软件中量出设计图中元素的实际高度。

2、判断手机端平台并调用APP方法

//这个是跟公司自己的APP配合时用到的
//生成json传值给APP
var jsonO = {
    "type": 9,
    "id": 0,
    "userInfo": {
        "uid": data.uid,
        "ticket": data.ticket,
        "professionid": data.professionid,
        "phone": data.phone
   }
}
//JSON.stringify这个如果不用的话IOS能接收，ANDROID不行
var jsonStr = JSON.stringify(jsonO);

//判断平台调用方法（方法名跟APP人员协商）
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    window.webkit.messageHandlers.showSendMsg.postMessage(jsonStr);
    //这里的调用IOS的方法showSendMsg
}else if(navigator.userAgent.match(/android/i)){
    window.android.buyNew(jsonStr);
    //这里调用android的方法buyNew
}