构建个人网站：从零到完整的实现
在当今数字化时代，拥有一个个人网站不仅可以展示个人技能和兴趣，还能成为与他人交流的平台。今天，我将分享如何从零开始构建一个完整的个人网站，涵盖前端设计、交互功能以及响应式布局。
谢谢各位，点赞，收藏，加评论啦！！！
一、项目概述
这个个人网站包含以下几个主要页面：
-
首页（index.html）：展示个人信息和导航栏。
-
关于我（about-me.html）：详细介绍个人背景和兴趣爱好。
-
照片墙（photo.html）：展示个人摄影作品。
-
联系方式（contact.html）：提供联系信息和联系表单。
此外，网站还集成了音乐播放器、实时时钟、天气组件等功能，增强了用户体验。
二、技术栈
-
HTML5：用于构建页面结构。
-
CSS3：用于页面样式设计，包括响应式布局和动画效果。
-
JavaScript：用于实现交互功能，如音乐播放器控制、表单提交、动态时钟等。
-
Font Awesome：用于图标展示。
-
本地存储：用于保存音乐播放进度。
三、代码实现
1. 首页设计（index.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="music.css">
</head>
<body>
<!-- 音乐播放器容器 -->
<div class="music-player">
<!-- 播放控制按钮 -->
<div class="player-controls">
<button id="play-pause-btn">
<!-- 播放图标 -->
<svg class="play-icon" viewBox="0 0 24 24">
<!-- 播放三角形路径 -->
<path d="M8 5v14l11-7z" />
</svg>
<!-- 暂停图标 -->
<svg class="pause-icon" viewBox="0 0 24 24">
<!-- 暂停双竖线路径 -->
<path d="M6 4h4v16H6zm8 0h4v16h-4z" />
</svg>
</button>
</div>
<!-- 音频元素 -->
<audio id="bg-music" loop> <!-- loop属性设置循环播放 -->
<source src="锦零 - 豆花之歌.mp3" type="audio/mpeg"> <!-- 音频源文件 -->
</audio>
</div>
<!-- 背景 -->
<div class="background"></div>
<!-- 导航栏 -->
<nav class="nav">
<a href="about-me.html">关于我</a>
<a href="photo.html">照片墙</a>
<a href="contact.html">联系方式</a>
</nav>
<!-- 首屏 -->
<section class="hero" id="about">
<img src="images/avatar.jpg" class="avatar">
<h1>爱吃鱼的梦梦</h1>
<h3>软件技术专业<strong>·</strong>0000届</h3>
</section>
<!-- 每个页面底部添加 -->
<audio id="bgm" src="music.mp3" loop style="display:none;"></audio>
<button onclick="toggleMusic()" style="position:fixed; bottom:10px; right:10px;">音乐</button>
<script src="script.js"></script>
<script src="music.js"></script>
</body>
</html>2. 基础样式与重置（style.css）
/* 基础样式 */
body {
font-family: 'Segoe UI', sans-serif;
/* 设置全局字体为 Segoe UI，备用字体为 sans-serif */
line-height: 1.6;
/* 设置全局行高为 1.6，使文本更易读 */
}
.background {
position: fixed;
/* 固定定位，使背景图始终覆盖整个屏幕 */
top: 0;
/* 从顶部开始 */
left: 0;
/* 从左侧开始 */
width: 100%;
/* 宽度占满整个屏幕 */
height: 100%;
/* 高度占满整个屏幕 */
background: url('/个人网站/images/background.jpg') center/cover;
/* 设置背景图路径，居中并充满容器 */
filter: brightness(0.7);
/* 降低背景亮度，提升前景内容的可读性 */
z-index: -1;
/* 将背景图置于内容层下方 */
}
.nav {
position: fixed;
/* 固定定位，使导航栏始终在顶部 */
top: 0;
/* 从顶部开始 */
width: 100%;
/* 导航栏宽度占满整个屏幕 */
padding: 1rem;
/* 导航栏内边距，1rem 约等于 16px */
background: transparent;
/* 设置导航栏背景为完全透明 */
display: flex;
/* 使用弹性布局 */
justify-content: center;
/* 水平居中对齐导航项 */
gap: 2rem;
/* 导航项之间的间距 */
}
.hero {
min-height: 100vh;
/* 最小高度为视口高度，确保内容占满整个屏幕 */
display: flex;
/* 使用弹性布局 */
flex-direction: column;
/* 子元素垂直排列 */
align-items: center;
/* 水平居中对齐子元素 */
justify-content: center;
/* 垂直居中对齐子元素 */
text-align: center;
/* 文本内容居中对齐 */
}
.avatar {
width: 150px;
/* 头像宽度 */
height: 150px;
/* 头像高度 */
border-radius: 50%;
/* 圆角半径为 50%，使头像呈圆形 */
margin: 1rem;
/* 头像外边距 */
border: 3px solid #2A4365;
/* 头像边框，颜色为深蓝色 */
margin-top: -200px;
}
.skill-grid {
display: grid;
/* 使用网格布局 */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
/* 根据容器宽度自动调整列数，每列最小宽度为 120px */
gap: 1rem;
/* 网格单元之间的间距 */
padding: 2rem;
/* 网格内边距 */
}
.skill-card {
padding: 1rem;
/* 卡片内边距 */
background: #f3f4f6;
/* 卡片背景色为浅灰色 */
border-radius: 8px;
/* 卡片圆角 */
text-align: center;
/* 卡片内容居中对齐 */
transition: transform 0.3s;
/* 添加过渡效果，使卡片在鼠标悬停时平滑移动 */
}
.skill-card:hover {
transform: translateY(-5px);
/* 鼠标悬停时，卡片向上移动 5px，产生悬浮效果 */
}3. 关于我页面（about-me.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="about-me.css">
<link rel="stylesheet" href="music.css">
</head>
<body>
<!-- 音乐播放器容器 -->
<div class="music-player">
<!-- 播放控制按钮 -->
<div class="player-controls">
<button id="play-pause-btn">
<!-- 播放图标 -->
<svg class="play-icon" viewBox="0 0 24 24">
<!-- 播放三角形路径 -->
<path d="M8 5v14l11-7z" />
</svg>
<!-- 暂停图标 -->
<svg class="pause-icon" viewBox="0 0 24 24">
<!-- 暂停双竖线路径 -->
<path d="M6 4h4v16H6zm8 0h4v16h-4z" />
</svg>
</button>
</div>
<!-- 音频元素 -->
<audio id="bg-music" loop> <!-- loop属性设置循环播放 -->
<source src="锦零 - 豆花之歌.mp3" type="audio/mpeg"> <!-- 音频源文件 -->
</audio>
</div>
<!-- 背景层 -->
<div class="background"></div>
<!-- 主容器 -->
<main class="container">
<!-- 头部 -->
<header>
<img src="images/avatar.jpg" alt="头像" class="avatar">
<h1 style="text-align: center;">我的个人空间</h1>
</header>
<!-- 导航 -->
<nav style="text-align: center;">
<a href="index.html">首页</a>
<a href="photo.html">照片墙</a>
<a href="contact.html">联系方式</a>
</nav>
<!-- 内容区 -->
<section id="about">
<h2>个人简介</h2>
<p> 我是一个大二的学生，这是我制作的第一个个人网站。
<p> 虽然技术还不够成熟，但每行代码都凝聚着我的努力和热情。</p>
<p> 从最初的设计构思到页面布局，再到功能实现，每一个环节都让我学到了很多。网站的主题是关于我的学习和生活，有我的摄影作品、读书笔记，还有我参加社团活动的点滴记录。我希望通过这个网站，能够与更多志同道合的朋友交流分享，也期待在未来的学习中不断提升自己的技术，让网站变得更加完美。
</p>
</section>
<!-- 照片展示 -->
<div id="photos" class="gallery">
<img src="images/photo1.jpg" title="生活照1">
<img src="images/photo2.jpg" title="生活照2">
<img src="images/photo3.jpg" title="生活照3">
</div>
<!-- 小部件 -->
<div class="widgets">
<div id="clock"></div>
<div id="weather"></div>
</div>
</main>
<!-- 每个页面底部添加 -->
<audio id="bgm" src="music.mp3" loop style="display:none;"></audio>
<button onclick="toggleMusic()" style="position:fixed; bottom:10px; right:10px;">音乐</button>
<script src="script.js"></script>
<script src="music.js"></script>
</body>
</html>(about-me.css)
/* ================= 基础重置 ================= */
/* 通配符选择器重置所有元素的默认样式 */
* {
margin: 0;
/* 清除默认外边距 */
padding: 0;
/* 清除默认内边距 */
box-sizing: border-box;
/* 盒模型设置为边框盒，方便尺寸计算 */
}
/* 全局页面基础样式 */
body {
font-family: 'Microsoft YaHei', sans-serif;
/* 优先使用微软雅黑字体 */
}
/* ================= 背景设置 ================= */
.background {
position: fixed;
/* 固定定位覆盖全屏 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/个人网站/images/background.jpg') center/cover;
/* 背景图居中并充满容器 */
filter: brightness(0.7);
/* 降低背景亮度提升前景可读性 */
z-index: -1;
/* 置于内容层下方 */
}
nav {
position: fixed;
/* 固定定位，使导航栏始终在顶部 */
top: 0;
/* 从顶部开始 */
width: 100%;
/* 导航栏宽度占满整个屏幕 */
padding: 1rem;
/* 导航栏内边距，1rem 约等于 16px */
background: transparent;
/* 设置导航栏背景为完全透明 */
display: flex;
/* 使用弹性布局 */
justify-content: center;
/* 水平居中对齐导航项 */
gap: 2rem;
/* 导航项之间的间距 */
margin-top: -50px;
}
/* ================= 主容器样式 ================= */
.container {
max-width: 1200px;
/* 最大内容宽度限制 */
margin: 20px auto;
/* 上下边距20px，水平居中 */
padding: 30px;
/* 内边距营造呼吸空间 */
/* 玻璃拟态效果实现 */
background: rgba(255, 255, 255, 0.2);
/* 半透明白色背景 */
backdrop-filter: blur(10px);
/* 背景模糊效果 */
border: 1px solid rgba(255, 255, 255, 0.2);
/* 半透明边框 */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
/* 柔和阴影增强立体感 */
border-radius: 15px;
/* 圆角设计 */
margin-top: 50px;
}
/* 文字内容增强可读性 */
.container h1,
.container h2,
.container p {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
/* 添加轻微文字阴影防止背景融合 */
}
/* ================= 头像样式 ================= */
.avatar {
width: 150px;
/* 固定尺寸 */
height: 150px;
border-radius: 50%;
/* 圆形裁剪 */
display: block;
/* 块级元素居中 */
margin: 0 auto 20px;
/* 下边距20px */
border: 3px solid #fff;
/* 白色边框 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
/* 立体阴影效果 */
}
/* ================= 照片墙布局 ================= */
.gallery {
display: grid;
/* 使用网格布局 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 自适应列宽 */
gap: 15px;
/* 网格间隙 */
margin: 20px 0;
/* 上下外边距 */
}
/* 图片项样式 */
.gallery img {
width: 100%;
/* 充满网格容器 */
height: 200px;
/* 固定高度统一尺寸 */
object-fit: cover;
/* 保持比例裁剪填充 */
border-radius: 8px;
/* 圆角设计 */
transition: transform 0.3s;
/* 缩放动画过渡 */
}
/* 图片悬停效果 */
.gallery img:hover {
transform: scale(2);
/* 悬停放大2倍 */
}
/* ================= 小部件容器 ================= */
.widgets {
display: flex;
/* 弹性布局横向排列 */
gap: 20px;
/* 元素间距 */
justify-content: center;
/* 水平居中 */
margin-top: 30px;
/* 顶部外边距 */
background: rgba(255, 255, 255, 0.2) !important;
/* 半透明白背景 */
}
/* 通用小部件样式 */
#clock,
#weather {
padding: 15px 25px;
/* 内边距 */
background: rgba(255, 255, 255, 0.95);
/* 高透明度背景 */
border-radius: 10px;
/* 圆角设计 */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
/* 立体阴影 */
}4. 照片墙页面（photo.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="photo.css">
<link rel="stylesheet" href="music.css">
</head>
<body>
<!-- 音乐播放器容器 -->
<div class="music-player">
<!-- 播放控制按钮 -->
<div class="player-controls">
<button id="play-pause-btn">
<!-- 播放图标 -->
<svg class="play-icon" viewBox="0 0 24 24">
<!-- 播放三角形路径 -->
<path d="M8 5v14l11-7z" />
</svg>
<!-- 暂停图标 -->
<svg class="pause-icon" viewBox="0 0 24 24">
<!-- 暂停双竖线路径 -->
<path d="M6 4h4v16H6zm8 0h4v16h-4z" />
</svg>
</button>
</div>
<!-- 音频元素 -->
<audio id="bg-music" loop> <!-- loop属性设置循环播放 -->
<source src="锦零 - 豆花之歌.mp3" type="audio/mpeg"> <!-- 音频源文件 -->
</audio>
</div>
<nav class="nav">
<a href="index.html">首页</a>
<a href="about-me.html">关于我</a>
<a href="contact.html">联系方式</a>
</nav>
<!-- 背景 -->
<div class="background"></div>
<div class="photo-gallery">
<h1>我的照片墙</h1>
<div class="photo-grid">
<!-- 图片列表 -->
<div class="photo-item">
<img src="images/1.jpg" alt="照片1">
</div>
<div class="photo-item">
<img src="images/2.jpg" alt="照片2">
</div>
<div class="photo-item">
<img src="images/7.jpg" alt="照片3">
</div>
<div class="photo-item">
<img src="images/4.jpg" alt="照片4">
</div>
<div class="photo-item">
<img src="images/5.jpg" alt="照片5">
</div>
<div class="photo-item">
<img src="images/6.jpg" alt="照片6">
</div>
<div class="photo-item">
<img src="images/3.jpg" alt="照片6">
</div>
<div class="photo-item">
<img src="images/8.jpg" alt="照片6">
</div>
<div class="photo-item">
<img src="images/9.jpg" alt="照片6">
</div>
<div class="photo-item">
<img src="images/10.jpg" alt="照片6">
</div>
<!-- 可以继续添加更多照片 -->
</div>
</div>
<!-- 每个页面底部添加 -->
<audio id="bgm" src="music.mp3" loop style="display:none;"></audio>
<button onclick="toggleMusic()" style="position:fixed; bottom:10px; right:10px;">音乐</button>
<script src="music.js"></script>
</body>
</html>(photo.css)
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
.nav {
position: fixed;
/* 固定定位，使导航栏始终在顶部 */
top: 0;
/* 从顶部开始 */
width: 100%;
/* 导航栏宽度占满整个屏幕 */
padding: 1rem;
/* 导航栏内边距，1rem 约等于 16px */
background: transparent;
/* 设置导航栏背景为完全透明 */
display: flex;
/* 使用弹性布局 */
justify-content: center;
/* 水平居中对齐导航项 */
gap: 2rem;
/* 导航项之间的间距 */
}
.background {
position: fixed;
/* 固定定位，使背景图始终覆盖整个屏幕 */
top: 0;
/* 从顶部开始 */
left: 0;
/* 从左侧开始 */
width: 100%;
/* 宽度占满整个屏幕 */
height: 100%;
/* 高度占满整个屏幕 */
background: url('/个人网站/images/background.jpg') center/cover;
/* 设置背景图路径，居中并充满容器 */
filter: brightness(0.7);
/* 降低背景亮度，提升前景内容的可读性 */
z-index: -1;
/* 将背景图置于内容层下方 */
}
.photo-gallery {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
text-align: center;
}
.photo-gallery h1 {
font-size: 24px;
margin-bottom: 20px;
color: #2A4365;
}
/* 照片墙网格布局 */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 自动调整列数，每列最小宽度为200px */
gap: 10px;
/* 图片之间的间距 */
}
.photo-item {
overflow: hidden;
/* 隐藏超出容器的部分 */
border-radius: 8px;
/* 图片圆角 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* 添加阴影效果 */
}
.photo-item img {
width: 100%;
/* 图片宽度占满容器 */
height: auto;
/* 图片高度自动调整 */
transition: transform 0.3s ease;
/* 添加过渡效果 */
}
.photo-item img:hover {
transform: scale(1.05);
/* 鼠标悬停时放大图片 */
}5. 联系方式页面（contact.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="contact.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- 背景 -->
<div class="background"></div>
<!-- 导航栏 -->
<nav class="nav">
<a href="index.html">首页</a>
<a href="about-me.html">关于我</a>
<a href="photo.html">照片墙</a>
</nav>
<!-- 联系方式主体 -->
<main class="contact-container">
<!-- 联系卡片 -->
<div class="contact-card">
<div class="contact-methods">
<!-- 电子邮箱 -->
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span id="email" class="crypted" data-value="邮箱.com"></span>
</div>
<!-- 联系电话 -->
<div class="contact-item">
<i class="fas fa-mobile-alt"></i>
<span>155-0000-0000</span>
</div>
<!-- 社交媒体 -->
<div class="contact-item">
<i class="fas fa-share-alt"></i>
<div class="social-links">
<!-- 抖音 -->
<a href="https://www.douyin.com" target="_blank"><span class="material-icons"
title="抖音">ondemand_video</span></a>
<!-- 哔哩哔哩 -->
<a href="https://www.bilibili.com" target="_blank"><span class="material-icons"
title="哔哩哔哩">theaters</span></a>
<!-- 小红书 -->
<a href="https://www.xiaohongshu.com" target="_blank"><span class="material-icons"
title="小红书">forum</span></span></a>
</div>
</div>
<!-- 办公地址 -->
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<address>
河南省......
</address>
</div>
</div>
<!-- 分隔线 -->
<div class="divider"></div>
<!-- 联系表单 -->
<form class="contact-form" id="contactForm">
<div class="form-group">
<input type="text" placeholder="您的姓名" required>
</div>
<div class="form-group">
<input type="email" placeholder="电子邮箱" required>
</div>
<div class="form-group">
<textarea rows="5" placeholder="留言内容..." required></textarea>
</div>
<button type="submit" class="submit-btn">发送消息 <i class="fas fa-paper-plane"></i></button>
</form>
</div>
</main>
<!-- 在页面底部添加图标库引用 -->
<script src="//at.alicdn.com/t/c/font_1234567_abcde12345.js"></script>
<script src="contact.js"></script>
</body>
</html>（contact.css）
/* 联系页面专用样式 */
.background {
position: fixed;
/* 固定定位，使背景图始终覆盖整个屏幕 */
top: 0;
/* 从顶部开始 */
left: 0;
/* 从左侧开始 */
width: 100%;
/* 宽度占满整个屏幕 */
height: 100%;
/* 高度占满整个屏幕 */
background: url('/个人网站/images/background.jpg') center/cover;
/* 设置背景图路径，居中并充满容器 */
filter: brightness(0.7);
/* 降低背景亮度，提升前景内容的可读性 */
z-index: -1;
/* 将背景图置于内容层下方 */
}
.nav {
position: fixed;
/* 固定定位，使导航栏始终在顶部 */
top: 0;
/* 从顶部开始 */
width: 100%;
/* 导航栏宽度占满整个屏幕 */
padding: 1rem;
/* 导航栏内边距，1rem 约等于 16px */
background: transparent;
/* 设置导航栏背景为完全透明 */
display: flex;
/* 使用弹性布局 */
justify-content: center;
/* 水平居中对齐导航项 */
gap: 2rem;
/* 导航项之间的间距 */
}
.contact-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
margin-top: 50px;
}
.contact-card {
background: rgba(255, 255, 255, 0.5);
/* 最后一位0.5表示50%透明度 */
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
backdrop-filter: blur(10px);
/* 可选：添加毛玻璃效果增强质感 */
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
font-size: 1.1rem;
}
.contact-item i {
font-size: 1.5rem;
color: var(--primary);
min-width: 40px;
text-align: center;
}
.social-links {
display: flex;
gap: 1.5rem;
}
.social-links a {
color: var(--dark);
transition: 0.3s;
}
.social-links a:hover {
color: var(--accent);
transform: translateY(-3px);
}
/* 联系表单 */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.8rem;
border: 2px solid #eee;
border-radius: 8px;
transition: 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary);
outline: none;
}
.submit-btn {
background: var(--primary);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.submit-btn:hover {
background: var(--accent);
transform: translateY(-2px);
}
/* 地图容器 */
.map-container {
margin-top: 3rem;
height: 400px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.map-container iframe {
width: 100%;
height: 100%;
}
/* 响应式设计 */
@media (max-width: 768px) {
.contact-card {
grid-template-columns: 1fr;
}
.divider {
height: 2px;
background: #eee;
margin: 2rem 0;
}
}6. 音乐播放器实现
HTML部分（嵌入到每个页面底部）
<div class="music-player">
<div class="player-controls">
<button id="play-pause-btn">
<svg class="play-icon" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
<svg class="pause-icon" viewBox="0 0 24 24">
<path d="M6 4h4v16H6zm8 0h4v16h-4z" />
</svg>
</button>
</div>
<audio id="bg-music" loop>
<source src="锦零 - 豆花之歌.mp3" type="audio/mpeg">
</audio>
</div>CSS部分（music.css）
/* 音乐播放器容器样式 */
.music-player {
position: fixed;
/* 固定定位 */
bottom: 30px;
/* 距底部距离 */
right: 30px;
/* 距右侧距离 */
z-index: 1000;
/* 确保在最顶层 */
background: rgba(255, 255, 255, 0.95);
/* 半透明白色背景 */
border-radius: 50px;
/* 圆角效果 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
/* 阴影效果 */
padding: 12px;
/* 内边距 */
transition: transform 0.3s ease;
/* 悬停动画 */
}
/* 悬停效果 */
.music-player:hover {
transform: translateY(-5px);
/* 向上移动5像素 */
}
/* 播放/暂停按钮样式 */
#play-pause-btn {
width: 50px;
/* 按钮宽度 */
height: 50px;
/* 按钮高度 */
border: none;
/* 去除边框 */
background: #2A4365;
/* 按钮背景色 */
border-radius: 50%;
/* 圆形按钮 */
cursor: pointer;
/* 鼠标手型 */
position: relative;
/* 相对定位 */
transition: background 0.3s ease;
/* 背景色过渡动画 */
}
/* 按钮悬停状态 */
#play-pause-btn:hover {
background: #C53030;
/* 悬停时背景色 */
}
/* 图标通用样式 */
.play-icon,
.pause-icon {
width: 24px;
/* 图标尺寸 */
height: 24px;
fill: white;
/* 填充颜色 */
position: absolute;
/* 绝对定位 */
left: 50%;
/* 水平居中 */
top: 50%;
/* 垂直居中 */
transform: translate(-50%, -50%);
/* 精确居中 */
opacity: 1;
/* 默认不透明 */
transition: opacity 0.3s ease;
/* 透明度过渡动画 */
}
/* 暂停图标初始状态 */
.pause-icon {
opacity: 0;
/* 初始隐藏 */
}
/* 播放状态下的图标显示 */
.playing .play-icon {
opacity: 0;
/* 隐藏播放图标 */
}
.playing .pause-icon {
opacity: 1;
/* 显示暂停图标 */
}
/* 旋转动画 */
@keyframes rotate-disc {
from {
transform: rotate(0deg);
}
/* 起始角度 */
to {
transform: rotate(360deg);
}
/* 结束角度 */
}
/* 背景音轨可视化效果 */
.music-player::before {
content: '';
/* 伪元素必需属性 */
position: absolute;
width: 60px;
/* 尺寸大于按钮 */
height: 60px;
border: 2px solid #2A4365;
/* 边框样式 */
border-radius: 50%;
/* 圆形 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 居中定位 */
opacity: 0;
/* 初始隐藏 */
transition: opacity 0.3s ease;
/* 透明度过渡 */
}
/* 播放时的可视化效果 */
.playing::before {
opacity: 0.2;
/* 显示边框 */
animation: rotate-disc 8s linear infinite;
/* 应用旋转动画 */
}JavaScript部分（music.js）
// 获取DOM元素
const playPauseBtn = document.getElementById('play-pause-btn');
const bgMusic = document.getElementById('bg-music');
let isPlaying = false; // 播放状态标志
// 播放/暂停控制
playPauseBtn.addEventListener('click', () => {
if (isPlaying) {
bgMusic.pause(); // 暂停音频
} else {
bgMusic.play().catch(() => { }); // 播放音频并捕获可能的异常
}
playPauseBtn.classList.toggle('playing'); // 切换样式类
isPlaying = !isPlaying; // 反转播放状态
});
// 页面可见性变化监听（切换标签页时暂停）
document.addEventListener('visibilitychange', () => {
if (document.hidden) { // 当页面不可见时
bgMusic.pause();
playPauseBtn.classList.remove('playing');
isPlaying = false;
}
});
// 音频系统初始化（解决浏览器自动播放限制）
function initAudio() {
bgMusic.volume = 0.5; // 设置初始音量
document.body.removeEventListener('click', initAudio); // 移除初始化监听
}
// 首次点击页面时初始化
document.body.addEventListener('click', initAudio);
// 音量滚轮控制
playPauseBtn.addEventListener('wheel', (e) => {
e.preventDefault(); // 阻止默认滚动行为
const delta = e.deltaY > 0 ? -0.1 : 0.1; // 计算音量变化方向
// 限制音量范围(0-1)
bgMusic.volume = Math.min(1, Math.max(0, bgMusic.volume + delta));
// 创建临时音量显示
const volumeDisplay = document.createElement('div');
volumeDisplay.className = 'volume-display';
volumeDisplay.textContent = `${Math.round(bgMusic.volume * 100)}%`;
document.body.appendChild(volumeDisplay);
// 1秒后移除提示
setTimeout(() => {
volumeDisplay.remove();
}, 1000);
});
let audio = document.getElementById('bgm');
// 读取上次播放时间
audio.currentTime = localStorage.getItem('musicTime') || 0;
function toggleMusic() {
audio.paused ? audio.play() : audio.pause();
}
// 每秒保存播放进度
setInterval(() => {
localStorage.setItem('musicTime', audio.currentTime);
}, 1000);
7. 时钟，天气组件。
JavaScript部分（script.js）
// 邮箱防爬虫
function encryptEmail() {
const user = ['z', 'h', 'a', 'n', 'g', 's', 'a', 'n'].join('')
const domain = ['ex', 'am', 'ple', '.com'].join('')
document.getElementById('email-link').href = `mailto:${user}@${domain}`
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {
encryptEmail()
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault()
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
})
})
})
})
// 实时时钟
function updateClock() {
const options = {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
};
document.getElementById('clock').textContent = new Date().toLocaleTimeString('zh-CN', options);
}
setInterval(updateClock, 1000);
// 简易天气组件
document.getElementById('weather').innerHTML = `
<div class="weather-info">
<span>🌤 25°C</span>
<span>北京</span>
</div>
`;
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
功能说明
-
音乐播放器：
-
播放/暂停控制
-
音量调节
-
播放进度保存
-
-
页面布局：
-
响应式设计
-
优雅的过渡动画
-
背景模糊效果
-
-
交互功能：
-
导航栏固定
-
鼠标悬停效果
-
表单验证
-
这些代码和功能结合起来，打造了一个功能丰富、美观大方的个人网站。你可以根据自己的需求进行修改和扩展，添加更多的页面和功能。希望这些代码对你有所帮助！
扫一扫
7128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
