资讯专栏INFORMATION COLUMN

写网页时拿起就用的小技巧

econi / 1552人阅读

摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。

1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。
content-box:在规定一个框的宽高之外给这个框加内边距和边框。
border-box:(textarea和select默认值)在规定的一个框的宽高之内给这个框加内边距和边框。

/*看个人习惯而用,但一般标签默认属性是content-box,除textarea,select*/ 
   -moz-box-sizing: content-box; 
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
2. 美化input框
/*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*去除点击出现轮廓颜色*/
  outline: none;
  -webkit-appearance: none; /*去除系统默认的样式,苹果手机上的阴影*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的颜色*/
  /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/    
}
3. 美化textarea文本域
textarea{
    /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/
     /*去除点击出现轮廓颜色*/
      outline: none;    
      /*如果有需要,去掉右下角的可拉伸变大小的图标和功能*/
      resize: none;
      /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/
}
4. 改变placeholder的字体颜色大小
input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

5. 美化select
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  border: solid 1px #333;

  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("小箭头图片路径") no-repeat right center transparent;

  /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  padding-right: 14px;

  /*去除点击出现轮廓颜色*/
  outline: none;
}
6. 美化button按钮
button{
    /*本身有2px的边框,一般的button都不需要边框*/
    border: none;
    /*本身有的背景色,可以用其他颜色取代*/
    background: #333;
    /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/
}
7. 美化单选框、多选框或者是上传文件按钮
/*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式,这个时候要用到label标签关联,然后隐藏input标签,直接给label标签样式就好了。选中label就是选中了此标签*/


  
8. 多出文字用省略号表示
/*单行文字的时候*/
white-space: nowrap; /* 强制不换行 */
overflow:hidden; /*内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ,需与overflow:hidden;一起使用*/
/*多行文字的时候*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行 */
-webkit-box-orient: vertical;
9. 选择器-选择非第一个子元素
HTML:
    
方法一: div > span :not(:first-child) { margin-left:10px } 方法二:兄弟元素选择器 div > span + span { margin-left:10px } HTML:

方法: div > * :not(:first-child) { margin-left:10px }
10. jQuery限制字符字数的方法
$(document).ready(function(){
    //限制字符个数
    $(“.zxx_text_overflow”).each(function(){
        var maxwidth=23;
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+’…’);
        }
    });
});
11. css页面点击文字出现蓝色底色去掉方法
-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit浏览器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 早期浏览器 */
user-select: none;
12. 在遇见图标的垂直位置很难调整的时候可以用这个属性
vertical-align: 30%;
vertical-align: middle;
13. 如何让一个div在页面中上下左右居中
div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
}
14. css中设置table中的td内容自动换行,边框线合并为一条
1. 把表格的sytle的table-layout: fixed;
(就是表格固定宽度,就是表格既要自适应他外面的容器,也不要撑出去)
2. 然后设置td的word-wrap: break-word;
3. table边框线合并为一条:border-collapse: collapse;
15. css让背景居中并充满整个屏幕
body{
    background: url("../img/jxs-banner.png") no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
16. H5页面点击按钮的时候,屏幕总会闪动一下
-webkit-tap-highlight-color:rgba(0,0,0,0) 
//webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节。
17. 解决苹果手机上input输入框的光标高度变化问题
问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部。

方法1:将line-height的值设置为跟字体大小一致;如果高度达不到,用padding去撑;
方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的值以保证文字垂直居中;这里要注意一下,如果在reset的样式文件中有设置line-height等值,请进行line-height的重置,可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。
18. js
// 在js中写的返回键
onclick = "history.go(-1)";

// 强制刷新页面
window.location.reload(true);
19. 判断用户使用的是手机还是电脑访问页面,并跳转到相应页面

20. 判断用户使用的是苹果手机还是安卓
 
 
21. cjs实现字数限制,超出部分省略号
// 只显示20个字
function LimitNum(txt,idName) {
    var str = txt;
    str = str.substr(0,20) + "..." ;
    var id=document.getElementById(idName);
    id.innerText=str;
}   
22. jq实现点击更多展开,点击收起缩回
假设有很多个更多和收起功能需要展示在同一个页面
// 遍历所有的更多按钮
$(".more").each(function(){
      $(this).click(function(){
      // 当点击当前的更多按钮时,找到上N级的,或者是同级,反正是要展开的div切换类去实现展开或收回
        $(this).parent().prev().toggleClass("show_more");
        // 首先在每个更多按钮中加一个自定义的属性status = "true"
        if($(this).attr("status") == "true"){
            // 当第一次点击当前更多的时候会展开,“更多”的按钮文本会变成“收起”文本。
          $(this).html("收起 ∧");
             // 在赋值给status为false
          $(this).attr("status","false");
        }else{
          $(this).html("更多 ∨");
          $(this).attr("status","true");
        }
      });
  });
  
23. jquery 点击元素以外任意地方隐藏该元素的方法
$(".menu").on("click", function(e){
  $("#menuBox").toggle();
  $(document).on("click", function(){
      $("#menuBox").hide();
  });
  e.stopPropagation();
}); 
$("#menuBox").on("click", function(e){
       e.stopPropagation();
 });
或

$("body").click(function(e) {
   if(e.target.id != "btn" && e.target.id != "overlay")
      if ( $("#overlay").is(":visible") ) {
         $("#overlay").hide();
      }
})   
24. 取到页面中所有的checkbox怎么做
var doc = document,
    domList = doc.getElementsByTagName("input"),
    checkBoxList = [],
    len = domList.length;
while (len--) {
    if (domList[len].type === "checkbox") {
        checkBoxList.push(domList[len]);
    }
}
25. jquery 如何选取除某个元素外的所有元素
$("div.content *").not(".keep"); 
// 表示content类的div下除keep类以外的所有元素;另外,注意*表示所有元素
26. 一个多处查看更多和收起的实例

    
    
    
        
        Document
        
    
    
    
姓名 年龄 备注 名言
zhangsan 14 这部分内容一一一会被省略一部分哦,看不了完整了咯,这里才是完整的,哈哈哈哈哈哈哈哈查看更多 努力让自己变更好
zhangsan 14 这部分内容二二二会被省略一部分哦,看不了完整了咯,这里才是完整的,哈哈哈哈哈哈哈哈查看更多 天道酬勤
zhangsan 14 这部分内容三三三会被省略一部分哦,看不了完整了咯,这里才是完整的,哈哈哈哈哈哈哈哈查看更多 心如止水
27. 点击按钮置顶
$(window).scroll(function(){  
    if ($(window).scrollTop()>100){  
        $("#below").fadeIn(600);  
    }  else  {  
        $("#below").fadeOut(600);  
    }  
});  
$("#below").click(function(){  
    $("body,html").animate({scrollTop:0},1000);  
    return false;  
});
28. 禁止蒙层底部页面跟随滚动
解决思路:我们要阻止页面滚动,那么何不将其固定在视窗(即 position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。 当然还有一些细节要考虑,将页面固定视窗后,内容会回头最顶端,这里我们需要记录一下,同步 top 值。
示例代码:
let bodyEl = document.body
let top = 0
function stopBodyScroll (isFixed) {
  if (isFixed) {
    top = window.scrollY
    bodyEl.style.position = "fixed"
    bodyEl.style.top = -top + "px"
  } else {
    bodyEl.style.position = ""
    bodyEl.style.top = ""
    window.scrollTo(0, top) // 回到原先的top
  }
}
30. 为什么CheckBox明明是checked="checked"也不显示选中状态
请把$("input").attr("checked","true")
换成
$("input").prop("checked","true");
31. 点击复制按钮复制链接
$("#copyBtn").on("click",function(event){
    var link = $(event.currentTarget).prev("input");
    link.select();
    document.execCommand("Copy");
    layer.msg("复制成功,快去告诉你的小伙伴吧~");
})
32. 自动生成微信二维码
下载jquery.qrcode.min.js,引入文件

var uri = $("#copyLinkText").attr("data-weixin");
    $("#wxCode").qrcode(uri);
    
    function toUtf8(str) {    
        var out, i, len, c;    
        out = "";    
        len = str.length;    
        for(i = 0; i < len; i++) {    
            c = str.charCodeAt(i);    
            if ((c >= 0x0001) && (c <= 0x007F)) {    
                out += str.charAt(i);    
            } else if (c > 0x07FF) {    
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            } else {    
                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            }    
        }    
        return out;    
    }   
  // 微信二维码中间加logo图,给二维码添加一个自定义的logo,会让你的二维码看上去更专业,默认的Jquery.Qrcode是不支持添加自定义Logo的,这里比较简单的实现方案就是,针对每个二维码添加一个img标签,让img在二维码区域相对居中显示即可。
  
  //控制Logo图标的位置
  var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; 
  $("#qrCodeIco").css("margin", margin);
33. 分享到微博
$(".share_weibo").on("click",function(){
    var weibo_url = "http://service.weibo.com/share/share.php?";
    var p = {
        url: uri += "?f=3",
        title: desc,
        /*分享标题(可选)*/
        // pic: item.Cover,
        /*分享图片的路径(可选)*/
        searchPic: "true"
    };
    var s = [];
    for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
    }
    weibo_url += s.join("&");
    window.open(weibo_url);
});
34. 分享到QQ空间
$(".share_qzone").on("click",function(){
        var qzone_url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
        var p = {
            url: uri += "?f=4",
            showcount: "1",
            /*是否显示分享总数,显示:"1",不显示:"0" */
            desc: desc,
            /*默认分享理由(可选)*/
            summary: "分享注册送现金红包啦!快来注册吧~",
            /*分享摘要(可选)*/
            title: "信诚恒通新用户注册",
            /*分享标题(可选)*/
            site: "信诚恒通",
            /*分享来源 如:腾讯网(可选)*/
            // pics: item.Cover,
            /*分享图片的路径(可选)*/
            style: "203",
            width: 98,
            height: 22
        };
        var s = [];
        for (var i in p) {
            s.push(i + "=" + encodeURIComponent(p[i] || ""));
        }
        qzone_url += s.join("&");
        window.open(qzone_url);
    });
35. vue设置header头
Vue.http.headers.common["X-CSRF-TOKEN"] = document.querySelector("meta[name=csrf-token]").getAttribute("content");
    
36. 换行,不换行,字间距

37. 获取验证码及其验证码倒计时
JS:
    //发送验证码函数
    function sendsms(e) {
        /*发送验证码功能*/
        countdown(e); //若发送验证码成功,则调用倒计时函数
    }
    //倒计时函数
    var time = 60;

    function countdown(e) {
        if (time == 0) {
            //e.setAttribute("disabled",false);         对没有disbaled属性的span标签,此方法无效
            e.setAttribute("onclick", "sendsms(this)");
            $(".send-code").html("获取验证码");
            time = 60;
        } else {
            //e.attr("disabled",true);                  对没有disbaled属性的span标签,此方法也无效
            //e.setAttribute("onclick", "");            这样写也可以
            e.removeAttribute("onclick");
            $(".send-code").html(time + "秒后重新获得");
            time--;
            setTimeout(function () {
                countdown(e)
            }, 1000)
        }
    }  
    
 HTML:
 
 获取验证码  
38. 单页面和多页面应用

39. vue怎么实现点击li,li增加一个class,其他的li去掉这个class
  • {{item.title}}
new Vue({ el:".list", data:{ current:0, items:[ {title:"item1"}, {title:"item2"}, {title:"item3"}, {title:"item4"} ] }, methods:{ addClass:function(index){ this.current=index; } } })
40. vue $refs的基本用法
41. css设置滚动条样式
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84398.html

相关文章

  • 网页时拿起就的小技巧

    摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...

    rubyshen 评论0 收藏0
  • 网页时拿起就的小技巧

    摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...

    QiShare 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    dailybird 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    hellowoody 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    wwolf 评论0 收藏0

发表评论

0条评论

econi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<