网页制作常用代码 不断增加 [2025年7月8更新] 网页制作常用代码：一、直接使用节日代码：<!-- <script defer src="https://four-root-occupation.glitch.me/chunjie-denglong.js"></script> 春节快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/wuyi-denglong.js"></script> 五一快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/guoqing-denglong.js"></script> 国庆快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/yuandan-denglong.js"></script> 元旦快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/zhongqiu-denglong.js"></script> 中秋快乐-->二、本页总访问量1、自建busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_site_pv"></span> 次</p> <script defer src="https://bsz.211119.xyz/js"></script>2、其它busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次</p> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script>三、网站时间、本页总访问量及其它相关，可灵活修改式样1，访问量、运行时间和版本<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("01/05/2025 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | @ws01 v1.0.0 2025</p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样2，访问量、运行时间、开源和信息<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | 开源于 GitHub <a href="https://github.com/wszx123/My-Nav" target="_blank">@wszx123</a></p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样3，访问量、运行时间、博客和导航链接<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | <a href="https://boke.199881.xyz/" target="_blank"> <span style="color: blue;">博客 | <a href="https://www.199881.xyz/" target="_blank"> <span style="color: green;">导航 </p></span> <script defer src="https://bsz.211119.xyz/js"></script> 四、其它常用代码transform: translateY(12px); /* 子元素往下移动12px */ transform: translateY(-12px); /* 子元素往上移动12px */ justify-content: space-between; /* 子元素分散排列 */ justify-content: flex-start; /* 子元素从左侧开始排列 */ gap: 20px; /* 子元素之间的空隙 */ background: url('https://121.freewebhostmost.com/') no-repeat center center fixed; /* 背景图片 */ background-color: #f4f4f4; /* 背景色 */ min-height: 60px; /* 最小高度设置为60px */ max-height: 120px; /* 最大高度设置为120px */ font-size: 18px; /* 字号大小*/ border-radius: 5px; /* 四角弧度，一般高为5，50为圆*/ border: 2px solid gray; /* 添加2px灰色边框 */ border: 1px #aaa; /* 添加 1px 和 #aaa 色边框 */ --border-color: #aaa; /* 边框，原#436EEED */ border-bottom: 2px dashed #6495ED; /* 添加灰色虚线#ccc */ overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */ margin-left: 20px; /* 分类标签右移添加这一行 */ color: green; /* 分类标签字体颜色添加这一行 */ text-align: left; /* 添加左对齐 */ /* 设置文件名的最大宽度，并且超出部分省略显示 */ .file-name { max-width: 200px; /* 设置最大宽度，您可以调整为合适的值 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; /* 确保文件名在一行内显示 */ } /* 设置图片背景的毛玻璃效果，值越大越模糊 */ backdrop-filter: blur(2px); margin-top: -20px; /* 验证码图片向上移动20px */footer代码.footer {position: fixed;bottom: 1cm;left: 50%;transform: translateX(-50%);background-color: rgba(230, 230, 250, 0.4);color: #000000;min-width: 400px;max-width: 1120px;height: 55px;text-align: center;margin: 2px auto;padding: 1px;border-radius: 10px;font-size:15px;}五、php代码中单位转换，其中($bytes, 1) 是保留小数点后一位，改2是二位<?php // 格式化文件大小函数 function formatSize($bytes) { $units = ['字节', 'KB', 'MB', 'GB', 'TB']; $unitIndex = 0; while ($bytes >= 1024 && $unitIndex < count($units) - 1) { $bytes /= 1024; $unitIndex++; } return number_format($bytes, 1) . ' ' . $units[$unitIndex]; } ?>六、适配手机时添加1、网页代码在手机上不适配时，在添加以下代码<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加viewport meta标签，确保页面在移动设备上正确缩放 -->2、大括号中添加相应代码@media (max-width: 768px) { } @media (max-width: 480px) { }七、在html页面添加输入密码才能打开1、密码24小时有效【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { // 检查是否已存储有效密码 const storedAuth = localStorage.getItem('imagePageAuth'); if (storedAuth) { const authData = JSON.parse(storedAuth); const now = new Date().getTime(); // 检查密码是否在24小时内（24*60*60*1000 = 86400000毫秒） if (now - authData.timestamp < 86400000) { // 密码仍在有效期内，允许访问 return; } else { // 密码已过期，清除存储 localStorage.removeItem('imagePageAuth'); } } // 如果没有有效密码，则要求输入 var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } else { // 密码正确，存储当前时间和密码信息（24小时内有效） const authData = { password: password, timestamp: new Date().getTime() }; localStorage.setItem('imagePageAuth', JSON.stringify(authData)); } })(); </script>2、密码当次有效，下一次打开也需要输入【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } })(); </script> 七、icon代码方法1，用图片 <link rel="icon" href="https://img.keplu.eu.org/file/img1/1749897585818_logo04.png" type="image/ico">方法2，用字符 <link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌐</text></svg>">

Caddy2的安装与使用，轻松实现反向代理和重定向 Caddy2的安装与使用，轻松实现反向代理和重定向本文转载自： 奶油之家 1、Caddy2中文官方资料： 进入 2、关闭防火墙【好像不关也没关系】sudo ufw disable3、安装Caddy2安装必要的软件包sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https获取Caddy的安全密钥curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg从指定的 URL 下载 Caddy 的官方 GPG 密钥文件curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list更新软件包列表sudo apt update安装Caddy2sudo apt install caddy{dotted startColor="#ff6c6c" endColor="#1989fa"/}4、测试：创建静态页面进入/etc/caddy，打开Caddyfile，清空文件内容，然后输入下面的代码【/var/www/html是静态页面文件夹，也可以修改为自己熟悉的文件夹，如/home/html等】解析好的域名 { root * /var/www/html file_server }创建静态mkdir -p /var/www/html进入/var/www/html文件夹并创建文件index.html打开index.html，输入下面的代码【也可以是你自己的 html 代码】<!DOCTYPE html> <html> <body> <h1>自由之家</h1> <p>欢迎来到我们的网站</p> </body> </html>5、Caddy2相关命令 ，每更改完后请执行 重启Caddy2# 启动Caddy2 systemctl start caddy # 开机自启 systemctl enable caddy # 重启Caddy2 systemctl restart caddy # 停止Caddy2 systemctl stop caddy # 重载配置Caddy配置文件（修改配置文件后执行） systemctl reload caddy # 查看Caddy2运行状态 systemctl status caddy6、Caddy2的应用 ，实际应用时可以举一反三设置反代解析好的域名 { reverse_proxy 127.0.0.1:8080 #这里输入你想反代的服务器IP和端口 encode gzip }设置重定向解析好的域名 { redir https://naiyous.com{uri} }

Caddy新一代轻量web服务器 配置简单 自动HTTPS 反向代理建站 Caddy新一代轻量web服务器 配置简单 自动HTTPS 反向代理建站Caddy 2是一款功能强大、企业级、开源 Web 服务器，具有用 Go 编写的自动 HTTPS。本文转自： 科技lion 一、docker一键安装curl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin二、创建Caddyfile和index.htmlmkdir -p /home/web/{caddy,html} touch /home/web/caddy/Caddyfile touch /home/web/html/index.html三、配置index.htmlhttps://github.com/kejilion/Website_source_code/blob/main/index.htmlnano /home/web/html/index.html四、配置Caddyfilenano /home/web/caddy/Caddyfile五、配置IP访问的静态页面【因上传软件原因， 可能出现乱码用不了 ，如安装后不起作用， 可把Caddyfile文件下载到本地编辑后再上传 】http:// { root * /usr/share/caddy encode gzip file_server }配置带域名的静态页面，下面都以“kjlion.com”为例kjlion.com { root * /usr/share/caddy encode gzip file_server }配置带域名的反向代理wp.kjlion.com { reverse_proxy 127.0.0.1:8080 encode gzip }配置带域名的重定向b.kjlion.com { redir https://baidu.com{uri} }配置带域名的php动态站点wp.kjlion.com { root * /usr/share/caddy/wordpress encode gzip php_fastcgi php:9000 file_server }六、部署caddydocker run -d --name caddy -p 80:80 -p 443:443 -p 443:443/udp -v /home/web/caddy/:/etc/caddy/ -v /home/web/html/:/usr/share/caddy/ --restart=always caddy:latest七、重启caddydocker restart caddy