前端小实战之个人博客制作H5+css+javascript（附源码）

于 2025-06-24 00:22:11 发布
阅读量805 收藏 30
点赞数 21
CC 4.0 BY-SA版权
文章标签： 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_88628540/article/details/148835024

作为前端开发的基础，你是否也想拥有一个能够让人眼前一亮的个人博客呢？让别人能够访问你的个人博客去了解你的基本信息呢？如果你是一名大学生，是否也想有一个出色的期末作业呢？那就跟着此文来吧，这篇文章将从HTML布局到CSS设计再到JS交互，一步一步完成这个个人博客

ps：此文章适合前端开发的初学者使用

1.作品介绍

1.网页作品简介：此网页是一个个人博客，即介绍个人基本信息，成就，作品等的网页

2.网页作品编辑：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局：此网页大多采用flex弹性布局，整体为LOGO、导航、主体内容布局，子页面采用了多种css布局方式

4.作品技术方面：作品采用了JS技术获取了计算机的时间，大多图片采用了倒影,鼠标悬浮变化等技术，导航栏还有“留言”的子网页，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

2.作品演示

2.1.首页

2.2.关于我（个人信息）

由于涉及个人隐私部分打码处理！

2.3.作品

2.4.相册

2.5.留言

3.代码目录

4.代码实现

4.1.HTML

4.1.1."首页"HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/index.css">
</head>
    <body id="top">
    <!-- 头部 -->
    <header>
        <h2>My<br>Blog</h2>
        <img src="img/头像.jpg" alt="">
        <div>
            <ul>
                <a target="_blank" href="#page1"><li>首页</li></a>
                <a target="_blank" href="about-me.html"><li>关于我</li></a>
                <a target="_blank"  href="work.html"><li>作品</li></a>
                <a target="_blank"  href="photo.html"><li>相册</li></a>
                <a target="_blank" href="liuyan.html"><li>留言</li></a>
                <button class="change-btn">🎇</button>
            </ul>
    </header>
        </div>
        
    <!-- 主体 -->
    <div id="wrap">
        <div class="page" id="page1">
            <div class="box fade-in">
                <img src="./img/background.jpg" alt="" class="background-img">
                <img src="./img/tx.png" alt="背景图片" class="img_tx">
                <h1>MY<br>BLOG</h1>
                <p>Welcome to my blog!</p>
                <div class="time"></div>
            </div>
            <div class="liuxing">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <footer>
        <a href="#">我的个人主页</a>
     </footer>
</div>
<script src="js/index.js"></script>
<script src="js/time.js"></script>
</body>
</html>

4.1.2."关于我"HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About me</title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/about-me.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <h2>My<br>Blog</h2>
        <img src="img/头像.jpg" alt="">
        <div>
            <ul>
                <a target="_blank" href="index.html"><li>首页</li></a>
                <a target="_blank" href="about-me.html"><li>关于我</li></a>
                <a target="_blank"  href="work.html"><li>作品</li></a>
                <a target="_blank"  href="photo.html"><li>相册</li></a>
                <a target="_blank" href="liuyan.html"><li>留言</li></a>
                 <button class="change-btn">🎇</button>
            </ul>
        </div>
    </header>
    <!-- 主体 -->
        <div>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="container">
        <table border="1" cellspacing="0" cellpadding="0">
           <tr >
            <td colspan="4" style="color: red;">✈️个人信息</td>
           </tr>
           <tr>
            <td>姓名</td>
            <td>your-name</td>
            <td>生日</td>
            <td>your-birthday</td>
           </tr>
           <tr>
            <td>电话</td>
            <td>your-telephone</td>
            <td>邮箱</td>
            <td>your-email</td>
           </tr>
           <tr>
            <td>教育经历</td>
            <td>your-education<br>
           <br>
       </td>
            <td>学历</td>
            <td>education</td>
           </tr>
            <td>居住地址</td>
            <td>your-home</td>
            <td>专业</td>
            <td>软件技术</td>
           </tr>
           <tr>
            <td>兴趣</td>
            <td colspan="3">游戏----王者荣耀，无畏契约，cs2，ow2，pubg，lol，and so on <br>
                运动---篮球，羽毛球，跑步，游泳</td>
           </tr>
           <tr>
            <td colspan="4" rowspan="1" style="color: red;">✈️个人技能</td>
           </tr>
           <tr>
            <td colspan="4">初中开始自学编程,python,C语言,C++,java,html,css,javascript,kali系统,高中时用python爬取过付费音乐和付费视频,Java和C语言做过小程序,kali渗透过自己另一台电脑,of course,所有的这些技能都不涉及商用,只是个人兴趣爱好罢了!!</td>
           </tr>
        </table>
    </div>
     <script src="js/index.js"></script>
</body>
</html>

4.1.3."作品"HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品</title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/work.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <h2>My<br>Blog</h2>
        <img src="img/头像.jpg" alt="">
        <div>
            <ul>
                <a target="_blank" href="index.html"><li>首页</li></a>
                <a target="_blank" href="about-me.html"><li>关于我</li></a>
                <a target="_blank"  href="work.html"><li>作品</li></a>
                <a target="_blank"  href="photo.html"><li>相册</li></a>
                <a target="_blank" href="liuyan.html"><li>留言</li></a>
                 <button class="change-btn">🎇</button>
            </ul>
        </div>
    </header>
    <!-- 作品部分 -->
     <div class="work-container">
        <img src="./img/background.jpg" alt="" class="background-img">
    <div class="work-intro">
    </div>
    
    <div class="work-categories">
         <div class="liuxing">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        <section class="category">
            <h3>表单与数据</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/表单.html">表单</a>
                <a target="_blank" href="./homework/成绩表.html">成绩表</a>
                <a target="_blank" href="./homework/预约入校.html">预约入校</a>
            </div>
        </section>
        
        <section class="category">
            <h3>多媒体项目</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/有声相册/first.html">有声相册</a>
                <a target="_blank" href="./homework/4.8/天龙八部.html">天龙八部</a>
                <a target="_blank" href="./homework/4.8/百度词条.html">歌手资料</a>
            </div>
        </section>
        
        <section class="category">
            <h3>CSS效果</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/4.8/精灵图.html">精灵图</a>
                <a target="_blank" href="./homework/4.8/五角星.html">五角星</a>
                <a target="_blank" href="./homework/4.8/奖状.html">奖状</a>
                <a target="_blank" href="./homework/动画.html">CSS动画-2D动画</a>
                <a target="_blank" href="./homework/正方形动画.html">CSS动画-动感立方体</a>
            </div>
        </section>
        
        <section class="category">
            <h3>交互效果</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/焦点.html">键盘焦点</a>
                <a target="_blank" href="./homework/鼠标悬停.html">鼠标悬停</a>
                <a target="_blank" href="./homework/4.8/box.html">商城抢购页面</a>
            </div>
        </section>
        
        <section class="category">
            <h3>布局技术</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/float.html">float</a>
                <a target="_blank" href="./homework/float选1.html">float选1</a>
                <a target="_blank" href="./homework/grid.html">grid布局作业</a>
                <a target="_blank" href="./homework/多列.html">多列布局作业</a>
                <a target="_blank" href="VOLARANT/导航栏.html">导航栏</a>
            </div>
        </section>
        
        <section class="category">
            <h3>其他作品</h3>
            <div class="zuopin">
                <a target="_blank" href="./homework/4-15/cuxiao.html">促销</a>
                <a target="_blank" href="./homework/骰子.html">骰子</a>
                <a target="_blank" href="./homework/jsgame/index.html">js小游戏</a>
            </div>
        </section>
    </div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

4.1.4."相册"HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册</title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/photo.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <h2>My<br>Blog</h2>
        <img src="img/头像.jpg" alt="">
        <div>
            <ul>
                <a target="_blank" href="#page1"><li>首页</li></a>
                <a target="_blank" href="about-me.html"><li>关于我</li></a>
                <a target="_blank"  href="work.html"><li>作品</li></a>
                <a target="_blank"  href="photo.html"><li>相册</li></a>
                <a target="_blank" href="liuyan.html"><li>留言</li></a>
                 <button class="change-btn">🎇</button>
            </ul>
        </div>
    </header>

      <!-- 照片展示区 -->
         <div class="container">
            <div class="bubbles_box">
                <div class="bubbles">
                    <span style="--i:1;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:22;"></span>
                    <span style="--i:28;"></span>
                    <span style="--i:30;"></span>
                    <span style="--i:33;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:26;"></span>
                    <span style="--i:24;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:20;"></span>
                    <span style="--i:23;"></span>
                    <span style="--i:29;"></span>
                    <span style="--i:31;"></span>
                    <span style="--i:32;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:21;"></span>
                    <span style="--i:27;"></span>
                    <span style="--i:24;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:20;"></span>
                    <span style="--i:23;"></span>
                    <span style="--i:29;"></span>
                    </div>
            </div>
            <div class="photo_name"><h2>人物相册</h2></div>
            <div class="img_box">
            <div class="box">
                <img src="img/photo1.jpg" alt="">
            </div>
            <div class="box">
                <img src="img/photo2.jpg" alt="">
            </div>
            <div class="box">
                <div class="box">
                    <img src="img/photo3.jpg" alt="">
                </div>
            </div>
               <div class="box">
                <img src="img/photo4.jpg" alt="">
            </div>
               <div class="box">
                <img src="img/phtot5.jpg" alt="">
            </div>
            </div>
            
             <div class="photo_name1">
                <h2>风景相册</h2>
            </div>
            <div class="img_box1">
            <div class="box">
                <img src="./img/natural01.jpg" alt="">
            </div>
            <div class="box">
                <img src="./img/natural02.jpg" alt="">
            </div>
            <div class="box">
                <div class="box">
                    <img src="./img/natural03.jpg" alt="">
                </div>
            </div>
               <div class="box">
                <img src="./img/natural04.jpg" alt="">
            </div>
               <div class="box">
                <img src="./img/natural05.jpg" alt="">
            </div>
            </div>
        </div>
            <script src="js/index.js"></script>
            <script src="js/photo.js"></script>
</body>
</html>

4.1.4."留言"HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言内容</title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/liuyan.css">
   
</head>
<body>
     <!-- 头部 -->
     <header>
        <h2>My<br>Blog</h2>
        <img src="img/头像.jpg" alt="">
        <div>
            <ul>
                <a target="_blank" href="#page1"><li>首页</li></a>
                <a target="_blank" href="about-me.html"><li>关于我</li></a>
                <a target="_blank"  href="work.html"><li>作品</li></a>
                <a target="_blank"  href="photo.html"><li>相册</li></a>
                <a target="_blank" href="liuyan.html"><li>留言</li></a>
                <button class="change-btn">🎇</button>
            </ul>
        </div>
    </header>

    <!-- 主体 -->
     <div class="container">
                   <div class="bubbles">
                <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:22;"></span>
                    <span style="--i:28;"></span>
                    <span style="--i:30;"></span>
                    <span style="--i:33;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:26;"></span>
                    <span style="--i:24;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:20;"></span>
                    <span style="--i:23;"></span>
                    <span style="--i:29;"></span>
                    <span style="--i:31;"></span>
                    <span style="--i:32;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:21;"></span>
                    <span style="--i:27;"></span>
                    <span style="--i:24;"></span>
                    <span style="--i:25;"></span>
                    <span style="--i:12;"></span>
            </div>
     <main>
     <div id="message-form">
        <div class="message-title">
            <h2>留言信息</h2>
        </div>
        <div id="message-input">
        <div>
    <label for="name">姓名:<br><input type="text" id="name" placeholder="姓名"></label>
</div>
<div>
    <label for="email">邮箱:<br><input type="email" id="email" placeholder="邮箱"></label>
</div>
<div>
    <label for="message">留言内容:<textarea id="message" placeholder="留言内容"></textarea></label>
</div>
<button type="submit" id="submit-button">提交</button>
</div>
    
</div>

<div id="messages">
    <div class="message-title">
    <h2>留言列表</h2>
</div>
</div>
</main>
</div>
<script src="js/index.js"></script>
<script src="js/liuyan.js"></script>
</body>
</html>

4.2.CSS

CSS中的@keframes为关键帧，用于制作动画效果，@media为媒体查询，用于制作响应式文本，使网页在不同尺寸设备下打开都能很好的显示出来

4.2.1.“所有”CSS代码（所有网页共同拥有的CSS模块）

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    font-family: Times;
    overflow: auto;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
     cursor: url(https://qweree.cn/wp-content/themes/kratos-pjax-master/static/images/cursor.cur), auto;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 36px;
}

a {
    text-decoration: none
}

li {
    list-style: none
}

input {
    outline: none
}


/* 头部 */
header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    height: 120px;
    z-index: 2;
}

.change-btn{
    border-radius: 50%;
    position: absolute;
    right: 40px;
    font-size: x-large;
    border: none;
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
    background-color: transparent;
    color: red;
    cursor: pointer;
}
header img{
    width: 120px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 45%;
    transition: all 1s ease-in-out;
    animation: rotateAndScale 1.5s ease-in-out;
}

header img:hover{
    transform: rotate(360deg) scale(1.2);
}

@keyframes rotateAndScale{
   0%{
    transform: rotate(0deg) scale(1);
   }
   50%{
    transform: rotate(360deg) scale(1.2);
   }
   100%{
    transform: rotate(0deg) scale(1);
    }
    }


header h2 {
    position: relative;
    margin-left: 110px;
    text-indent: 15px;
    letter-spacing: 5px;
    color: red;
    font-size: 30px;
    font-weight: 500;
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
}
header ul{
    display: flex;
    margin-right: 330px;
}
header ul a li{
    color: blue;
    margin: 0 30px;
    font-size: 24px;
    transition: 0.5s;
    position: relative;
    filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
}
header ul a li:hover{
    color: rgba(14, 41, 81, 1.00)
}
header ul a li::after{
    width: 100%;
    position: absolute;
    left: -4px;
    display: block;
    background: rgba(182, 182, 183, 1);
    transform-origin: right;
    transform: scale(0, 1);
    transition: transform 0.5s;
    content: '';
    height: 2px;
}
header ul a li:hover::after{
    transform: scale(1.2);
    transform-origin: left;
    width: 100%;
}

footer{
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #bfc9a7;
    border-radius: 25px;
    height: auto;
    z-index: 1;
}

footer a{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: medium;
    font-weight: bolder;
    color: aquamarine;
   letter-spacing: 10px;
}


/* 响应式设计开始 */

@media (max-width: 768px) { /* 平板 */
    body {
        font-size: 16px;
    }

    header {
        height: 100px;
    }

    header img {
        width: 100px;
        left: 40%;
        margin-top: 10px;
    }

    header h2 {
        font-size: 24px;
        margin-left: 80px;
    }

    header ul {
        margin-right: 200px;
    }

    header ul a li {
        font-size: 20px;
        margin: 0 20px;
    }

    footer {
        border-radius: 15px;
    }

    footer a {
        font-size: 14px;
    }
}

@media (max-width: 480px) { /* 手机 */
    body {
        font-size: 14px;
    }

    header {
        height: 80px;
        flex-direction: column;
        align-items: center;
    }

    header img {
        width: 80px;
        left: 45%;
        margin-top: 10px;
    }

    header h2 {
        font-size: 20px;
        margin-left: 0;
        margin-top: 10px;
    }

    header ul {
        margin-right: 0;
        margin-top: 10px;
    }

    header ul a li {
        font-size: 18px;
        margin: 0 15px;
    }

    header ul a li::after {
        transform: scale(1);
    }

    footer {
        border-radius: 10px;
    }

    footer a {
        font-size: 12px;
        letter-spacing: 6px;
    }
}

4.2.2."首页"CSS代码

body{
    height: 100%;
    overflow-x: hidden;
}

.cursor::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.3);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.7;
    }
}

#wrap{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.page{
    height: 100vh;
    width: 100%;
    position: relative;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* opacity: 0; */
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.page .box .background-img{
    background-size: cover;
    background-position-x:center ;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.page .box .img_tx{
    border-radius: 50%;
    width: 20%;
    height: 40%;
    position: absolute;
    right: 20%;
    top: 30%;
    object-fit: cover;
    opacity: 1;
    z-index:-1;
    filter: drop-shadow(13px 0px 15px black);
    transition: all 1s ease-in-out;
}

.page .box .img_tx:hover{
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px skyblue);
    -webkit-box-reflect: below 0.5px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
#page1 .box h1,
#page1 .box p{
    font-family: '华文彩云';
   color: rgb(236, 9, 9);
   font-size: 50px;
   margin: 0 350px;
   position: relative;
   z-index: 2;
   letter-spacing: 10px;
   line-height: 1.1;
   filter: drop-shadow(10px 10px 5px #0a0a0a);
}

.time{
    font-size: x-large;
    color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
    z-index: 2;
    font-style: italic;
    font-weight: bolder;
    filter: drop-shadow(10px 10px 5px #0a0a0a);
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

span{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    /* 发光效果 */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1),
    0 0 0 8px rgba(255,255,255,.1),
    0 0 20px rgba(255,255,255,1);
    animation: animate 2s linear infinite;
}
/* 拖尾效果 */
span::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 300px;
    height: 3px;
    background: linear-gradient(90deg,#fff,transparent);
}
/* 为每个span单独设置出现位置和时间 */
span:nth-child(1){
    top:0;
    right: 0;
    left: initial;
    animation-delay: 0s;
    animation-duration: 1s;
}

span:nth-child(2){
    top:0;
    right: 80px;
    left: initial;
    animation-delay: .2s;
    animation-duration: 3s;
}
span:nth-child(3){
    top: 80px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2s;
}
span:nth-child(4){
    top:0;
    right: 180px;
    left: initial;
    animation-delay:.6s;
    animation-duration: 1.5s;
}
span:nth-child(5){
     top:0;
    right: 400px;
    left: initial;
    animation-delay:.8s;
    animation-duration: 2.5s;
}
span:nth-child(6){
    top:0;
    right: 600px;
    left: initial; 
    animation-delay:.5s;
    animation-duration: 3s;
}
span:nth-child(7){ 
    top: 300px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.75s;
}
span:nth-child(8){
    top: 0;
    right: 700px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.25s;
}
span:nth-child(9){
    top: 80px;
    right: 0;
    left: initial;
    animation-delay: 0.5s;
    animation-duration: 2.25s;
}
span:nth-child(10){
    top: 0;
    right: 450px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}
span:nth-child(11){
    top: 0;
    right: 800px;
    left: initial;
    animation-delay: .6s;
    animation-duration: 2.25s;
}
span:nth-child(12){
    top: 0;
    right: 1000px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2.25s;
}
span:nth-child(13){
    top: 0;
    right: 1200px;
    left: initial;
    animation-delay: .3s;
    animation-duration: 2.25s;
}
span:nth-child(14){
    top: 0;
    right: 1400px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}

/* 定义动画 */
@keyframes animate{
    0%{
        transform: rotate(315deg) translateX(0);
        opacity: 1;
}
    90%{
        opacity: 1;
    }
    100%{
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
    }

    @media (max-width: 768px) { /* 平板 */
    .page .box .img_tx {
        width: 15%;
        height: 30%;
        right: 15%;
        top: 25%;
    }

    #page1 .box h1,
    #page1 .box p {
        font-size: 30px;
        margin: 0 150px;
    }

    .bubbles span {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) { /* 手机 */
    .page .box .img_tx {
        width: 10%;
        height: 20%;
        right: 10%;
        top: 20%;
    }

    #page1 .box h1,
    #page1 .box p {
        font-size: 20px;
        margin: 0 50px;
    }

    .bubbles span {
        width: 20px;
        height: 20px;
    }
}

4.2.3."关于我"CSS代码

body{
    height: 100vh;
    overflow: hidden;
   background-image: url("../img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table{
    width: 1000px;
    height: 200px;
    border: 2px solid black;
    box-shadow: 0 0 10px rgba(2, 149, 247, 0.7);
    font-size: larger;
    font-weight: bolder;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    -webkit-box-reflect: below 0.5px linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.1));
}


span{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    /* 发光效果 */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1),
    0 0 0 8px rgba(255,255,255,.1),
    0 0 20px rgba(255,255,255,1);
    animation: animate 2s linear infinite;
}
/* 拖尾效果 */
span::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 300px;
    height: 3px;
    background: linear-gradient(90deg,#fff,transparent);
}
/* 为每个span单独设置出现位置和时间 */
span:nth-child(1){
    top:0;
    right: 0;
    left: initial;
    animation-delay: 0s;
    animation-duration: 1s;
}

span:nth-child(2){
    top:0;
    right: 80px;
    left: initial;
    animation-delay: .2s;
    animation-duration: 3s;
}
span:nth-child(3){
    top: 80px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2s;
}
span:nth-child(4){
    top:0;
    right: 180px;
    left: initial;
    animation-delay:.6s;
    animation-duration: 1.5s;
}
span:nth-child(5){
     top:0;
    right: 400px;
    left: initial;
    animation-delay:.8s;
    animation-duration: 2.5s;
}
span:nth-child(6){
    top:0;
    right: 600px;
    left: initial; 
    animation-delay:.5s;
    animation-duration: 3s;
}
span:nth-child(7){ 
    top: 300px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.75s;
}
span:nth-child(8){
    top: 0;
    right: 700px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.25s;
}
span:nth-child(9){
    top: 80px;
    right: 0;
    left: initial;
    animation-delay: 0.5s;
    animation-duration: 2.25s;
}
span:nth-child(10){
    top: 0;
    right: 450px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}
span:nth-child(11){
    top: 0;
    right: 800px;
    left: initial;
    animation-delay: .6s;
    animation-duration: 2.25s;
}
span:nth-child(12){
    top: 0;
    right: 1000px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2.25s;
}
span:nth-child(13){
    top: 0;
    right: 1200px;
    left: initial;
    animation-delay: .3s;
    animation-duration: 2.25s;
}
span:nth-child(14){
    top: 0;
    right: 1400px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}
/* 定义动画 */
@keyframes animate{
    0%{
        transform: rotate(315deg) translateX(0);
        opacity: 1;
}
    90%{
        opacity: 1;
    }
    100%{
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
    }

    @media (max-width: 768px) { /* 平板 */
    .container {
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1rem;
    }

    table {
        width: 100%;
        height: auto;
        font-size: larger;
    }

    span {
        width: 3px;
        height: 3px;
        margin: 1rem 0;
    }

    span::before {
        width: 150px;
    }
}

@media (max-width: 480px) { /* 手机 */
    table {
        font-size: medium;
    }

    span {
        width: 2px;
        height: 2px;
    }

    span::before {
        width: 100px;
    }
}

4.2.4."作品"CSS代码

body{
    height: 100%;
    overflow-x: hidden;
}
.work-intro {
    text-align: center;
    margin: 2rem 0;
    padding: 0 1rem;
}

.work-intro h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.work-intro p {
    font-size: 1.1rem;
    color: #666;
}

.work-categories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.category {
    margin-top: 40px;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.category h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary-color);
}

.zuopin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.zuopin a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-height: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.zuopin a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 1s;
}

.zuopin a:hover::before {
    left: 100%;
}

.zuopin a:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .work-categories {
        padding: 0 0.5rem;
    }
    
    .category {
        padding: 1rem;
    }
    
    .zuopin {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .zuopin a {
        padding: 1rem 0.5rem;
        min-height: 60px;
        font-size: 0.9rem;
    }
}
.background-img{
    background-size: cover;
    background-position-x:center ;
    background-repeat: no-repeat;
    width: 115%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
span{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    /* 发光效果 */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1),
    0 0 0 8px rgba(255,255,255,.1),
    0 0 20px rgba(255,255,255,1);
    animation: animate 2s linear infinite;
}
/* 拖尾效果 */
span::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 300px;
    height: 3px;
    background: linear-gradient(90deg,#fff,transparent);
}
/* 为每个span单独设置出现位置和时间 */
span:nth-child(1){
    top:0;
    right: 0;
    left: initial;
    animation-delay: 0s;
    animation-duration: 1s;
}

span:nth-child(2){
    top:0;
    right: 80px;
    left: initial;
    animation-delay: .2s;
    animation-duration: 3s;
}
span:nth-child(3){
    top: 80px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2s;
}
span:nth-child(4){
    top:0;
    right: 180px;
    left: initial;
    animation-delay:.6s;
    animation-duration: 1.5s;
}
span:nth-child(5){
     top:0;
    right: 400px;
    left: initial;
    animation-delay:.8s;
    animation-duration: 2.5s;
}
span:nth-child(6){
    top:0;
    right: 600px;
    left: initial; 
    animation-delay:.5s;
    animation-duration: 3s;
}
span:nth-child(7){ 
    top: 300px;;
    right: 0;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.75s;
}
span:nth-child(8){
    top: 0;
    right: 700px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 1.25s;
}
span:nth-child(9){
    top: 80px;
    right: 0;
    left: initial;
    animation-delay: 0.5s;
    animation-duration: 2.25s;
}
span:nth-child(10){
    top: 0;
    right: 450px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}
span:nth-child(11){
    top: 0;
    right: 800px;
    left: initial;
    animation-delay: .6s;
    animation-duration: 2.25s;
}
span:nth-child(12){
    top: 0;
    right: 1000px;
    left: initial;
    animation-delay: .4s;
    animation-duration: 2.25s;
}
span:nth-child(13){
    top: 0;
    right: 1200px;
    left: initial;
    animation-delay: .3s;
    animation-duration: 2.25s;
}
span:nth-child(14){
    top: 0;
    right: 1400px;
    left: initial;
    animation-delay: .5s;
    animation-duration: 2.25s;
}
/* 定义动画 */
@keyframes animate{
    0%{
        transform: rotate(315deg) translateX(0);
        opacity: 1;
}
    90%{
        opacity: 1;
    }
    100%{
        transform: rotate(315deg) translateX(-2000px);
        opacity: 0;
    }
    }

    @media (max-width: 768px) { /* 平板 */
    .work-categories {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .category {
        width: 90%;
        margin-top: 20px;
    }

    .zuopin {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .zuopin a {
        padding: 1rem 0.5rem;
        min-height: 60px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) { /* 手机 */
    .work-categories {
        padding: 0 1rem;
    }

    .category {
        width: 95%;
        padding: 1rem;
    }

    .zuopin {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
    }

    .zuopin a {
        padding: 0.5rem 0.3rem;
        font-size: 0.8rem;
    }
}

4.2.5."相册"CSS代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a252c;
}

.img_box,
.img_box1{
    position: relative;
    top: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: preserve-3d;
    margin: 250px 0 300px 0;
}

.img_box .box,
.img_box1 .box{
    width: 370px;
    height: 400px;
    position: relative;
    transition: 2s;
    -webkit-box-reflect: below 2px linear-gradient(transparent,#0002);
    margin: 0 7px;
}

.img_box .box img,
.img_box1 .box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img_box:hover :not(:hover),
.img_box1:hover :not(:hover){
    margin:0 -15px;
    filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);
    transform: perspective(500px) rotateY(45deg) scale(0.95);
}

.img_box .box:hover~.box,
.img_box1 .box:hover~.box{
				transform: perspective(500px) rotateY(-45deg) scale(0.95);
			}
.img_box .box:hover,
.img_box1 .box:hover{
                transform:perspective(500px) rotateY(0) scale(1.2);
            }

            
.bubbles{
    display: flex;
}

.bubbles span{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #4fc3dc;
    margin: 0 8px;
    box-shadow: 0 0 0 10px #4fc3fc44,0 0  50px #4fc3dc,0 0 100px #4fc3fc;
    animation: animate calc(120s/var(--i)) linear infinite;
    z-index: 1;
    opacity: 0.6;
}

.bubbles span:nth-child(even){
    background-color: #ff2d75;
    box-shadow: 0 0 0 10px #ff2d7544,0 0  50px #ff2d75,0 0 100px #ff2d75;
}

@keyframes animate{
    0%{
        transform: translateY(140vh) scale(0);
    }
    100%{
        transform: translateY(-100vh) scale(1);
    }
}

.photo_name {
    position: absolute;
    left: 0;
    margin-top: 150px;
    color: skyblue;
    font-size: 24px;
    padding: 10px;
}

.photo_name1 {
    position: absolute;
    left: 0;
    margin-top: -190px;
    color: skyblue;
    font-size: 24px;
    padding: 10px;
}


@media (max-width: 768px) { /* 平板 */
    .img_box, .img_box1 {
        margin: 150px 0 200px 0;
    }

    .img_box .box, .img_box1 .box {
        width: 300px;
        height: 350px;
    }

    .bubbles span {
        width: 25px;
        height: 25px;
        margin: 0 5px;
    }
}

@media (max-width: 480px) { /* 手机 */
    .img_box, .img_box1 {
        margin: 100px 0 150px 0;
    }

    .img_box .box, .img_box1 .box {
        width: 250px;
        height: 300px;
    }

    .photo_name {
        margin-top: 50px;
        font-size: 20px;
    }

    .photo_name1 {
        margin-top: -150px;
        font-size: 20px;
    }

    .bubbles span {
        width: 20px;
        height: 20px;
    }
}

4.2.6."留言"CSS代码

body{
    background:linear-gradient(to bottom,#bfc9a7,#465e68);
    overflow: hidden;
}
main{
    display: flex;
    align-items: center;
    margin-top: 150px;
}

.container{
    height: 100vh;
}

input[type="text"],
input[type="email"]
{
    width: 100%;
    border: 1px solid #ccc;
    height: 40px;
    border-radius: 4px;
    margin-top: 10px;
    padding: 10px;
}
#message-form {
    width: 100%;
    max-width: 600px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin: 0  100px 0 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#message-form div {
    margin-bottom: 15px;
}

#message-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
    padding: 15px;
} 

.message-title{
    padding: 3px;
    margin-top: 5px;
    position: relative;
    left: 40%;
}
.message-title h2{
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#submit-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            margin: 0 0 10px 10px;
            cursor: pointer;
        }

#message-input {
            width: 100%;
            box-sizing: border-box;
            resize: none;
            margin-bottom: 10px;
        }

#message-form textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
}

#messages {
    position: absolute;
    top: -15px;
    right: 110px;
    width: 100%;
    height: 57vh;
    max-width: 600px;
    margin: 200px 100px 0 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    min-height: 370px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.message {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.message:last-child {
    border-bottom: none;
}

.message p {
    margin: 0;
    font-size: 16px;
}

.message .name {
    font-weight: bold;
    margin-bottom: 5px;
}

.message .email {
    color: #555;
    margin-bottom: 10px;
}
.bubbles{
    display: flex;
}

.bubbles span{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #4fc3dc;
    margin: 0 8px;
    box-shadow: 0 0 0 10px #4fc3fc44,0 0  50px #4fc3dc,0 0 100px #4fc3fc;
    animation: animate calc(120s/var(--i)) linear infinite;
    z-index: 1;
    opacity: 0.6;
}

.bubbles span:nth-child(even){
    background-color: #ff2d75;
    box-shadow: 0 0 0 10px #ff2d7544,0 0  50px #ff2d75,0 0 100px #ff2d75;
}

@keyframes animate{
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform: translateY(-100vh) scale(1);
    }
}

.delete-button{
    border-radius: 4px;
    border: 1px solid skyblue;
    padding: 0% 10px;
    cursor: pointer;
}

.box{
    min-width: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding:10px;
    word-wrap: break-word;
}

/* 响应式设计 - 不修改原有样式 */
/* 平板设备 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    main {
        margin-top: 100px !important;
    }
    
    #message-form {
        margin: 0 50px 0 150px !important;
    }
    
    #messages {
        right: 60px !important;
        margin: 200px 50px 0 10px !important;
        height: 50vh !important;
    }
    
    .message-title {
        left: 35% !important;
    }
}

/* 手机设备 (<=767px) */
@media (max-width: 767px) {
    main {
        margin-top: 80px !important;
    }
    
    #message-form {
        margin: 0 20px !important;
        max-width: 90% !important;
    }
    
    #messages {
        position: relative !important;
        top: 20px !important;
        right: auto !important;
        width: 90% !important;
        height: 40vh !important;
        margin: 20px auto !important;
    }
    
    .message-title {
        left: 25% !important;
    }
    
    #message-form label {
        font-size: 16px !important;
    }
    
    #submit-button {
        padding: 8px 16px !important;
    }
}

4.3.javascript代码 

4.3.1."所有"JS代码（所有网页共同拥有的JS代码模块）

 //页面加载进入时执行img的动画
        document.addEventListener('DOMContentLoaded',()=>{
            const headerImg = document.querySelector('header img');
            headerImg.classList.add('header img')
        } ) 

        // 获取button和header元素
        const button = document.querySelector('.change-btn');
        const header = document.querySelector('header');
        
        // 设置初始背景和过渡效果
        const defaultBg = 'linear-gradient(to right bottom, #F5DEB3, #ADD8E6)';
        header.style.background = defaultBg;
        header.style.transition = 'background 1s ease';
    
        
        // 给button添加点击事件切换背景显示/隐藏
        button.addEventListener('click', () => {
            if(header.style.background === 'none') {
                // 如果背景为none，则显示背景
                header.style.background = defaultBg;
            } else {
                // 否则隐藏背景
                header.style.background = 'none';
            }
        });

4.3.2."留言"JS代码

// 获取输入框、提交按钮和留言显示区域的元素
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');
const submitButton = document.getElementById('submit-button');
const messages = document.getElementById('messages');

// 监听提交按钮的点击事件
submitButton.addEventListener('click', function () {
    // 获取输入框中的留言内容、姓名和邮箱
    const name = nameInput.value.trim();
    const email = emailInput.value.trim();
    const messageText = messageInput.value.trim();

    // 检查留言内容、姓名和邮箱是否为空
    if (name!== '' && email!== '' && messageText!== '') {
        // 创建一个新的 <div> 元素来显示留言
        const messageElement = document.createElement('div');
        messageElement.classList.add('box');

        // 创建姓名元素
        const nameElement = document.createElement('p');
        nameElement.classList.add('name');
        nameElement.textContent = `姓名: ${name}`;

        // 创建邮箱元素
        const emailElement = document.createElement('p');
        emailElement.classList.add('email');
        emailElement.textContent = `邮箱: ${email}`;

        // 创建留言内容元素
        const textElement = document.createElement('p');
        textElement.textContent = `留言内容: ${messageText}`;

        // 创建删除按钮元素
        const deleteMessageButton = document.createElement('button');
        deleteMessageButton.textContent = '删除';
        deleteMessageButton.classList.add('delete-button');

        // 为删除按钮绑定点击事件
        deleteMessageButton.addEventListener('click', function () {
            deleteMessage(messageElement);
        });

        // 将姓名、邮箱和留言内容元素添加到留言元素中
        messageElement.appendChild(nameElement);
        messageElement.appendChild(emailElement);
        messageElement.appendChild(textElement);
        messageElement.appendChild(deleteMessageButton);

        // 将新的留言元素添加到留言显示区域
        messages.appendChild(messageElement);

        // 清空输入框
        nameInput.value = '';
        emailInput.value = '';
        messageInput.value = '';
    }
});

//删除留言
function deleteMessage(message) {
    messages.removeChild(message);
}

4.3.3.“相册”JS代码

const imgs = document.querySelectorAll('.img_box1');
const title = document.querySelector('.photo_name1');

imgs.forEach(img => img.addEventListener('mouseover', () => {
    title.style.marginTop = '-150px';
    title.style.transition = 'all 0.5s ease-in-out';
}));

imgs.forEach(img => img.addEventListener('mouseout', () => {
    title.style.marginTop = '-90px';
    title.style.transition = 'all 0.5s ease-in-out';
}));

4.3.4.首页的时间JS代码

window.onload = function() {
    window.requestAnimationFrame(getDate);
}

function getDate() {
    window.setTimeout(function() {
        window.requestAnimationFrame(getDate);
    }, 1000/2);

    var date = new Date();
    var year = date.getFullYear(); //获取年份
    var month = date.getMonth() + 1; //获取月份，从date对象中获取的月份是0-11，所以要加1
    var day = date.getDate(); //获取日
    var hour = date.getHours(); //获取小时
    var minute = date.getMinutes(); //获取分钟
    var second = date.getSeconds(); //获取秒

    if(month < 10) {
        month = "0" + month;
    }
    if(day < 10) {
        day = "0" + day;
    }
    if(hour < 10) {
        hour = "0" + hour;
    }
    if(minute < 10) {
        minute = "0" + minute;
    }
    if(second < 10) {
        second = "0" + second;
    }

    var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var Tools = document.getElementsByClassName("time");
    var da = year + "年" + month + "月" + day + "日 " + week[date.getDay()] + " " + hour + ":" + minute + ":" + second;

    // 遍历 Tools 集合，并为每个元素设置 innerHTML
    for (var i = 0; i < Tools.length; i++) {
        Tools[i].innerHTML = da;
    }
}

5.源码下载

此地址可直接下载源码：【免费】HTML+CSS+JS实现个人博客源代码资源-CSDN文库https://download.csdn.net/download/2401_88628540/91123382

6.结语

本人仅为前端初学者，因此代码也许有些许BUG，请业内大神多多包含，此源码仅供学习参考，未经本人允许禁止转载，最终解释权归本人所有！

Cforly.
关注
H5+CSS+JS:块元素
mjhap的博客
08-29 637
块元素 H5块元素 块元素在显示时，通常会以新行开始 如：&lt; h1 &gt;、&lt; p &gt;、&lt; ul &gt; 内联元素 内联元素通常不会以新行开始 如：&lt; b &gt;、&lt; a &gt;、&lt; img &gt; &lt; div &gt;元素 &lt; div &gt;元素也被称为块元素，其主要是组合HTML元素的容器
h5页面模版源码
03-22
h5页面模版源码 ，非常酷炫的html5模板 ，可以直接使用，也可以参考学习
用DIV+CSS技术制作个人博客网站（web前端网页制作课期末作业）
weixin_BJ050106的博客
08-10 257
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构......
html页面源码_浏览器插件分享 - h5源码一键下载
weixin_39842937的博客
11-21 1225
首先，需要安装Firefox扩展，所以要使用Firefox浏览器，Chrome扩展审核中，后面会更新链接...Firefox扩展安装地址：https://addons.mozilla.org/zh-CN/firefox/addon/code-hacker/Chrome扩展安装地址：开发中（其实代码早就写好了，但是chrome上架插件要门票，还不能用微信支付宝，我太难了...）现放出chrome插件...
HTML前端个人博客模板
01-26
视频地址：http://r5mmmjhat.hn-bkt.clouddn.com/demo-address/个人博客HTML模板视频.mp4 HTML+CSS+JS做的个人博客模板，有基本的导航栏，页脚信息，侧边鼠标悬放弹出层，同时还有小型音乐播放器，基本换歌、歌词显示等功能都有哦 页面和CSS样式和JS我都统一整理好了，导航栏、页脚等都是通过公共引入的，让页面更加简洁和更好的整理
整套移动端h5页面源码
12-09
电商项目源码，包含了所有一整套端，有需要端同学可以下载
基于javaScript+html+css开发的最好玩的H5消消乐（连连看）小游戏+源码+demo游戏演示（毕业设计&课程设计&项目开发）
最新发布
05-02
基于javaScript+html+css开发的最好玩的H5消消乐（连连看）小游戏+源码+demo游戏演示，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用 基于javaScript+html+css开发...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
- **项目背景**：本项目是一份针对大学期末考核而设计的前端网页制作作业，主要面向的是初学者或大学生，目的是让学生能够通过实践来加深对HTML、CSS以及JavaScript的理解和运用。 - **项目目标**：通过完成此作业，...
HTML5+CSS+JS室内设计精品网页模板 大学生期末大作业 Web前端网页制作
04-30
网页设计和制作、大学生网页课程设计、期末大作业、毕业设计、网页模板，网页成品源代码等，2000+套Web案例源码，主题涵盖各行各业，关注作者联系获取更多源码； 更多优质网页博文、网页模板移步查阅我的CSDN主页：...
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
H5表白网页源码+手机表白
09-27
11套情人节表白源码下载+手机自己生成软件，已去后门 。
个人博客web前端页面.zip
09-11
个人博客web前端页面,通过主页面可点击跳转其他多个页面
H5前端网站例子源码
04-13
H5前端网站例子源码;H5前端网站例子源码;H5前端网站例子源码;
h5页面模版源码，很不多的例子
07-28
h5页面模版源码 ，非常酷炫的html5模板 ，可以直接使用，也可以参考学习
html个人博客静态网页制作
06-19
这是一个静态的博客，不过很好，供大家分享
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
08-09
JavaScript作为前端开发的核心语言，承担了游戏的主要逻辑和交互功能。它处理游戏的事件响应，如用户输入、坦克移动、射击、碰撞检测以及分数计算等。JavaScript也负责游戏的实时更新，确保玩家在游戏中能即时感受到...
【前端】制作个人博客第三天
Minf的博客
03-18 1717
学习将iconfont放入页面
h5页面分享一(附源码)
热门推荐
哒哒的博客
02-23 3万+
1. 页面效果 2. index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;css网页布局&lt;/title&gt; &lt;link rel="stylesheet" href=
微信宣传动画活动h5+css3源码展示
标题和描述中所提到的知识点包括了“h5”、“css3”以及“动画效果”和“滑动效果”。而文件名称列表中的“rensheng”可能是源码文件夹或项目的名称。接下来，我将详细说明这些知识点。 ### H5+CSS3概念 H5指的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值