default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-page6

styleTags:  All CSS html javascript php/other IT
subject Apache2网站安装开通https协议SSL证书

比较简单实用的一种做法是使用certbot,签发证书、安装、配置web服务器(apache/nginx等)、自动更新一条龙。详细介绍请访问cerbot官网:https://certbot.eff.org/

这里简单介绍主要步骤:(以Ubuntu linux server为例)

先安装snapd
sudo apt install snapd

确保安装的是最新版本内核
sudo snap install core; sudo snap refresh core;

使用snapd安装certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

最后,运行cerbot并自动配置apache运行https
sudo certbot --apache

其中,certbot会要求输入域名、email等信息,基本上照做就行。

成功后cerbot会返回如下信息
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/favinavi.com/fullchain.pem
Key is saved at: /etc/letsencrypt/live/favinavi.com/privkey.pem
This certificate expires on 2023-06-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

包含证书和密钥文件保存路径,证书过期日期等,并且告诉您可以让certbot在后台自动更新证书。

by: fanshome  visibility 815
2023-05-21 07:24 (UTC)

Demo subject CSS3特效“喜欢/Like”动态按钮,一颗会跳动的心脏

纯css+svg实现,鼠标移上去心脏会有节律地跳动,适合用来做点赞按钮参考,或者学习css动画技巧。

by: fanshome  visibility 806
2023-05-21 12:19 (UTC)

Demo subject CSS3+SVG实现的带音效、会抖动的小铃铛图标特效

非常真实的抖动效果,鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 1338
2023-05-25 08:52 (UTC)

Demo subject 一个纯CSS的最小干扰的渐变色彩虹loading bar

Loading图标,又称“加载中”图标,以往是用gif格式动图来实现。但是gif有一个比较明显的问题,不易调整大小,然后图片一般比较粗糙,颗粒感严重。

现在流行纯css的loading效果,比如不断转圈式、不断跳动式,网上有很多。这里不多做介绍,搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果,类似谷歌风格,又超越谷歌的单一颜色Loading Bar,既充分利用了容器顶部的“无用”空间,又不失醒目,用户体验比较好,干扰的感觉最小,同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自:https://codepen.io/lister/pen/mdrrYJQ

这不是进度条,进度条一般是逐渐填满的形式,有另外的实现方式。

by: fanshome  visibility 951
2023-05-20 08:35 (UTC)

Demo subject CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式

使用css: linear-gradient来实现线性颜色渐变背景,效果见下图:
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 825
2023-05-20 13:50 (UTC)

Demo subject HTML5时代,使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法

在很久很久以前,没有智能手机的时代,写网站只要考虑PC显示屏幕,基本上任何页面元素都只要固定的宽度和高度,比较好处理。

为了提高页面的加载速度,讲究点的方法是:
假如某个页面有多个小图片(比如二十个小图标)需要显示,可以把这二十个小图片合并到一张大图,然后通过背景图片切片的方法(background-position:)来显示不同的小图片,从而极大地提高页面加载速度。

当今时代,适配大大小小各类屏幕成了某种必需,最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多,但是,尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候,我们需要为同一类型、同样大小的链接配上不同的图片,此时,假如能够只使用一张图片来解决问题就更好了。例如,某些场合要用户选择不同的浏览器来进行下一步,假设用到以下这一张图片中的5种浏览器:

[img]

需求是:图片能自动适配不同屏幕宽度,使用背景图片方式来分割出5个链接,缩放窗口大小时,图片自动跟着缩放,同时宽高比不变,即保持图片不变形;与此同时,对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢?请看以下CSS代码,任何用到宽度、高度的地方都使用百分比,保证缩放比例不变形。

by: fanshome  visibility 914
2023-06-03 06:09 (UTC)

Demo subject css实现图标或图片等元素镜像翻转(水平镜像、垂直镜像)

有时候会发现现成的图标很美观,但是和一般习惯不同(或者纯粹不符合个人喜好),比如“分享”图标,一般是一个箭头,但是箭头方向感觉和习惯的相反,这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦,不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果,请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 1394
2023-05-25 17:06 (UTC)

subject php/javascript的一些关于时间处理的函数

记录一些经常用到的时间处理函数以备用。

by: fanshome  visibility 916
2023-06-02 14:05 (UTC)

subject 更全面匹配UTF-8中文汉字的正则表达式

网上搜索得到的匹配汉字的正则表达式有一部分并不全面,只匹配了Unicode字符集中\u4E00-\u9FA5范围,并不包含\uF900-\uFA2D这些后期添加的拾遗补缺的、生冷僻的中文字符。而有时候我们需要能比较全面的匹配所有中文字符,则需要在常用的正则表达式上做一些修改补充。

要注意的是,JavaScript和PHP在匹配Unicode字符时,它们的正则表达方式并不一致,不能直接复制过去使用。
php正则记得要添加“/u”修正符。

by: fanshome  visibility 869
2023-05-19 07:57 (UTC)