<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>关于我 - 李硕</title>
<link rel="stylesheet" href="
css/style
.css" />
<!-- 内联
样式增强搜索栏与轮播图外观 -->
<style>
/* 页面整体背景图：使用 banner
.jpg 作为底层背景 */
body {
margin: 0;
font-family: "Microsoft YaHei", sans-serif;
background-image: url('images/banner
.jpg'); /* 背景图片路径 */
background-size: cover; /* 完全覆盖屏幕 */
background-position:
center;
background-attachment: fixed; /* 固定背景，滚动时不移动 */
color: #333;
position: relative;
}
/* 半透明遮罩层，提升前景内容可读性 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0
.8); /* 白色半透明 */
z-index: -1; /* 置于内容之下 */
}
/* 轮播图容器 */
.carousel {
position: relative;
width: 100%;
max-width: 1000px;
height: 400px;
margin: 20px auto;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0
.15);
}
/* 图片列表 */
.carousel-inner {
display: flex;
width: 300%;
height: 100%;
transition: transform 0
.6s ease-in-out;
}
.carousel-inner img {
width: 33
.333%;
height: 100%;
object-fit: cover;
}
/* 左右箭
头按钮 */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0
.4);
color: white;
border: none;
padding: 12px;
font-size: 18px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items:
center;
justify-content:
center;
z-index: 10;
}
.carousel-btn
.prev { left: 10px; }
.carousel-btn
.next { right: 10px; }
.carousel-btn:hover { background-color: rgba(0,0,0,0
.7); }
/* 指示点容器 */
.dots {
position: absolute;
bottom: 15px;
width: 100%;
text-align:
center;
z-index: 10;
}
.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
background-color: rgba(255,255,255,0
.5);
border-radius: 50%;
cursor: pointer;
}
.dot
.active { background-color: white; }
/* 搜索框
样式 */
.search-box {
text-align:
center;
margin: 20px 0;
padding: 15px;
background-color: rgba(255,255,255,0
.9);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0
.1);
}
.search-box input[type="text"] {
width: 70%;
max-width: 400px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background 0
.3s ease;
}
.search-box button:hover { background-color: #0056b3; }
/* 左侧统一侧边栏容器 */
.sidebar-container {
position: fixed;
top: 80px;
left: 20px;
width: 220px;
z-index: 1000;
}
/* 搜索栏和导航栏统一风格 */
.sidebar-section {
background: rgba(255, 255, 255, 0
.98);
padding: 16px;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0
.16);
backdrop-filter: blur(6px);
margin-bottom: 16px;
}
.sidebar-section h3 {
margin-top: 0;
margin-bottom: 12px;
color: #003366;
text-align:
center;
font-size: 1
.2em;
border-bottom: 2px solid #007bff;
padding-bottom: 4px;
}
.nav-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sidebar ul li {
margin: 10px 0;
}
.nav-sidebar ul li a {
display: block;
padding: 7px 10px;
color: #333;
text-decoration: none;
border-radius: 6px;
font-size: 15px;
transition: background 0
.3s ease, color 0
.3s ease;
}
.nav-sidebar ul li a:hover {
background-color: #007bff;
color: white;
}
/* 右上角修改时间显示（竖直排列） */
.update-time {
position: fixed;
top: 90px;
right: 30px;
background: rgba(0, 0, 0, 0
.7);
color: #fff;
font-size: 0
.9em;
padding: 10px 14px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0
.2);
z-index: 1000;
text-align:
center;
line-height: 1
.6;
}
.update-time strong {
display: block;
margin-top: 5px;
font-weight: bold;
}
/* 语音介绍按钮：横向放置在右下角 */
#voice-btn {
position: fixed;
bottom: 30px;
right: 30px;
transform: none;
width: auto;
height: auto;
padding: 12px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0
.3);
z-index: 1000;
display: flex;
align-items:
center;
justify-content:
center;
gap: 8px;
white-space: nowrap;
}
#voice-btn:hover {
background-color: #0056b3;
}
/* 主容器增加背景透明度以提升可读性 */
main
.container {
background-color: rgba(255, 255, 255, 0
.95);
border-radius: 12px;
padding: 20px;
margin: 20px auto;
max-width: 960px;
box-shadow: 0 2px 10px rgba(0,0,0,0
.1);
position: relative;
z-index: 1;
}
footer {
text-align:
center;
padding: 20px;
background-color: rgba(0, 0, 0, 0
.7);
color: white;
margin-top: 20px;
border-radius: 10px 10px 0 0;
}
/* 小屏幕下隐藏侧边栏 */
@media (max-width: 768px) {
.sidebar-container,
.update-time {
display: none;
}
}
</style>
</head>
<body>
<!-- 底层背景遮罩层 -->
<
div class="overlay"></
div>
<
header class="navbar">
<img src="images/logo
.png" alt="Logo" class="logo" />
<nav>
<a href="index
.html">首页</a>
<a href="about
.html">关于我</a>
<a href="skills
.html">技能</a>
<a href="projects
.html">项目</a>
<a href="education
.html">教育</a>
<a href="experience
.html">经历</a>
<a href="gallery
.html">画廊</a>
<a href="contact
.html">联系</a>
<a href="register
.html">注册</a>
</nav>
</
header>
<!-- 语音介绍按钮：小巧圆形按钮，悬停展开 -->
<button id="voice-btn">
<span>语音</span>
</button>
<!-- 左侧统一
样式的侧边栏容器 -->
<
div class="sidebar-container">
<!-- 快速导航栏 -->
<
div class="sidebar-section nav-sidebar">
<h3>快速导航</h3>
<ul>
<li><a href="index
.html">首页</a></li>
<li><a href="about
.html">关于我</a></li>
<li><a href="skills
.html">技能</a></li>
<li><a href="projects
.html">项目</a></li>
<li><a href="education
.html">教育</a></li>
<li><a href="experience
.html">经历</a></li>
<li><a href="gallery
.html">画廊</a></li>
<li><a href="contact
.html">联系</a></li>
<li><a href="register
.html">注册</a></li>
</ul>
</
div>
</
div>
<!-- 右上角修改时间 -->
<
div class="update-time">
最后修改时间：<br>
<strong>2025年12月20日</strong><br>
<strong>2025年12月21日</strong><br>
<strong>2025年12月22日</strong><br>
<strong>2025年12月23日</strong><br>
<strong>2025年12月24日</strong>
</
div>
<!-- 百度搜索栏 -->
<section class="search-box">
<form action="https://www
.baidu
.com/s" method="get" target="_blank">
<input type="text" name="wd" placeholder="请输入搜索内容
..." required />
<button type="submit">百度搜索</button>
</form>
</section>
<!-- 图片轮播图 -->
<
div class="carousel" id="myCarousel">
<
div class="carousel-inner">
<img src="images/cover1
.jpg" alt="封面1">
<img src="images/cover2
.jpg" alt="封面2">
<img src="images/cover3
.jpg" alt="封面3">
</
div>
<button class="carousel-btn prev" onclick="moveSlide(-1)">❮</button>
<button class="carousel-btn next" onclick="moveSlide(1)">❯</button>
<
div class="dots" id="dots-container"></
div>
</
div>
<!-- 主体内容 -->
<main class="container">
<h2>关于我</h2>
<img src="images/placeholder
.jpg" alt="My Photo" width="200" style="float:right;margin:0 0 15px 20px;
border-radius:10px;">
<
div style="font-size: 1
.1em; line-height: 1
.8; text-indent: 2em; margin: 20px 0; color: #444;">
我是<strong>李硕</strong>，目前就读于天津外国语大学大数据管理与应用专业，学号：2307124008。我对前端开发、UI设计以及人工智能方向有浓厚兴趣。在校期间积极参与各类竞赛和技术社团活动，曾获得某些奖项，并作为志愿者参与社区数字化建设项目。曾经参与国家重点实验室牵
头的深微钻削项目研发，协助负责人制定项目技术方案与进度规划；参与核心技术参数调试与实验数据整理分析，为项目成果优化提供数据支撑，提升项目研发效率约15%。
</
div>
</
div>
<h3>个性特点</h3>
<ul>
<li>做事认真负责，具备良好的团队协作能力</li>
<li>善于沟通表达，乐于分享知识</li>
<li>持续学习新技术，关注行业动态</li>
<li>注重细节，追求用户体验优化</li>
</ul>
<h3>论文结构（目录）</h3>
<
table border="1" cellpadding="10" style="width:100%;margin:15px 0;background:#f9f9f9;font-size:16px;line-height:2
.0;">
<tr><td><strong>摘要</strong></td><td>II</td></tr>
<tr><td><strong>Abstract</strong></td><td>
III</td></tr>
<tr><td><strong>目录</strong></td><td>Ⅳ</td></tr>
<tr><td><strong>第一章 绪论</strong></td><td>1</td></tr>
<tr><td>1
.1 课题背景与意义</td><td>1</td></tr>
<tr><td>1
.2 研究现状</td><td>3</td></tr>
<tr><td> 1
.2
.1 PCB与微钻材料</td><td>4</td></tr>
<tr><td> 1
.2
.2 PCB微孔钻削加工</td><td>5</td></tr>
<tr><td>1
.3 主要研究内容与方法</td><td>6</td></tr>
<tr><td>1
.4 论文结构</td><td>7</td></tr>
<tr><td><strong>第二章 PCB微钻钻削实验设计</strong></td><td>8</td></tr>
<tr><td>2
.1 钻削力测试设计</td><td>8</td></tr>
<tr><td> 2
.1
.1 研究方案</td><td>9</td></tr>
<tr><td> 2
.1
.2 实验材料</td><td>9</td></tr>
<tr><td> 2
.1
.3 实验设备</td><td>9</td></tr>
<tr><td>2
.2 微孔质量及微钻磨损分析设计</td><td>9</td></tr>
<tr><td> 2
.2
.1 孔壁质量分析设计</td><td>9</td></tr>
<tr><td> 2
.2
.2 微钻磨损分析设计</td><td>10</td></tr>
<tr><td>2
.3 本章小结</td><td>11</td></tr>
<tr><td><strong>第三章 钻削力影响因素的研究</strong></td><td>17</td></tr>
<tr><td>3
.1 刀具涂层对钻削力的影响</td><td>17</td></tr>
<tr><td> 3
.1
.1 刀具涂层对轴向力的影响</td><td>17</td></tr>
<tr><td> 3
.1
.2 刀具涂层对扭矩的影响</td><td>17</td></tr>
<tr><td>3
.2 转速和进给速度对钻削力的影响</td><td>18</td></tr>
<tr><td> 3
.2
.1 转速和进给速度对轴向力的影响</td><td>18</td></tr>
<tr><td> 3
.2
.2 转速和进给速度对扭矩的影响</td><td>19</td></tr>
<tr><td>3
.3 垫板材料对钻削力的影响</td><td>23</td></tr>
<tr><td> 3
.3
.1 垫板材料对轴向力的影响</td><td>24</td></tr>
<tr><td> 3
.3
.2 垫板材料对扭矩的影响</td><td>24</td></tr>
<tr><td>3
.4 盖板材料对钻削力的影响</td><td>28</td></tr>
<tr><td> 3
.4
.1 盖板材料对轴向力的影响</td><td>28</td></tr>
<tr><td> 3
.4
.2 盖板材料对扭矩的影响</td><td>28</td></tr>
<tr><td>3
.5 钻
头直径对钻削力的影响</td><td>29</td></tr>
<tr><td> 3
.5
.1 钻
头直径对轴向力的影响</td><td>29</td></tr>
<tr><td> 3
.5
.2 钻
头直径对扭矩的影响</td><td>29</td></tr>
<tr><td>3
.6 本章总结</td><td>29</td></tr>
<tr><td><strong>第四章 微钻磨损和孔壁质量分析</strong></td><td>30</td></tr>
<tr><td>4
.1 孔壁质量分析</td><td>30</td></tr>
<tr><td>4
.2 微钻磨损分析</td><td>32</td></tr>
<tr><td>4
.3 本章总结</td><td>33</td></tr>
<tr><td><strong>第五章 总结与展望</strong></td><td>34</td></tr>
<tr><td>5
.1 论文工作总结</td><td>34</td></tr>
<tr><td>5
.2 工作展望</td><td>35</td></tr>
<tr><td><strong>参考文献</strong></td><td>36</td></tr>
<tr><td><strong>致谢</strong></td><td>37</td></tr>
</
table>
</main>
<h3>工作时间轴</h3>
<
table border="1" cellpadding="10" style="width:100%;margin:15px 0;background:#f0f8ff;">
<tr><td><strong>2022年1月</strong></td><td>选题</td></tr>
<tr><td><strong>2022年2月</strong></td><td>开题报告</td></tr>
<tr><td><strong>2022年3月</strong></td><td>中期检查</td></tr>
<tr><td><strong>2022年4月</strong></td><td>论文答辩</td></tr>
<tr><td><strong>2022年5月</strong></td><td>交叉评审</td></tr>
</
table>
</main>
<
footer>
<p>© 2025 李硕 | 学号：2307124008</p>
</
footer>
<!-- JavaScript
脚本 -->
<script>
// 轮播图控制逻辑
let currentIndex = 0;
const totalSlides = 3;
// 动态生成指示点
const dotsContainer = document
.getElementById('dots-container');
for (let i = 0; i < totalSlides; i++) {
const dot = document
.createElement('span');
dot
.classList
.add('dot');
if (i === 0) dot
.classList
.add('active');
dot
.onclick = () => goToSlide(i);
dotsContainer
.appendChild(dot);
}
// 移动幻灯片
function moveSlide(direction) {
const newIdx = (currentIndex + direction + totalSlides) % totalSlides;
goToSlide(newIdx);
}
// 跳转到指定幻灯片
function goToSlide(index) {
currentIndex = index;
const carouselInner = document
.querySelector('
.carousel-inner');
const dots = document
.querySelectorAll('
.dot');
carouselInner
.style
.transform = `translateX(-${currentIndex * 100 / 3}%)`;
dots
.forEach((dot, i) => {
dot
.classList
.toggle('active', i === currentIndex);
});
}
// 自动播放
setInterval(() => {
moveSlide(1);
}, 4000); // 每4秒切换一次
// 语音介绍功能：点击播放，再次点击停止
const voiceBtn = document
.getElementById("voice-btn");
let isSpeaking = false;
let utterance = null;
voiceBtn
.addEventListener("click", () => {
if (!isSpeaking) {
if ('speechSynthesis' in window) {
utterance = new SpeechSynthesisUtterance();
utterance
.text = "本人是来自天津外国语大学国际商学院2023级的李硕，学号是2307124008";
utterance
.lang = 'zh-CN';
utterance
.rate = 1;
utterance
.pitch = 1;
utterance
.onend = () => {
isSpeaking = false;
voiceBtn
.textContent = "▶ 语音介绍";
};
window
.speechSynthesis
.speak(utterance);
isSpeaking = true;
voiceBtn
.textContent = "⏸ 停止播放";
} else {
alert("您的浏览器不支持语音合成功能，请升级浏览器。");
}
} else {
// 停止语音
window
.speechSynthesis
.cancel();
isSpeaking = false;
voiceBtn
.textContent = "▶ 语音介绍";
}
});
</script>
</body>
</html>
工作时间轴的格式有问题
本文提供了一个关于CSS DIV样式布局的模板，适用于新手学习和参考。包括头、尾、主体和中心区域的代码示例。
扫一扫
1988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
