<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技节项目探索网站</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f4f4f4;
background-image: url('background.jpg');
background-size: cover; /* 背景图片覆盖整个页面 */
background-position: center; /* 背景图片居中 */
}
header {
color: white;
padding: 20px 0;
text-align: center;
}
h1 {
margin: 0;
font-size: 3.9em; /* 增大标题字体 */
}
h2 {
color: yellow; /* 副标题颜色与头部背景色对比 */
margin-top: 10px;
font-size: 1.5em; /* 增大副标题字体 */
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加容器阴影效果 */
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.gallery-item {
flex: 1 1 calc(25% - 20px);
box-sizing: border-box;
text-align: center;
background-color: white; /* 项目卡片背景颜色 */
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片阴影效果 */
border-radius: 8px; /* 卡片圆角 */
}
.gallery-item img {
max-width: 100%;
height: auto;
border: 2px solid #ddd; /* 图片边框 */
border-radius: 8px; /* 图片圆角 */
}
.shadowed-text {
text-shadow: 2px 2px 2px #000000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
.gallery-item a {
text-decoration: none;
color: #333;
}
.gallery-item:hover {
transform: scale(1.05); /* 鼠标悬停时放大图片 */
}
.gallery-item a:hover {
text-decoration: underline;
}
.project-name {
margin-top: 10px;
font-size: 1.2em;
}
.project-description {
margin-top: 5px;
font-size: 0.9em;
color: #666;
}
/* 响应式设计 */
@media (max-width: 768px) {
.gallery-item {
flex: 1 1 calc(50% - 20px); /* 在小屏幕上每行显示两个项目 */
}
}
@media (max-width: 480px) {
.gallery-item {
flex: 1 1 100%; /* 在更小的屏幕上每行显示一个项目 */
}
h1 {
font-size: 2em; /* 在小屏幕上减小标题字体 */
}
h2 {
font-size: 1.2em; /* 在小屏幕上减小副标题字体 */
}
}
</style>
</head>
<body>
<header>
<h1 class="shadowed-text">科技节项目探索网站</h1>
<h2 class="shadowed-text">科学探索乐趣多，和谐发展你我他！</h2>
</header>
<div class="container">
<div class="gallery">
<div class="gallery-item">
<a href="https://bi.cool/project/fKRjc23l">
<img src="images1/3D.jpg" alt="3D打印", style="width:200px; height:150px;">
<div class="project-name">3D打印</div>
<div class="project-description">探索三维世界的无限可能。</div>
</a>
</div>
<div class="gallery-item">
<a href="1组_机器狗.html">
<img src="images1/jiqigou.jpg" alt="机器狗", style="width:200px; height:150px;">
<div class="project-name">机器狗</div>
<div class="project-description">智能机器狗，陪你一起成长。</div>
</a>
</div>
<div class="gallery-item">
<a href="2组_风力发电.html">
<img src="images1/fenglifadian.jpg" alt="风力发电", style="width:200px; height:150px;">
<div class="project-name">风力发电</div>
<div class="project-description">绿色能源，从风力开始。</div>
</a>
</div>
<div class="gallery-item">
<a href="2组_编程创意.html">
<img src="images1/bianchengchuangyi.jpg" alt="编程创意", style="width:200px; height:150px;">
<div class="project-name">编程创意</div>
<div class="project-description">代码创造未来。</div>
</a>
</div>
<div class="gallery-item">
<a href="3组_智能浇花系统.html">
<img src="images1/zhinengjiaohuaxitong.jpg" alt="智能浇花系统", style="width:200px; height:150px;">
<div class="project-name">智能浇花系统</div>
<div class="project-description">让植物享受智能呵护。</div>
</a>
</div>
<div class="gallery-item">
<a href="3组_自制简易显微镜.html">
<img src="images1/xianweijing.jpg" alt="自制简易显微镜", style="width:200px; height:150px;">
<div class="project-name">自制简易显微镜</div>
<div class="project-description">探索微观世界的奥秘。</div>
</a>
</div>
<div class="gallery-item">
<a href="4组_智能避障小车.html">
<img src="images1/xiaoche.jpg" alt="智能避障小车", style="width:200px; height:150px;">
<div class="project-name">智能避障小车</div>
<div class="project-description">智能导航，灵活避障。</div>
</a>
</div>
<div class="gallery-item">
<a href="4组_环保手提袋制作.html">
<img src="images1/shoutidai.jpg" alt="环保手提袋制作", style="width:200px; height:150px;">
<div class="project-name">环保手提袋制作</div>
<div class="project-description">动手制作，为地球减负。</div>
</a>
</div>
</div>
</div>
</body>
</html>
index.html
index.html