<!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>
.gallery
-container {
display
: flex;
flex
-wrap
: wrap;
gap
: 30px;
max
-width
: 90%;
margin
: 0 auto;
padding
: 20px;
background
: #fff;
/* 移除外框阴影 */
border
-radius
: 10px;
}
.gallery
-section {
flex
: 1;
min
-width
: 40%;
}
.description
-section {
flex
: 1;
min
-width
: 40%;
padding
: 20px;
background
: #fff;
border
-radius
: 8px;
/* 减小整体字体大小 */
font-size: 14px;
}
/* 添加标题样式 */
.section
-title {
font-size: 2
.0
em; /* 比正文稍大但比原设计小 */
font-weight
: bold;
color
: #0566a8;
margin
-top
: 0;
padding
-bottom
: 0px;
/*border
-bottom
: 1px solid #eee;*/
margin
-bottom
: 0px;
}
/* 添加联系按钮样式 */
.contact
-button {
display
: inline
-block;
margin
-top
: 20px;
padding
: 10px 20px;
background
-color
: #0566a8;
color
: white;
text
-decoration
: none;
border
-radius
: 4px;
font-weight
: 500;
transition
: all 0
.3s ease;
border
: none;
cursor
: pointer;
font-size: 16px;
text
-align
: center;
width
: 100%;
box
-sizing
: border
-box;
}
.contact
-button
:hover {
background
-color
: #034a7a;
transform
: translateY(
-2px);
box
-shadow
: 0 4px 8px rgba(0,0,0,0
.1);
}
.main
-image {
width
: 100%;
border
-radius
: 8px;
box
-shadow
: 0 5px
15px rgba(0,0,0,0
.2);
cursor
: pointer;
transition
: transform 0
.3s;
}
.main
-image
:hover {
transform
: scale(
1.0
1);
}
.thumbnails {
display
: flex;
justify
-content
: center;
gap
: 10px;
margin
-top
: 15px;
overflow
-x
: auto;
padding
: 10px 0;
}
.thumbnail {
width
: 70px;
height
: 70px;
border
-radius
: 5px;
cursor
: pointer;
object
-fit
: cover;
border
: 2px solid transparent;
transition
: all 0
.3s;
opacity
: 0
.7;
}
.thumbnail
:hover,
.thumbnail
.active {
opacity
: 1;
border
-color
: #0566a8;
transform
: scale(
1.05);
}
/* 居中模态框样式 */
.modal {
display
: none;
position
: fixed;
z
-index
: 1000;
top
: 0;
left
: 10%;
width
: 100%;
height
: 100%;
background
-color
: rgba(0,0,0,0
.9);
overflow
: auto;
}
.modal
-content {
position
: absolute;
top
: 50%;
left
: 50%;
transform
: translate(
-50%,
-50%);
max
-width
: 80%;
max
-height
: 80%;
object
-fit
: contain;
border
-radius
: 5px;
box
-shadow
: 0 0 30px rgba(0,0,0,0
.6);
}
/* 导航按钮样式 */
.nav
-btn {
position
: fixed;
top
: 50%;
transform
: translateY(
-50%);
color
: white;
font-size: 40px;
cursor
: pointer;
background
: rgba(0,0,0,0
.3);
width
: 60px;
height
: 60px;
display
: flex;
justify
-content
: center;
align
-it
ems
: center;
border
-radius
: 50%;
z
-index
: 1002;
transition
: all 0
.3s;
}
.nav
-btn
:hover {
background
: rgba(0,0,0,0
.6);
transform
: translateY(
-50%) scale(
1.1);
}
.prev
-btn {
left
: 12%;
}
.next
-btn {
right
: 12%;
}
.close {
position
: fixed;
top
: 5%;
right
: 12%;
color
: #f
1f
1f
1;
font-size: 40px;
font-weight
: bold;
cursor
: pointer;
transition
: 0
.3s;
z
-index
: 100
1;
background
: rgba(0,0,0,0
.3);
width
: 50px;
height
: 50px;
display
: flex;
justify
-content
: center;
align
-it
ems
: center;
border
-radius
: 50%;
}
.close
:hover {
color
: #bbb;
background
: rgba(0,0,0,0
.6);
transform
: scale(
1.1);
}
.feature
-list {
margin
: 0;
padding
-left
: 20px;
/* 减小列表字体大小 */
font-size: 0
.95
em;
}
.feature
-list li {
margin
-bottom
: 10px;
position
: relative;
}
.feature
-list li
::before {
content
: "•";
color
: #3498db;
position
: absolute;
left
: -15px;
font-size: 1.2
em;
}
@media (max
-width
: 768px) {
.gallery
-container {
flex
-direction
: column;
max
-width
: 95%;
}
.thumbnails {
justify
-content
: flex
-start;
}
.nav
-btn {
width
: 40px;
height
: 40px;
font-size: 24px;
}
.close {
font-size: 30px;
width
: 40px;
height
: 40px;
}
.section
-title {
font-size: 1.2
em;
}
}
</style>
</head>
<body>
<div class="gallery
-container">
<!
-- 左侧图片画廊
-->
<div class="gallery
-section">
<img id="mainImage" class="main
-image" src="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月9日
-11_40_06_compressed
.png" alt="图集">
<div class="thumbnails">
<img class="thumbnail active" src="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月9日
-11_40_06_compressed
.png" alt="图一" data
-large="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月9日
-11_40_06_compressed
.png">
<img class="thumbnail" src="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-11_05_58_compressed
.png" alt="图二" data
-large="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-11_05_58_compressed
.png">
<img class="thumbnail" src="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-11_38_09_compressed
.png" alt="图三" data
-large="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-11_38_09_compressed
.png">
<img class="thumbnail" src="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-13_55_
14_compressed
.png" alt="图四" data
-large="https
://www
.fetchingpack
.com/wp
-content/uploads/2025/07/ChatGPT
-Image
-2025年6月
10日
-13_55_
14_compressed
.png">
</div>
</div>
<!
-- 右侧文字描述
- 添加了标题
-->
<div class="description
-section">
<!
-- 添加的标题
-->
<h2 class="section
-title">collapsible rigid box</h2>
<div class="description
-content">
<ul class="feature
-list">
<li>We offer collapsible rigid boxes in three
sizes—Large, Medium, and Tiny，each a proprietary structure we developed in
-house and protected by our patents
.<br>Image
1- Large
:Suitable for magnetic gift boxes with product height of
100
-150mm
.<br>Image 2
- Medium
:Suitable for magnetic gift boxes with product height of 50
-100mm
.<br>Image 3
- Tiny
:Suitable for magnetic gift boxes with product height of 20
-50mm
.</li>
<li>Our collapsible rigid box, can save more than 60% of shipping and storage costs compared with rigid gift box,save 20%
-30% costs compared with standard collapsible rigid box
.</li>
<li>Can be apply cold or hot foil stamping, UV, frosted touch,
embossing and other surface processes to enhance the overall packaging visual effect
.</li>
<li>Using automatic visual positioning boxes production line, short production time and stable quality
.</li>
<li>FSC certified material, environmentally friendly and recyclable
.</li>
</ul>
<!
-- 添加的联系按钮
-->
<a href="https
://www
.fetchingpack
.com/contact
-us/" class="contact
-button">Contact Us</a>
</div>
</div>
</div>
<!
-- 图片模态框
-->
<div id="imag
eModal" class="modal">
<span class="close">×</span>
<div class="prev
-btn nav
-btn">❮</div>
<div class="next
-btn nav
-btn">❯</div>
<img class="modal
-content" id="expandedImage">
</div>
<script>
// 获取DOM元素
const mainImage = document
.getEl
ementById('mainImage');
const thumbnails = document
.querySelectorAll('
.thumbnail');
const modal = document
.getEl
ementById('imag
eModal');
const expandedImg = document
.getEl
ementById('expandedImage');
const closeBtn = document
.querySelector('
.close');
const prevBtn = document
.querySelector('
.prev
-btn');
const nextBtn = document
.querySelector('
.next
-btn');
// 当前选中的图片索引
let currentIndex = 0;
// 缩略图点击事件
thumbnails
.forEach((thumb, index) => {
thumb
.addEventListener('click', function() {
// 更新主图
updat
eMainImage(this
.dataset
.large, this
.alt);
// 更新当前索引
currentIndex = index;
// 更新激活状态
thumbnails
.forEach(t => t
.classList
.r
emove('active'));
this
.classList
.add('active');
});
});
// 更新主图函数
function updat
eMainImage(src, alt) {
mainImage
.src = src;
mainImage
.alt = alt;
}
// 主图点击事件
- 打开模态框
mainImage
.addEventListener('click', function() {
openModal(this
.src, this
.alt);
});
// 打开模态框函数
function openModal(src, alt) {
modal
.style
.display = 'block';
expandedImg
.src = src;
expandedImg
.alt = alt;
document
.body
.style
.overflow = 'hidden'; // 防止背景滚动
}
// 关闭模态框函数
function clos
eModal() {
modal
.style
.display = 'none';
document
.body
.style
.overflow = ''; // 恢复背景滚动
}
// 关闭按钮点击事件
closeBtn
.addEventListener('click', clos
eModal);
// 点击模态框背景关闭
modal
.addEventListener('click', function(e) {
if (e
.target === modal) {
clos
eModal();
}
});
// ESC键关闭模态框
document
.addEventListener('keydown', function(e) {
if (e
.key === 'Escape' && modal
.style
.display === 'block') {
clos
eModal();
}
});
// 上一张按钮
prevBtn
.addEventListener('click', function(e) {
e
.stopPropagation(); // 防止触发背景关闭
navigate(
-1);
});
// 下一张按钮
nextBtn
.addEventListener('click', function(e) {
e
.stopPropagation(); // 防止触发背景关闭
navigate(
1);
});
// 键盘左右键导航
document
.addEventListener('keydown', function(e) {
if (modal
.style
.display !== 'block') return;
if (e
.key === 'ArrowLeft') {
navigate(
-1);
} else if (e
.key === 'ArrowRight') {
navigate(
1);
}
});
// 导航函数
function navigate(direction) {
currentIndex += direction;
// 循环处理
if (currentIndex < 0) {
currentIndex = thumbnails
.length
- 1;
} else if (currentIndex >= thumbnails
.length) {
currentIndex = 0;
}
// 获取新的缩略图
const newThumb = thumbnails[currentIndex];
// 更新模态框中的图片
expandedImg
.src = newThumb
.dataset
.large;
expandedImg
.alt = newThumb
.alt;
// 更新激活状态
thumbnails
.forEach(t => t
.classList
.r
emove('active'));
newThumb
.classList
.add('active');
// 更新主图
updat
eMainImage(newThumb
.dataset
.large, newThumb
.alt);
}
// 添加触摸滑动支持
let touchStartX = 0;
expandedImg
.addEventListener('touchstart', (e) => {
touchStartX = e
.touches[0]
.clientX;
});
expandedImg
.addEventListener('touchend', (e) => {
const touchEndX = e
.changedTouches[0]
.clientX;
const diffX = touchStartX
- touchEndX;
if (Math
.abs(diffX) > 50) { // 滑动距离阈值
if (diffX > 0) {
navigate(
1); // 向左滑动，下一张
} else {
navigate(
-1); // 向右滑动，上一张
}
}
});
</script>
</body>
</html>
如何缩短标题和文本之间的距离
本文详细解释了如何使用CSS中的font-weight和font-size属性来实现文本加粗和大小调整，通过实例展示了em单位如何计算实际字体大小。
扫一扫
2832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
