分类 web 下的文章

想下一些LSF的文档，windows下的离线浏览有teleport等软件可以选择，Linux下面的类似的离线浏览的软件就更多了。

本来想看看能不能用curl来实现整个网站下载，后来发现curl没有网站下载这个功能。Linux下面除了curl外另一个强大的软件就是wget。

阅读全文

最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。

阅读全文

相关：
推荐大家使用的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;

CSS3 Shapes和CSS3 Regions

解决子div撑不开父div

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

来自：为网站添加优衣库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动画 仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
在哪里？点我


代码如下：

<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>

仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧