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); }
}