[网站模板]摩托车销售店响应式网站设计
2025年9月20日
相关文章
[网站模板]展览会宣传网站
2025年9月5日
响应式设计：使用CSS媒体查询确保在手机、平板和电脑上都能良好显示 暗黑主题：使用深色背景与霓虹色文字形成鲜明对比 现代布局：采用CSS Grid和Flexbox实现灵活的页面布局 交互效果：添加了悬停动画和平滑滚动效果 移动端友好：汉堡菜单在移动设备上提供良好的导航体验 内容分区：清晰展示展览亮点、特色展品、时间地点和票务信息 您可以根据实际需求修改展览内容、日期、地点和图片等信息。这个设计采用了未来科技感的暗黑主题，适合科技类展览的宣传。
[网站模板]响应式公司官网首页
2025年7月10日
这是一个现代、专业的响应式公司官网首页，包含导航栏、大字宣传区域、服务介绍、关于我们、客户评价和页脚等核心元素。使用Flexbox和Grid实现灵活的响应式布局，采用现代简约的设计风格，实现移动端友好的导航菜单，使用CSS变量确保主题一致性，添加平滑的动画效果增强用户体验。
[网站模板]探索者旅行社官方宣传网站
文章摘要：响应式设计
：适配各种屏幕尺寸，从移动设备到桌面电脑
暗黑模式
：默认使用暗色主题，保护用户眼睛并提升神秘感
主题切换
：用户可以轻松切换明暗主题
现代UI设计
：采用卡片式布局、平滑过渡和优雅的动画效果
完整功能
：包含导航栏、英雄区域、目的地展示、服务介绍和联系表单
这个网站设计注重用户体验和视觉吸引力，同时保持了良好的性能和可访问性。您可以直接复制上面的代码到HTML文件中运行，无需任何外部依赖。
<!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">
<style>
:root {
--primary-color: #e22bae;
--secondary-color: #20c997;
--bg-dark: #121212;
--bg-card-dark: #1e1e1e;
--text-dark: #e0e0e0;
--text-muted-dark: #a0a0a0;
--bg-light: #f8f9fa;
--bg-card-light: #ffffff;
--text-light: #212529;
--text-muted-light: #6c757d;
}
.dark-mode {
--bg-primary: var(--bg-dark);
--bg-secondary: var(--bg-card-dark);
--text-primary: var(--text-dark);
--text-secondary: var(--text-muted-dark);
}
.light-mode {
--bg-primary: var(--bg-light);
--bg-secondary: var(--bg-card-light);
--text-primary: var(--text-light);
--text-secondary: var(--text-muted-light);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏样式 */
header {
background-color: var(--bg-secondary);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary-color);
}
.theme-toggle {
background: none;
border: none;
color: var(--text-primary);
font-size: 1.2rem;
cursor: pointer;
margin-left: 20px;
}
.hamburger {
display: none;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
}
/* 英雄区域样式 */
.hero {
padding: 80px 0;
text-align: center;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
color: white;
border-radius: 0 0 20px 20px;
margin-bottom: 40px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
}
.btn {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 12px 30px;
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* 目的地部分样式 */
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.2rem;
color: var(--primary-color);
}
.destinations {
padding: 60px 0;
}
.destination-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.destination-card {
background-color: var(--bg-secondary);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.destination-card:hover {
transform: translateY(-10px);
}
.card-img {
height: 200px;
overflow: hidden;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.destination-card:hover .card-img img {
transform: scale(1.1);
}
.card-content {
padding: 20px;
}
.card-content h3 {
margin-bottom: 10px;
font-size: 1.4rem;
}
.card-content p {
color: var(--text-secondary);
margin-bottom: 15px;
}
.price {
color: var(--secondary-color);
font-weight: 700;
font-size: 1.2rem;
}
/* 服务部分样式 */
.services {
padding: 60px 0;
background-color: var(--bg-secondary);
border-radius: 20px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.service-card {
text-align: center;
padding: 30px 20px;
background-color: var(--bg-primary);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
}
/* 联系部分样式 */
.contact {
padding: 60px 0;
}
.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-item i {
font-size: 1.2rem;
color: var(--primary-color);
}
.contact-form {
background-color: var(--bg-secondary);
padding: 30px;
border-radius: 15px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--text-secondary);
border-radius: 8px;
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* 页脚样式 */
footer {
background-color: var(--bg-secondary);
padding: 40px 0 20px;
margin-top: 60px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-column h3 {
margin-bottom: 20px;
font-size: 1.2rem;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column a {
text-decoration: none;
color: var(--text-secondary);
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--primary-color);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 15px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--bg-primary);
border-radius: 50%;
color: var(--text-primary);
transition: background-color 0.3s, transform 0.3s;
}
.social-links a:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid var(--text-secondary);
color: var(--text-secondary);
font-size: 0.9rem;
}
.copyright a {
color: var(--text-primary);
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--bg-secondary);
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.nav-links.active {
display: flex;
}
.nav-links li {
margin: 10px 0;
}
.hamburger {
display: block;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
}
</style>
</head>
<body class="dark-mode">
<header>
<div class="container">
<nav>
<div class="logo">
<i class="fas fa-compass"></i>
<span>探索者旅行社</span>
</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#destinations">目的地</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
<li>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-sun"></i>
</button>
</li>
</ul>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
</nav>
</div>
</header>
<section class="hero" id="home">
<div class="container">
<h1>探索世界的美丽与奇迹</h1>
<p>我们提供独特的旅行体验，带您前往世界上最迷人的目的地，创造终生难忘的回忆。</p>
<a href="#destinations" class="btn">探索目的地</a>
</div>
</section>
<section class="destinations" id="destinations">
<div class="container">
<h2 class="section-title">热门目的地</h2>
<div class="destination-grid">
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="巴厘岛">
</div>
<div class="card-content">
<h3>巴厘岛，印度尼西亚</h3>
<p>体验巴厘岛的神庙、海滩和丰富的文化遗产。</p>
<div class="price">¥8,999起</div>
</div>
</div>
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="圣托里尼">
</div>
<div class="card-content">
<h3>圣托里尼，希腊</h3>
<p>沉浸在爱琴海的蓝色浪漫与白色建筑之中。</p>
<div class="price">¥12,499起</div>
</div>
</div>
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="瑞士阿尔卑斯">
</div>
<div class="card-content">
<h3>阿尔卑斯山，瑞士</h3>
<p>探索雄伟的山脉、清澈的湖泊和迷人的小镇。</p>
<div class="price">¥15,799起</div>
</div>
</div>
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="巴厘岛">
</div>
<div class="card-content">
<h3>巴厘岛，印度尼西亚</h3>
<p>体验巴厘岛的神庙、海滩和丰富的文化遗产。</p>
<div class="price">¥8,999起</div>
</div>
</div>
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="圣托里尼">
</div>
<div class="card-content">
<h3>圣托里尼，希腊</h3>
<p>沉浸在爱琴海的蓝色浪漫与白色建筑之中。</p>
<div class="price">¥12,499起</div>
</div>
</div>
<div class="destination-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="瑞士阿尔卑斯">
</div>
<div class="card-content">
<h3>阿尔卑斯山，瑞士</h3>
<p>探索雄伟的山脉、清澈的湖泊和迷人的小镇。</p>
<div class="price">¥15,799起</div>
</div>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<h2 class="section-title">我们的服务</h2>
<div class="service-grid">
<div class="service-card">
<i class="fas fa-route"></i>
<h3>定制行程</h3>
<p>根据您的偏好和预算，量身打造完美旅行计划。</p>
</div>
<div class="service-card">
<i class="fas fa-hotel"></i>
<h3>酒店预订</h3>
<p>为您精心挑选舒适优质的住宿体验。</p>
</div>
<div class="service-card">
<i class="fas fa-plane"></i>
<h3>机票预订</h3>
<p>提供全球航线机票，优惠价格，便捷出行。</p>
</div>
<div class="service-card">
<i class="fas fa-user-shield"></i>
<h3>旅行保险</h3>
<p>全方位保障您的旅行安全，无忧出行。</p>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<div class="contact-container">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h3>地址</h3>
<p>北京市朝阳区建国路88号</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<h3>电话</h3>
<p>+86 101 8888 8888</p>
</div>
</div>
<div class="contact-item">
<i class="fab fa-weixin"></i>
<div>
<h3>微信</h3>
<p>wx_101_8888_8888</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-clock"></i>
<div>
<h3>工作时间</h3>
<p>周一至周五: 9:00 - 18:00</p>
<p>周六: 10:00 - 16:00</p>
</div>
</div>
</div>
<div class="contact-form">
<h3>发送咨询</h3>
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" placeholder="您的姓名">
</div>
<div class="form-group">
<label for="phone">电话</label>
<input type="tel" id="phone" placeholder="您的电话">
</div>
<div class="form-group">
<label for="message">消息</label>
<textarea id="message" rows="5" placeholder="您的消息"></textarea>
</div>
<button type="submit" class="btn">发送消息</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>探索者旅行社</h3>
<p>我们致力于提供最优质的旅行体验，让每一次旅行都成为珍贵的回忆。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
</div>
</div>
<div class="footer-column">
<h3>热门目的地</h3>
<ul>
<li><a href="#">丹霞山</a></li>
<li><a href="#">圣托里尼</a></li>
<li><a href="#">瑞士阿尔卑斯</a></li>
<li><a href="#">马尔代夫</a></li>
<li><a href="#">海陵岛</a></li>
</ul>
</div>
<div class="footer-column">
<h3>快捷链接</h3>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#destinations">目的地</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a></p>
</div>
</div>
</footer>
<script>
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
themeToggle.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
});
// 移动端菜单切换
const hamburger = document.getElementById('hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// 关闭移动端菜单
navLinks.classList.remove('active');
}
});
});
</script>
</body>
</html>