2015年12月
CSS常用代码
相关：
推荐大家使用的CSS书写规范、顺序 顺序涉及浏览器渲染重绘等问题，请另查
CSS常用代码
CSS实现水平垂直居中的1010种方式（史上最全）
30个你必须记住的CSS选择符
普通table表格样式及代码大全(全)
w3c标准自适应高度height100%不起作用的问题分析
通过设置CSS position 属性来固定层的位置
CSS3 基础知识
整理：子容器垂直居中于父容器的方案
[教程] CSS入门4：css选择符
Meta 标签与搜索引擎优化
跨浏览器图像灰度(grayscale)解决方案
一行css代码搞定响应式布局
css控制默认滚动条样式
30秒CSS中文版
这种 PNG 图片前端如何实现动态图展示
入研究-webkit-overflow-scrolling:touch及ios滚动
https://www.cnblogs.com/xiahj/p/8036419.html
https://aotu.io/notes/2020/06/08/momentum-scrolling/
黑暗模式
苹果公司在谈到黑暗模式时说它时一种有助于你专注工作的吸引人的新外观
同事也是一种全方位的对眼睛友好的无干扰环境
谷歌则从使用角度回答，生成黑暗模式可以显著降低用电量
提高低视力用户和对强光敏感用户的能见度，并且可以让任何人在低光环境下轻松的使用设备
https://segmentfault.com/a/1190000020899202
灵活运用CSS开发技巧(66个实用技巧，值得收藏)
响应式（RWD） = 所有设备的代码是一样的
自适应（AWD）= 不同设备的代码是不一样的
iPhone适配
https://aotu.io/notes/2017/11/27/iphonex/index.html
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
div {
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
background: #fff;
}
文字超出换行的一种处理
padding: 6px;
background: bisque;
text-align: left;
margin-bottom: 2px;
table中的td设置固定宽度，没有效果
twitter 网站是怎么根据 windows10 的“颜色”来改变网页背景颜色？
prefers-color-scheme
以上测试 windows : 个性化->颜色->选择默认应用模式
多图实现动画
<html>
<head>
<title>每隔一定时间更换图片</title>
<script language="javascript">
<!--
Img = new Array("loading_1@2x.png","loading_2@2x.png","loading_3@2x.png","loading_4@2x.png","loading_5@2x.png","loading_6@2x.png","loading_7@2x.png","loading_8@2x.png","loading_9@2x.png","loading_10@2x.png");
size = Img.length;
i = 0;
function chImg(){
picID.src = Img[i];
i++;
if (i>=size) i = 0;
setTimeout("chImg()",500);
}
//-->
// for(var i = 0 ; i < 5 ; i++){
// var j = 0;
// var arr= [1,2,5,7,8];
// setTimeout(function(){
// console.log(arr[j ++]);
// },i*3000)}
</SCRIPT>
</head>
<body onLoad="chImg()">
<a href=""><img id="picID" border="0"></a>
</body>
</html>
方法二以上
彩条水平流动的效果
给文字设置彩色水平流动效果
.index {
color: red;//一定要设置文字颜色，任意纯色即可
/*background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);*/ //不要删此行，注释即可，但对文字起作用
animation: hue 6s linear infinite;
}
@keyframes hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
那些事儿
才发现这是第99篇，其实不止99篇的了
12月里有点事就不经常更新了！
今天被说：人是有惰性的！你不赖床就不错的了
这个站点的存在很大程度上是我的“惰性”导致的！
网上出现的东西不断出现————也同时在不断地消失！
今天发现之前在这里的外链有些失效了！
国nei网络环境有什么不好？
就是太好了！真是太好了！
好到慢慢的就不是“我”的站点了！
看到一些站长把自己的分享内容推倒重新来！
还有V2社区从“被关键字”到回国华丽“备案”！
但愿有些快照能保存久一点！
前段时间看到陈guanxi的一些视频
里面有段话说的很好，大概意思是：
在“亚洲”，人们有个点子，会收收埋埋！
在美国，展开双臂--意思是开放，分享！
几乎不看娱乐新闻那就再“八卦一下吧”之前有篇是说他自己的--为什么我是那个坏人！
知道有人不知道我在说什么！早已习惯！
这个站不会“回guo”!永远不会！
即使它被D到只剩下域名，我都会在上面写着
Hello World！
为网站添加优衣库UNIQLOCK的音乐舞蹈时钟
来自：为网站添加优衣库UNIQLOCK的音乐舞蹈时钟
对于网站的创意时钟来说，目前最好最有创意的莫过于优衣库UNIQLOCK的音乐舞蹈时钟。
优衣库（UNIOLO)是日本著名的休闲服装品牌，是排名全球服饰零售业前列的日本迅销集团旗下的核心品牌。其创意的营销受众，已经覆盖了全球超过两亿人。
这一款创意的优衣库UNIQLOCK的音乐舞蹈时钟，除了有清纯美丽的少女舞蹈外，还能带给人们在繁忙工作之余的些许放松，在视觉和听觉上都极其享受。使用这款创意时钟，不仅仅可以提供当做屏保，还可以作为博客的widget功能，丰富自己网站的内容，延长访客在网站停留的时间。据我不完全统计，几乎所有人都想把每个舞蹈姿势看完。
此外，此外UNIQLOCK的widget还有闹钟功能，你可以设定时间，到了指定时间将播放一段30秒的舞蹈及你所输入的文字。像这样的时钟widget以前接触过的还有ClockLink及Blog-Apartments，不过像UNIQLOCK这样有创意的还比较少有的。
登陆http://www.uniqlo.jp/uniqlock/ 在左侧有menu菜单，打开Blog Parts，LOCAL TIME里选择CHINA BEIJING，在SIZE里选择自己想要的尺寸，不过目前来说，只有两种尺寸可选，分别是：W：160 H：130和W：424 H：278。MUSIC的ON和OFF控制音乐的开关。
最后点击SET，就会在右侧出现可供使用的代码了。整个操作流程还是很简便的。 无论是放在自己的博文里还是放在网站的侧栏，都能带来不错的效果。
看不了 点我
网站侧边栏仓鼠flash动画
来自：网站侧边栏仓鼠flash动画
网站侧边栏仓鼠flash动画 仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
在哪里？点我
代码如下：
<object data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" height="100%" style="outline:none;" type="application/x-shockwave-flash" width="100%"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?" /><param name="AllowScriptAccess" value="always" /><param name="wmode" value="opaque" /></object>
仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
用户不在当前标签页面改变title
实现代码
简单有效，将整个窗口绑定onblur和onfocus。
全选复制放进笔记
window.onblur = function() { document.title = "(●—●)";
}; window.onfocus = function() { document.title = "啦啦啦啦";
}
浏览器兼容性
目前主流的标准浏览器基本都已经支持，部门旧版浏览器需要增加内核前缀，IE从10开始支持。
常见应用场景
幻灯片播放时可在不可见时停止播放，恢复显示后继续播放
每隔一段时间向服务器请求数据的可在切换可见性时停止，减轻服务器负担
网站访问统计提供跟准确的数据
网站title根据可见性变换
例如在typecho主题里footer.php里添加
<script>
window.onblur = function() {
document.title = "你在看什么呢？";
window.onfocus = function() {
document.title = "<?php $this->archiveTitle(array(
'category' => _t('分类 %s 下的文章'),
'search' => _t('包含关键字 %s 的文章'),
'tag' => _t('标签 %s 下的文章'),
'author' => _t('%s 发布的文章')
), '', ' - '); ?><?php $this->options->title(); ?>";
}
};
</script>
另一个版本在http://blog.iplayloli.com/看到的
<script>
var changeTitle = {
originTitle: document.title,
change: function() {
document.title = " 草榴社區 - t66y.com ";
},
reset: function() {
document.title = changeTitle.originTitle;
}
};
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
changeTitle.change();
} else {
changeTitle.reset();
}
});
</script>
chrome下右键“查看网页源代码”，就会看到
<script>
window.onblur = function() {
document.title = "你在看什么呢？";
window.onfocus = function() {
document.title = "用户不在当前标签页面改变title - 52M";
}
};
</script>
实际效果可以在不同窗口下切换就看到