代码是完整的,包含了HTML、CSS和一小段JavaScript，您可以直接复制到一个.html文件中，然后在浏览器中打开查看效果。
（图片来源网络，侵删）
设计特点
- 响应式设计：在桌面、平板和手机上都能完美显示。
- 现代简洁：使用大图、优雅的字体和充足的留白，营造高级感。
- 交互体验：导航栏在滚动时会固定在顶部，图片有悬停效果，提升用户体验。
- 易于定制：代码结构清晰，您可以轻松替换图片、文字和颜色来符合您的品牌。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">梦纱婚纱馆 | 记录您的完美瞬间</title>
<!-- 引入字体图标库 (Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden; /* 防止水平滚动条 */
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3 {
font-weight: 300;
line-height: 1.2;
}
h2 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 1rem;
color: #333;
}
p {
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: #fff;
}
.btn {
display: inline-block;
background: #ff6b6b; /* 优雅的珊瑚色 */
color: #fff;
padding: 12px 30px;
border-radius: 50px;
transition: background 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background: #ff5252;
transform: translateY(-2px);
}
/* --- 导航栏 --- */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
transition: all 0.3s ease;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #ff6b6b;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #ff6b6b;
}
/* --- 英雄区域 --- */
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.hero-content h1 {
font-size: 4rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease 0.2s;
animation-fill-mode: both;
}
.hero-content .btn {
animation: fadeInUp 1s ease 0.4s;
animation-fill-mode: both;
}
/* --- 关于我们 --- */
.about {
padding: 100px 0;
background: #f9f9f9;
}
.about-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.about-text {
flex: 1;
padding-right: 40px;
}
.about-text p {
font-size: 1.1rem;
color: #666;
}
.about-img {
flex: 1;
}
.about-img img {
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* --- 作品集 --- */
.portfolio {
padding: 100px 0;
text-align: center;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
cursor: pointer;
}
.portfolio-item img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
transform: translateY(0);
}
/* --- 服务流程 --- */
.services {
padding: 100px 0;
background: #f9f9f9;
}
.service-steps {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
}
.step {
flex: 1;
min-width: 250px;
text-align: center;
padding: 0 20px;
margin-bottom: 40px;
}
.step-icon {
width: 80px;
height: 80px;
background: #ff6b6b;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
}
/* --- 联系我们 --- */
.contact {
padding: 100px 0;
text-align: center;
}
.contact-info {
display: flex;
justify-content: center;
gap: 50px;
margin-top: 50px;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-item i {
font-size: 1.5rem;
color: #ff6b6b;
}
/* --- 页脚 --- */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 30px 0;
}
/* --- 动画 --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.about-content, .service-steps {
flex-direction: column;
}
.about-text {
padding-right: 0;
margin-bottom: 30px;
}
.nav-links {
display: none; /* 在移动端可以添加汉堡菜单 */
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<a href="#" class="logo">梦纱婚纱</a>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#services">服务流程</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
</nav>
<!-- 英雄区域 -->
<section id="home" class="hero">
<div class="hero-content">
<h1>开启您的梦幻旅程</h1>
<p>在梦纱，我们为您捕捉每一个独一无二的幸福瞬间</p>
<a href="#portfolio" class="btn">探索作品</a>
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="about">
<div class="container">
<h2>关于我们</h2>
<div class="about-content">
<div class="about-text">
<p>梦纱婚纱馆成立于2010年，是一家专注于高端婚纱摄影、婚礼跟拍及私人订制礼服的专业机构，我们拥有一支充满激情与创意的团队，致力于用镜头讲述您最真实、最动人的爱情故事。</p>
<p>我们相信，每一对情侣的爱情都是独一无二的，我们拒绝流水线式的拍摄，而是与您深入沟通，量身定制专属的拍摄方案，让您的婚纱照不仅仅是照片，更是一份值得珍藏的艺术品。</p>
</div>
<div class="about-img">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=2070&auto=format&fit=crop" alt="关于我们">
</div>
</div>
</div>
</section>
<!-- 作品集 -->
<section id="portfolio" class="portfolio">
<div class="container">
<h2>精选作品</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1514784475990-4e94b1a06e8f?q=80&w=2070&auto=format&fit=crop" alt="婚纱作品1">
<div class="portfolio-overlay">
<h3>海边之约</h3>
<p>清新自然，记录浪漫瞬间</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=2070&auto=format&fit=crop" alt="婚纱作品2">
<div class="portfolio-overlay">
<h3>复古情调</h3>
<p>经典复古，再现优雅时光</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=2070&auto=format&fit=crop" alt="婚纱作品3">
<div class="portfolio-overlay">
<h3>城市剪影</h3>
<p>现代都市，定格时尚爱情</p>
</div>
</div>
</div>
</div>
</section>
<!-- 服务流程 -->
<section id="services" class="services">
<div class="container">
<h2>我们的服务流程</h2>
<div class="service-steps">
<div class="step">
<div class="step-icon"><i class="fas fa-comments"></i></div>
<h3>1. 咨询沟通</h3>
<p>与我们的专业顾问沟通，确定您的风格与需求。</p>
</div>
<div class="step">
<div class="step-icon"><i class="fas fa-palette"></i></div>
<h3>2. 定制方案</h3>
<p>根据您的想法，我们为您量身打造专属拍摄方案。</p>
</div>
<div class="step">
<div class="step-icon"><i class="fas fa-camera"></i></div>
<h3>3. 拍摄执行</h3>
<p>由金牌摄影师团队，为您捕捉最完美的瞬间。</p>
</div>
<div class="step">
<div class="step-icon"><i class="fas fa-gift"></i></div>
<h3>4. 成品交付</h3>
<p>精心后期制作，将幸福记忆完美呈现。</p>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="contact">
<div class="container">
<h2>联系我们</h2>
<p>期待与您相遇，开启您的幸福之旅</p>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>上海市静安区南京西路1266号恒隆广场45楼</span>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>400-888-9999</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>contact@mengsha.com</span>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2025 梦纱婚纱馆. All Rights Reserved. | <a href="#" style="color: #ff6b6b;">隐私政策</a></p>
</div>
</footer>
<script>
// 简单的滚动效果：当滚动时，给导航栏添加阴影
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.boxShadow = '0 2px 15px rgba(0,0,0,0.1)';
} else {
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 70, // 减去导航栏高度，避免被遮挡
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>
如何使用和修改
- 保存代码：将以上所有代码复制并粘贴到一个新的文本文件中，将其命名为
index.html。 - 替换图片：
- 英雄区域的背景图：找到
background: linear-gradient(...), url('...')，替换url中的图片链接为您自己的高清婚纱照。 - “关于我们”和“作品集”的图片：同样替换
src属性中的链接。 - 建议：使用高质量的、风格统一的图片，这能极大提升网站的专业感。
- 英雄区域的背景图：找到
- 修改文字内容：
- 修改
<title>、<h1>,<h2>,<p>等标签内的文字，填入您自己的品牌名称、服务介绍、联系方式等。
- 修改
- 调整颜色：
- 您可以轻松修改CSS中的颜色值,主色调
#ff6b6b（珊瑚色）可以替换成您喜欢的任何颜色，只需在代码中搜索并替换即可。
- 您可以轻松修改CSS中的颜色值,主色调
- 添加更多页面：
- 这个
index.html是首页，如果您想创建“关于我们”或“作品集”的独立页面，只需复制此文件，然后删除不需要的<section>部分，并保留对应的导航链接即可。
- 这个
这个代码为您提供了一个坚实的基础,您可以在此基础上进行更多的个性化定制和功能扩展，祝您的婚纱网站项目顺利！
（图片来源网络，侵删）
