工作笔记1

tyy扬

已于 2022-11-22 16:41:36 修改

阅读量166

点赞数

文章标签： css 前端 bootstrap

于 2022-11-22 16:16:02 首次发布

本文链接：https://blog.csdn.net/qq_38361229/article/details/127984801

版权

设置字体颜色为渐变色：

background: linear-gradient(to bottom, #fd850b, #f43d01);
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;

http://www.w3school.com.cn/cssref/pr_text-overflow.asp
text-overflow:clip; 修剪文本。
text-overflow:ellipsis; 显示省略符号来代表被修剪的文本。
http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

overflow:visible;		// 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden;		// 内容会被修剪，并且其余内容是不可见的。
overflow:scroll;		// 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto;			// 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit;		// 规定应该从父元素继承 overflow 属性的值。

如何设置css属性为position:fixed后如何让内容居中：left:0;right:0;margin:0 auto;

text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 三者同时应用才会使得文字内容溢出时出现…有效

移动端头部需要加的META标签
META标签大全
控制移动端页面的收缩等，必加在head区域的代码：

css文件前声明： @charset “utf-8”;
h5屏蔽页面中数字当手机号的问题：在head中加上
标准的电话号码格式：1-408-555-5555 点击后自动打开电话功能
邮箱：Email

样式重写：select、option、checkbox

button按钮统一样式：
height:40px;line-height:40px;border-radius:8px;font-size:18px;letter-spacing:1px;

响应式网页布局的规范、手机开发的注意事项
bootstrap中，那些栅格布局系统、img-responsive等的原理代码，学习其中值得在网页中借鉴的东西

shareSDK，分享功能
show、hide、slideUp、slideDown、fadeIn、fadeOut… 各种显示隐藏的方式
fade效果不佳
outline、box-shadow、border-shadow、text-shadow
box-shadow: 2px 4px 6px #000;
2px : 表示水平阴影的位置
4px : 表示垂直阴影的位置
5px : 表示模糊距离
#000 ：表示阴影的颜色（#000 黑色）

background-size
transition transition: all 0.3s;
transform transform: scale(1.2,1.2); transform: rotate(180deg);

个人设置

textarea{resize:none;}

/*灰色的遮罩层*/
header,section,.headerBorder,.lkRegister{
    -webkit-filter: blur(3px);
}
.mask{
    position:fixed;
    color:#fff;
    top:0;
    width:100%;
    z-index:10000;
    background-color:rgba(0,0,0,0.8);
    height:100%;
}

JS控制点击跳转事件：
①οnclick=“javascript:window.location.href=‘URL’”
②οnclick=“location=‘URL’”
③οnclick=“window.location.href=‘URL?id=11’”
☆如果页面中有frame可以将在location前面添加top.mainframe.frames[‘right_frame’].location

Javascript跳转页面和打开新窗口等方法
1.在原来的窗体中直接跳转用
onClick=“window.location.href=‘你所要跳转的页面’;”

2、在新窗体中打开页面用：
οnclick=“window.open(‘你所要跳转的页面’)”

3、返回上一页（本地测试无效，服务器上可用）
window.history.back(-1);

<a onclick="javascript:history.back(1);" href="#">返回</a>
<a href="javascript:history.go(-1)">返回上一页</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一页</a>

// 控制placeholder的颜色字体：
::-webkit-input-placeholder{
    color:#fff;
}
:-moz-placeholder{
    color:#fff;
}
::-moz-placeholder{
    color:#fff;
}
:-ms-input-placeholder{
    color:#fff;
}

//验证手机号
//var regPhone=/^1[34578]\d{9}$/;
		function phoneCheck(){
		    var phone= $.trim($("#telephone").val());
		    var regPhone=/^1[34578]\d{9}$/;
		    if(!phone){
		        $('.msg-box').show().html("手机号不能为空");
		        return false;
		    }else if(!regPhone.test(phone)){
		    	$('.msg-box').show().html("手机号格式不正确");
		        return false;
		    }else{
		    	phoneIf(phone);//校验该手机号是否已经注册
		    	$('.msg-box').hide();
		        return true;
		    }
		}

如何将unix时间戳转换为日期格式：
https://zhidao.baidu.com/question/1367346248447601179.html

//第一种
function getLocalTime(nS) {     
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
}     
alert(getLocalTime(1293072805));
//结果是2010年12月23日 10:53

//第二种    
function getLocalTime(nS) {     
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
}     
alert(getLocalTime(1293072805));

//第三种  格式为：2010-10-20 10:00:00
    function getLocalTime(nS) {     
       return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
    }     
    alert(getLocalTime(1177824835));

/**
   * @author tyy666@aliyun.com
   * @description 将base64编码转换为二进制序列
   * @param {String}
   * @return {String}
   */
  function base64ToBin(str) {
    var bitString = "";
    var tail = 0;
    for (var i = 0; i < str.length; i++) {
      if (str[i] != "=") {
        var decode = code.indexOf(str[i]).toString(2);
        bitString += (new Array(7 - decode.length)).join("0") + decode;
      } else {
        tail++;
      }
    }
    return bitString.substr(0, bitString.length - tail * 2);
  }

/*大型PC屏幕>=1200px*/
@media screen and (min-width:1200px){
    
}
/*普通PC屏幕1200px-992px*/
@media screen and (max-width:1199px) and (min-width:992px){
    
}
/*PAD屏幕*/
@media screen and (max-width:991px) and (min-width:768px){
    
}