美高梅4858-美高梅4858mgm-[官方网站]

分类 HTML5 下的文章

纯 CSS 实现的 时间线,也支撑使用 美高梅4858mgm 动态生成

Time-line

纯 CSS 实现的 时间线,也支撑使用 美高梅4858mgm 生成。
DEMO | 演示
Time-line 预览图

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释,然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下:

[
  {
    "title":"美高梅4858官方网站",
    "link":"",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"/software/834.html",
    "time":"1578725484"
  }
]

字段说明:

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间,注意是 秒级时间戳

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE

更改鼠标样式 / CSS cursor 属性

请把鼠标移动到单词上,可以看到鼠标指针发生变化:

代码在最后面

Auto(自动)

Crosshair(十字线)

Default(默认,无变化)

Pointer(指针)

Move(移动)

e-resize(左右 调整大小)

ne-resize(右上左下 调整大小)

nw-resize(左上右下 调整大小)

n-resize(上下 调整大小)

se-resize

sw-resize

s-resize

w-resize

text

wait

help

<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>

自定义Chrome手机版&Opera手机版的地址栏颜色

我在用手机Chrome访问?谷歌 Search Console 移动设备适合性测试 发现顶部地址栏颜色改变了,如图:

用手机Chrome访问 谷歌 Search Console 移动设备适合性测试 截图

一般用手机版Chrome访问网页是这样子的,比如美高梅4858mgm博客:

用手机Chrome访问 美高梅4858mgm博客 截图

到底是用了什么特效呢?我查了下,在谷歌 Developers 找到了这篇文档?Icons Browser Colors | Web | 谷歌 Developers

访问 Icons Browser Colors | Web | 谷歌 Developers 截图

没错,正是这段代码:

<!--?Chrome,?Firefox?OS?and?Opera?-->
<meta?name="theme-color"?content="#4285f4">

使其变了颜色,ok,既然get到了这个技能,那么应用到我的博客?ok,说干就干,因为我用的是Emlog博客程序所以,打开我使用的主题文件(如果你用的WordPress、Z-Blog等博客程序或者其他的程序,只需要找到类似于 header.php 的公共文件添加即可):

/content/templates/Life/header.php

在<head></head>里加上了这行代码

	<meta?name="theme-color"?content="#3ac19f">
	<!--??#3ac19f?这是颜色代码,效果就是下图所示-->

然后就变成这样子啦┏(^ω^)=?

使用特效后访问 美高梅4858mgm博客 截图

最后,我想说一声,用手机写一篇博文好气啊,手机不好,写好后,切换到其他网页上传图片然后返回来,又因为内存不足,自动刷新了下网页,导致我又得重写……
XML 地图 | Sitemap 地图