// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior:'smooth'
});
});
});
// 表单处理
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('提交成功！我们将在24小时内联系您');
this.reset();
});
// 导航栏动效
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.style.background = 'rgba(156, 111, 68, 0.98)';
} else {
navbar.style.background = 'rgba(156, 111, 68, 0.95)';
}
});
// 滚动到联系表单
function scrollToContact() {
document.getElementById('contact').scrollIntoView({
behavior:'smooth'
});
}
// 图片懒加载
const lazyImages = document.querySelectorAll('.product-item img');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => {
img.dataset.src = img.src;
img.src = '';
imageObserver.observe(img);
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>古法胡麻油 - 高原源生亚麻籽油</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#features">产品特色</a></li>
<li><a href="#products">产品展示</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
<section class="hero" id="home">
<div class="hero-content">
<h1>高原古法胡麻油</h1>
<p>传承百年工艺 · 滴滴自然醇香</p>
<button onclick="scrollToContact()">立即咨询</button>
</div>
</section>
<section class="features" id="features">
<div class="feature-container">
<div class="feature-card">
<i class="fas fa-seedling feature-icon"></i>
<h3>高原种植</h3>
<p>海拔2000米以上纯净环境种植，天然无污染</p>
</div>
<div class="feature-card">
<i class="fas fa-mortar-pestle feature-icon"></i>
<h3>古法压榨</h3>
<p>传统石磨低温压榨，保留完整营养成分</p>
</div>
<div class="feature-card">
<i class="fas fa-certificate feature-icon"></i>
<h3>品质认证</h3>
<p>通过有机认证，SGS多项检测达标</p>
</div>
</div>
</section>
<section class="products" id="products">
<div class="product-gallery">
<div class="product-item">
<img data-src="https://example.com/oil1.jpg" alt="传统工艺">
</div>
<div class="product-item">
<img data-src="https://example.com/oil2.jpg" alt="产品展示">
</div>
<div class="product-item">
<img data-src="https://example.com/oil3.jpg" alt="原料种植">
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-form">
<h2>获取专属优惠</h2>
<form id="contactForm">
<input type="text" placeholder="您的姓名" required>
<input type="tel" placeholder="联系电话" required>
<textarea rows="4" placeholder="留言内容..." required></textarea>
<button type="submit">提交咨询</button>
</form>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
:root {
--primary-color: #9c6f44;
--secondary-color: #7a5233;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
.navbar {
background: rgba(156, 111, 68, 0.95);
padding: 1rem;
position: fixed;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.nav-links {
display: flex;
justify-content: center;
gap: 3rem;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 20px;
transition: all 0.3s;
}
.nav-links a:hover {
background: rgba(255, 255, 255, 0.2);
}
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url('https://images.unsplash.com/photo-1612485981738-16d8f1b433d9?auto=format&fit=crop&w=1920') center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding-top: 60px;
}
.hero-content {
max-width: 800px;
padding: 2rem;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.features {
padding: 5rem 2rem;
background: #fff9f3;
}
.feature-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.products {
padding: 5rem 2rem;
background: #f5f1ec;
}
.product-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.product-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.product-item img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.3s;
}
.product-item:hover img {
transform: scale(1.1);
}
.contact {
padding: 5rem 2rem;
background: var(--primary-color);
color: white;
}
.contact-form {
max-width: 600px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: white;
}
button {
background: white;
color: var(--primary-color);
padding: 1rem 2rem;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
button:hover {
background: var(--secondary-color);
color: white;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.nav-links {
flex-direction: column;
text-align: center;
gap: 1rem;
}
}
}