羽空间 public:html
https://wiki.gulucat.com/
2026-05-17T08:14:04+0800
羽空间
https://wiki.gulucat.com/
https://wiki.gulucat.com/lib/exe/fetch.php/favicon.ico
-
text/html
2022-02-18T10:26:48+0800
Anonymous (anonymous@undisclosed.example.com)
css 使元素居中
https://wiki.gulucat.com/doku.php/public/html/css_center?rev=1645151208&do=diff
css 使元素居中
1. relative 元素水平居中
居中的首要条件就是指定宽度。使用以下 css：
margin: 0, auto;
2. relative 元素绝对居中
待补充。
3. absolute 元素绝对居中
* 方案一：
absolutea 元素一般都会指定了宽高，使用以下 css 可以绝对居中：
-
text/html
2019-10-28T11:42:46+0800
Anonymous (anonymous@undisclosed.example.com)
css 制作方形相框，并让图片居中
https://wiki.gulucat.com/doku.php/public/html/css_square_container?rev=1572234166&do=diff
css 制作方形相框，并让图片居中
css
container css 方案一：
.square-container {
position: relative;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
background-color: #e9eef1;
border: 1px solid #aaa;
border-radius: 4px;
box-shadow: 3px 3px 3px #ccc;
}
-
text/html
2019-10-28T11:34:26+0800
Anonymous (anonymous@undisclosed.example.com)
纯 css 制作 switch button
https://wiki.gulucat.com/doku.php/public/html/css_switch_button?rev=1572233666&do=diff
纯 css 制作 switch button
1. css 代码
/* The switch - the box around the slider */
.switch-button {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
/* Hide default HTML checkbox */
.switch-button input {
display:none;
}
/* The slider */
.switch-button .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #aaa;
-webkit-transition: .4s;
transition: .4s;
}
.switch-button .slider:before {
position…
-
text/html
2022-02-18T11:04:47+0800
Anonymous (anonymous@undisclosed.example.com)
对 html 文件进行 gzip 压缩
https://wiki.gulucat.com/doku.php/public/html/gzip_bash?rev=1645153487&do=diff
对 html 文件进行 gzip 压缩
html gzip
gzip 压缩
对目录下的所有 html, js, css 文件进行 gzip 压缩
find /usr/share/nginx/html -type f -regex ".*\.\(html\|js\|css\)" -exec sh -c "gzip < {} > {}.gz" \;
配置 nginx 支持
# 启用静态压缩，如果存在同名的以.gz结尾的文件，则优先使用.gz文件。优先级高于gzip。
gzip_static on;
# 启用压缩。
gzip on;
# 文件大小大于2k时才进行压缩。
gzip_min_length 2k;
# 压缩级别，1-10。数字越大压缩率越高，CPU占用率也越高。
gzip_comp_level 5;
gzip_buffers 4 16k;
# 对以下MIME类型的文件进行压缩。text/html无论是否指定，都进行压缩。gzip_types设置对gzip_static无效。
gzip_types text/plain text/css application/j…
-
text/html
2022-11-24T18:23:01+0800
Anonymous (anonymous@undisclosed.example.com)
鼠标点击字体特效
https://wiki.gulucat.com/doku.php/public/html/js_click_text?rev=1669285381&do=diff
鼠标点击字体特效
html js
JQuery 版本
/* 鼠标特效 */
var a_idx = 0;
var a = new Array("❤Python❤","❤Julia❤","❤PHP❤","❤C❤","❤C++❤","❤C#❤","❤Java❤","❤Go❤","❤ASM❤","❤SQL❤","❤HTML❤","❤CSS❤","❤Javascript❤");
jQuery(document).ready(function($) {
$("body").click(function(e) {
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 9999,
"top": y - 20,
"left": x,
…
-
text/html
2019-10-31T14:44:40+0800
Anonymous (anonymous@undisclosed.example.com)
public:html:start
https://wiki.gulucat.com/doku.php/public/html/start?rev=1572504280&do=diff
文章列表
* css 使元素居中
* css 制作方形相框，并让图片居中
* 对 html 文件进行 gzip 压缩
* 纯 css 制作 switch button
* 鼠标点击字体特效