<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<title>Premium Materials Gallery</title>
<style>
/* 容器样式 */
.luxemg
-container {
max
-width
: 8
0%;
margin
: 0 auto;
padding
: 4
0px 20px;
position
: relative;
}
/* 标题区域 */
.luxemg
-header {
text
-align
: center;
margin
-bottom
: 5
0px;
padding
-bottom
: 20px;
border
-bottom
: 1
px solid #e
0e
0e
0;
}
.luxemg
-title {
font
-weight
: 3
00;
letter-spacing: 2px;
color
: #333;
margin
: 0 0 1
0px 0;
font
-size
: 28
px;
}
.luxemg
-subtitle {
color
: #7a7a7a;
max
-width
: 6
00px;
margin
: 0 auto;
line
-height
: 1
.6;
}
/* 网格布局 */
.luxemg
-grid {
display
: grid;
grid
-template
-columns
: repeat(4, 1fr);
gap
: 3
0px;
}
/* 卡片样式 */
.luxemg
-card {
background
: white;
border
-radius
: 8
px;
overflow
: hidden;
box
-shadow
: 0 5
px 15
px rgba(
0,
0,
0,
0.05);
transition
: transform
0.3s ease, box
-shadow
0.3s ease;
position
: relative;
display
: flex;
flex
-direction
: column;
height
: 1
00%;
}
.luxemg
-card
:hover {
transform
: translateY(
-8
px);
box
-shadow
: 0 1
2px 25
px rgba(
0,
0,
0,
0.08);
}
.luxemg
-card
-image {
height
: 24
0px;
overflow
: hidden;
background
: #f8f8f8;
}
.luxemg
-card
-img {
width
: 1
00%;
height
: 1
00%;
object
-fit
: cover;
transition
: transform
0.5s ease;
}
.luxemg
-card
:hover
.luxemg
-card
-img {
transform
: scale(1
.05);
}
.luxemg
-card
-content {
padding
: 25
px;
flex
-grow
: 1;
display
: flex;
flex
-direction
: column;
}
.luxemg
-card
-title {
font
-weight
: 4
00;
margin
: 0 0 15
px 0;
font
-size
: 22px;
letter-spacing: 1
px;
color
: #
222;
}
.luxemg
-card
-desc {
color
: #666;
line
-height
: 1
.7;
margin
: 0 0 20px 0;
font
-size
: 16
px;
flex
-grow
: 1;
}
/* 详情按钮样式 */
.luxemg
-detail
-btn {
display
: inline
-block;
padding
: 1
0px 20px;
background
: #
000;
color
: white;
border
: 2px solid #
000;
border
-radius
: 4
px;
cursor
: pointer;
font
-weight
: 5
00;
letter-spacing: 1
px;
text
-transform
: uppercase;
font
-size
: 14
px;
transition
: all
0.3s ease;
align
-self
: flex
-start;
}
.luxemg
-detail
-btn
:hover {
background
: white !important;
color
: black !important;
}
/* 模态框样式 */
#luxemg
-modal
-container {
position
: fixed;
top
: 0;
left
: 1
0%;
width
: 1
00%;
height
: 1
00%;
background
: rgba(
0,
0,
0,
0.8);
display
: none;
z
-index
: 1
0000;
opacity
: 0;
transition
: opacity
0.3s ease;
}
.luxemg
-modal
-wrapper {
display
: flex;
align
-items
: center;
justify
-content
: center;
width
: 1
00%;
height
: 1
00%;
padding
: 20px;
box
-sizing
: border
-box;
}
.luxemg
-modal
-content {
background
: white;
width
: 1
00%;
max
-width
: 9
00px;
max
-height
: 9
0vh;
border
-radius
: 8
px;
overflow
: hidden;
display
: flex;
flex
-direction
: column;
box
-shadow
: 0 20px 4
0px rgba(
0,
0,
0,
0.3);
transform
: scale(
0.95);
transition
: transform
0.4s cubic
-bezier(
0.18,
0.89,
0.3
2, 1
.28), opacity
0.3s ease;
opacity
: 0;
}
.luxemg
-modal
-header {
display
: flex;
justify
-content
: space
-between;
align
-items
: center;
padding
: 20px;
border
-bottom
: 1
px solid #eee;
}
.luxemg
-modal
-title {
margin
: 0;
font
-size
: 24
px;
font
-weight
: 4
00;
color
: #333;
}
.luxemg
-close
-btn {
background
: none;
border
: none;
font
-size
: 24
px;
cursor
: pointer;
color
: #888;
transition
: color
0.3s;
}
.luxemg
-close
-btn
:hover {
color
: #333;
}
.luxemg
-modal
-body {
display
: flex;
overflow
: auto;
flex
-grow
: 1;
padding
: 0;
}
.luxemg
-modal
-image
-container {
width
: 5
0%;
min
-width
: 3
00px;
background
: #f8f8f8;
display
: flex;
align
-items
: center;
justify
-content
: center;
padding
: 3
0px;
}
.luxemg
-modal
-img {
max
-width
: 1
00%;
max
-height
: 4
00px;
object
-fit
: contain;
}
.luxemg
-modal
-description {
width
: 5
0%;
padding
: 3
0px;
overflow
-y
: auto;
}
.luxemg
-modal
-desc {
line
-height
: 1
.8;
color
: #555;
}
.luxemg
-specs
-table {
width
: 1
00%;
border
-collapse
: collapse;
margin
-top
: 25
px;
font
-size
: 15
px;
}
.luxemg
-specs
-table th {
padding
: 1
0px;
text
-align
: left;
border
-bottom
: 1
px solid #eee;
background
: #f5f5f5;
}
.luxemg
-specs
-table td {
padding
: 1
0px;
border
-bottom
: 1
px solid #eee;
}
/* 响应式设计 */
@media (max
-width
: 1
024
px) {
.luxemg
-grid {
grid
-template
-columns
: repeat(
2, 1fr);
}
}
@media (max
-width
: 768
px) {
.luxemg
-container {
padding
: 3
0px 15
px;
}
.luxemg
-grid {
grid
-template
-columns
: 1fr;
gap
: 25
px;
}
.luxemg
-card {
max
-width
: 5
00px;
margin
: 0 auto;
}
.luxemg
-modal
-body {
flex
-direction
: column;
}
.luxemg
-modal
-image
-container,
.luxemg
-modal
-description {
width
: 1
00% !important;
}
.luxemg
-modal
-image
-container {
height
: 3
00px;
min
-height
: auto;
}
}
@media (max
-width
: 48
0px) {
.luxemg
-title {
font
-size
: 24
px;
}
.luxemg
-card
-title {
font
-size
: 20px;
}
.luxemg
-card
-desc {
font
-size
: 15
px;
}
}
@media (max
-height
: 7
00px) {
.luxemg
-modal
-content {
max
-height
: 85vh;
}
}
</style>
</head>
<body>
<div class="luxemg
-container">
<!
-- 材料展示网格
-->
<div class="luxemg
-grid">
<!
-- 材料项 1
-->
<div class="luxemg
-card">
<div class="luxemg
-card
-image">
<img src="https
://www
.fetchingpack
.com/wp
-content/uploads/
2025/
06/ChatGPT
-Image
-2025年6月18日
-16_45_4
2_compressed
.png"
alt="double
-sided coated paper"
class="luxemg
-card
-img">
</div>
<div class="luxemg
-card
-content">
<h3 class="luxemg
-card
-title">double
-sided coated paper</h3>
<button class="luxemg
-detail
-btn" data
-luxemg
-modal="modal1">VIEW MORE</button>
</div>
</div>
<!
-- 材料项
2 -->
<div class="luxemg
-card">
<div class="luxemg
-card
-image">
<img src="https
://via
.placeholder
.com/6
00x4
00/e8极8e8/999999?text=Oak+Hardwood"
alt="Oak Hardwood"
class="luxemg
-card
-img">
</div>
<div class="luxemg
-card
-content">
<h3 class="luxemg
-card
-title">Oak Hardwood</h3>
<p class="luxemg
-card
-desc">European white oak with natural grain patterns
...</p>
<button class="luxemg
-detail
-btn" data
-luxemg
-modal="modal
2">VIEW MORE</button>
</div>
</div>
<!
-- 材料项 3
-->
<div class="luxemg
-card">
<div class="luxemg
-card
-image">
<img src="https
://via
.placeholder
.com/6
00x4
00/e8e8e8/999999?text=Brushed+Brass"
alt="Brushed Brass"
class="luxemg
-card
-img">
</div>
<div class="luxemg
-card
-content">
<h3 class="luxemg
-card
-title">Brushed Brass</h3>
<p class="luxemg
-card
-desc">Hand
-finished brass with subtle texture
...</p>
<button class="luxemg
-detail
-btn" data
-luxemg
-modal="modal3">VIEW MORE</button>
</div>
</div>
<!
-- 材料项 4
-->
<div class="luxemg
-card">
<div class="luxemg
-card
-image">
<img src="https
://via
.placeholder
.com/6
00x4
00/e8e8e8/999999?text=Ceramic+Tiles"
alt="Ceramic Tiles"
class="luxemg
-card
-img">
</div>
<div class="luxemg
-card
-content">
<h3 class="luxemg
-card
-title">Ceramic Tiles</h3>
<p class="luxemg
-card
-desc">High
-gloss ceramic tiles with exceptional durability
...</p>
<button class="luxemg
-detail
-btn" data
-luxemg
-modal="modal4">VIEW MORE</button>
</div>
</div>
</div>
</div>
<!
-- 模态框容器
-->
<div id="luxemg
-modal
-container" class="luxemg
-modal
-container">
<div class="luxemg
-modal
-wrapper">
<div class="luxemg
-modal
-content">
<div class="luxemg
-modal
-header">
<h3 id="luxemg
-modal
-title" class="luxemg
-modal
-title">Material Details</h3>
<button id="luxemg
-close
-modal" class="luxemg
-close
-btn">×</button>
</div>
<div class="luxemg
-modal
-body">
<div class="luxemg
-modal
-image
-container">
<img id="luxemg
-modal
-image" class="luxemg
-modal
-img" src="" alt="Material">
</div>
<div class="luxemg
-modal
-description">
<div id="luxemg
-modal
-description" class="luxemg
-modal
-desc"></div>
<table class="luxemg
-specs
-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody id="luxemg
-modal
-specs" class="luxemg
-specs
-body"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
// 使用IIFE创建私有作用域避免全局污染
(function() {
// 材料详情数据
- 使用唯一前缀
const luxemgMaterialDetails = {
modal1
: {
title
: "Italian Marble",
image
: "https
://via
.placeholder
.com/8
00x6
00/e8e8e8/999999?text=Italian+Marble+Detail",
description
: "<p>Premium Carrara marble quarried directly from the Apuan Alps in Tuscany, Italy
. This exquisite natural stone features distinctive soft gray veining on a white or blue
-gray background, creating timeless elegance
.</p><p>Each slab is carefully selected for its unique pattern and quality, ensuring minimal imperfections
. Ideal for high
-end countertops, flooring, and feature walls
. The marble undergoes a specialized polishing process to enhance its natural luster and durability
.</p>",
specs
: [
{ property
: "Origin", value
: "Carrara, Italy" },
{ property
: "Hardness", value
: "3
-4 on Mohs scale" },
{ property
: "Thickness", value
: "
2cm, 3cm" },
{ property
: "Finish", value
: "Polished, Honed" },
{ property
: "Maintenance", value
: "Sealing recommended" }
]
},
modal
2: {
title
: "Oak Hardwood",
image
: "https
://via
.placeholder
.com/8
00x6
00/e8e8e8/999999?text=Oak+Hardwood+Detail",
description
: "<p>European white oak (Quercus robur) sourced from sustainably managed forests
. This premium hardwood features a straight grain with occasional swirls and burls, offering a warm, natural appearance
.</p><p>The wood undergoes a meticulous kiln
-drying process to achieve optimal moisture content (8
-1
0%), ensuring dimensional stability
. Available in various grades from rustic to select, suitable for flooring, furniture, and architectural elements
. The natural tannin content provides inherent resistance to insects and decay
.</p>",
specs
: [
{ property
: "Species", value
: "Quercus robur" },
{ property
: "Janka Hardness", value
: "136
0 lbf" },
{ property
: "Density", value
: "7
20 kg/m³" },
{ property
: "Moisture Content", value
: "8
-1
0%" },
{ property
: "Sustainability", value
: "FSC Certified" }
]
},
modal3
: {
title
: "Brushed Brass",
image
: "https
://via
.placeholder
.com/8
00x6
00/e8e8e8/999999?text=Brushed+Brass+Detail",
description
: "<p>Hand
-finished brass with a distinctive brushed texture that diffuses light and minimizes fingerprints
. This premium alloy contains 85% copper and 15% zinc, offering a warm golden hue that develops a rich patina over time
.</p><p>The brushing process creates subtle linear patterns that enhance depth and character
. A protective lacquer coating is applied to preserve the finish while allowing for natural aging
. Ideal for hardware, fixtures, and decorative accents in both contemporary and traditional settings
.</p>",
specs
: [
{ property
: "Composition", value
: "85% Copper, 15% Zinc" },
{ property
: "Finish", value
: "Satin Brushed" },
{ property
: "Thickness", value
: "1
.2mm
- 3mm" },
{ property
: "Protection", value
: "Clear Lacquer Coated" },
{ property
: "Patina Development", value
: "Slow, even" }
]
},
modal4
: {
title
: "Ceramic Tiles",
image
: "https
://via
.placeholder
.com/8
00x6
00/e8e8e8/999999?text=Ceramic+Tiles+Detail",
description
: "<p>High
-gloss ceramic tiles manufactured using advanced digital printing technology that replicates natural stone with remarkable fidelity
. The durable glaze is formulated for exceptional scratch and stain resistance
.</p><p>These tiles feature a through
-body color composition, meaning any chips or scratches are less noticeable
. The rectified edges allow for minimal grout lines (as small as 1
.5mm), creating a seamless appearance
. Suitable for both walls and floors in high
-traffic areas
.</p>",
specs
: [
{ property
: "Material", value
: "Porcelain Ceramic" },
{ property
: "PEI Rating", value
: "IV (Heavy Traffic)" },
{ property
: "Water Absorption", value
: "<
0.5%" },
{ property
: "Slip Resistance", value
: "R1
0 (Dry)" },
{ property
: "Sizes", value
: "6
0x6
0cm, 3
0x6
0cm" }
]
}
};
// DOM元素引用
const luxemgModalContainer = document
.getElementById('luxemg
-modal
-container');
const luxemgModalTitle = document
.getElementById('luxemg
-modal
-title');
const luxemgModalImage = document
.getElementById('luxemg
-modal
-image');
const luxemgModalDescription = document
.getElementById('luxemg
-modal
-description');
const luxemgModalSpecs = document
.getElementById('luxemg
-modal
-specs');
const luxemgCloseModal = document
.getElementById('luxemg
-close
-modal');
// 打开模态框函数
function openLuxemgModal(modalId) {
const material = luxemgMaterialDetails[modalId];
const modalContent = luxemgModalContainer
.querySelector('
.luxemg
-modal
-content');
if (!material) {
console
.error("Material details not found for
:", modalId);
return;
}
// 填充模态框内容
luxemgModalTitle
.textContent = material
.title;
luxemgModalImage
.src = material
.image;
luxemgModalImage
.alt = material
.title;
luxemgModalDescription
.innerHTML = material
.description;
// 填充技术规格
luxemgModalSpecs
.innerHTML = '';
material
.specs
.forEach(spec => {
const row = document
.createElement('tr');
row
.innerHTML = `
<td>${spec
.property}</td>
<td>${spec
.value}</td>
`;
luxemgModalSpecs
.appendChild(row);
});
// 显示模态框
luxemgModalContainer
.style
.display = 'block';
// 强制重绘确保动画执行
void luxemgModalContainer
.offsetWidth;
// 应用显示动画
setTimeout(() => {
luxemgModalContainer
.style
.opacity = '1';
modalContent
.style
.transform = 'scale(1)';
modalContent
.style
.opacity = '1';
}, 1
0);
// 禁止背景滚动
document
.body
.style
.overflow = 'hidden';
}
// 关闭模态框函数
function closeLuxemgModal() {
const modalContent = luxemgModalContainer
.querySelector('
.luxemg
-modal
-content');
luxemgModalContainer
.style
.opacity = '
0';
modalContent
.style
.transform = 'scale(
0.95)';
modalContent
.style
.opacity = '
0';
setTimeout(() => {
luxemgModalContainer
.style
.display = 'none';
document
.body
.style
.overflow = '';
}, 3
00);
}
// 事件绑定函数
function initLuxemgGallery() {
// 绑定关闭按钮
luxemgCloseModal
.addEventListener('click', closeLuxemgModal);
// 点击背景关闭
luxemgModalContainer
.addEventListener('click', function(e) {
if (e
.target === this) closeLuxemgModal();
});
// ESC键关闭
document
.addEventListener('keydown', function(e) {
if (e
.key === 'Escape') closeLuxemgModal();
});
// 绑定详情按钮
const detailButtons = document
.querySelectorAll('
.luxemg
-detail
-btn');
detailButtons
.forEach(button => {
button
.addEventListener('click', function() {
const modalId = this
.getAttribute('data
-luxemg
-modal');
console
.log("Opening modal
:", modalId);
openLuxemgModal(modalId);
});
});
console
.log("Gallery initialized
. Found", detailButtons
.length, "detail buttons
.");
}
// DOM加载完成后初始化
document
.addEventListener('DOMContentLoaded', initLuxemgGallery);
})();
</script>
</body>
</html>
去掉这段代码中的卡片上的
文字描述，保留标题和按钮
本文探讨了在不同浏览器（IE8、Firefox 和 Chrome）中同一段文字显示行数不一致的问题，并提供了一种解决方案：通过调整 letter-spacing 属性使文本在各浏览器中的表现统一。
扫一扫
8505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
