"编程是人类唯二能掌握的魔法",另一个我猜应该是生物科技。 

这事对我来说属于捏泡泡纸,摆烂和预防痴呆的良好手段。 

CSS常用备忘

自定义字体

@font-face{ 
font-family: SC-Regular;
src: url(SC-Regular.woff2);
font-weight: normal;
}

会看到一个现象:页面结构和图片出来了,但文字区域是空白的,加载过程比较快的时候很像"闪烁"。这种现象被称之为 FOIT (Flash Of Invisible Text)。解决方案目前还没查到更成熟的,暂时取消自定义字体了。



transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover:active 或者通过 JavaScript 实现的状态变化。

transition: background 1s,background-color 0.6s;
-webkit-transition: background 1s,background-color 0.6s;


var()

函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)示例:

:root {
  --main-bg-color: pink;}body {
  background-color: var(--main-bg-color);}


背景后元素模糊效果

backdrop-filter: blur(10px);


嵌套iframe 前后台分离跨域问题

<iframe src="https://www.huaign.com" frameborder="0" marginwidth="0" marginheight="0"
 scrolling="no" width="100%" height="5000px" allowtransparency="true"></iframe>


统计文章字数

{template:footer}
{php}
$diycontent=trim(TransferHTML($article->Content,'[nohtml]')); //先过滤一下html标签
echo iconv_strlen($diycontent, 'utf-8'); //统计字数 iconv
{/php}



带着具体问题实操依旧是适合我的学习方法,优点是快,而且牢靠,缺点就是不成体系,会有遗漏。

但对我来说已经够了。

体系可以在量变之后逐步建立,而且可以有了属于自己的风格后再“认门儿”,继续规整体系,我称之为带艺投靠,


暂时实在是没什么笔记可作,一是入门时间尚短,二是前端的东西对我来说,门槛子依旧低于CG渲染和在工地吃灰,而且没有甲方,随心所欲写的很烂也没关系,搞得开心比较重要。


总结起来,这事,没什么长远计或者目的,就是一个安慰剂,是个奶嘴,是个痒痒挠,是丧失了打游戏的能力之后的又一个解闷的事情,跟钓鱼盘串,一个功能。

感谢我有这么一个兴趣爱好,可以很好地分散抑郁情绪下的注意力。


最重要的,这个独立博客,对我来说算是一个生平流水账,尽量不去谨慎写字,要水一点,这样才好多留下点东西。

假如,万一,有谁想在我百年之后窥探一下一个旧人类的一生,我希望它是个很好的载体。


把童年,青年,中年,老年的每个阶段都用事情穿插串联起来,想一想,真是他妈的乏味又有趣,有趣的是这件事,乏味的是记录者本人的人生。毕竟,无用软件的log文件,在大部分时间,都属于垃圾文件。


对了,在知乎上看到了和我有类似想法的设计同行老哥,老哥说他的网站充了十几年的域名和服务器,一开始是做为简历型网站,后来得知自己患了绝症,转而把网站当做生平纪念,以期他的孩子,在未来,能通过一些文字,了解到父亲是个什么样的人。

不过看评论区发现,大概老哥发完帖子,转年人就走了,可惜的是,从他网站文章列表上看,简历改纪念这件事,他没有来得及落实。把老哥网站留言链接留在这,纪念这个不认识的、前设计从业同行老哥。

更新于2022/6/8 20:53:53 WED.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title></title>
</head>
<body>
<input type="button" value="红">
<input type="button" value="蓝">
<input type="button" value="绿">
<script type="text/javascript">
var cookie = {
  add: function(key, val, h) {
    var str = key + "=" + escape(val);
    if (h > 0) { //如果h为0的时候就是不设置过期时间,浏览器关闭的时候cookie自动删除
      var data = new Date();
      var ms = h * 3600 * 1000;
      data.setTime(data.getTime() + ms); //设置了世界时间
      str += "; expires=" + data.toGMTString(); //根据世界时间,把 Date 对象转换为字符串
      document.cookie = str;
      alert("添加成功");
    }
  },
  get: function(key) {
    var arrStr = document.cookie.split("; ");
    for (var i = 0; i < arrStr.length; i++) {
      var temp = arrStr[i].split("=");
      if (temp[0] == key) {
        return unescape(temp[1]);
      }
    }
  },
  del: function(key) {
    var data = new Date();
    data.setTime(-10000);
    document.cookie = key + "=a; expires=" + data.toGMTString();
 
  },
  getAll: function() {
    var str = document.cookie;
    var arr = document.cookie.split(";")
    var valArr = []
    if (!str) {
      alert("没有任何cookie");
    } else {
 
      for (var i = 0; i < arr.length; i++) {
        var temp = arr[i].split("=");
        valArr.push("key:" + temp[0] + ", val:" + unescape(temp[1]));
      }
      return valArr;
    }
  }
};
 
var btn = document.getElementsByTagName("input");
 
btn[0].onclick = function() {
  document.body.style.background = "red";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
 
 
btn[1].onclick = function() {
  document.body.style.background = "blue";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
 
btn[2].onclick = function() {
  document.body.style.background = "green";
  var se = document.body.style.background;
  cookie.add("background", se, 24);
}
if (cookie.get("background")) {
  document.body.style.background = cookie.get("background");
}    
</script>
</body>
 
</html>