网页制作常用代码 不断增加 [2025年3月31更新]

网页制作常用代码：

一、直接使用节日代码：

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

四、其它常用代码

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

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; /* 确保文件名在一行内显示 */
}

五、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) {

    }