[网站模板]摩托车销售店响应式网站设计
2025年9月20日
相关文章
[网站模板]响应式公司官网首页
2025年7月10日
这是一个现代、专业的响应式公司官网首页，包含导航栏、大字宣传区域、服务介绍、关于我们、客户评价和页脚等核心元素。使用Flexbox和Grid实现灵活的响应式布局，采用现代简约的设计风格，实现移动端友好的导航菜单，使用CSS变量确保主题一致性，添加平滑的动画效果增强用户体验。
[网站模板]KTV暗黑风格响应式网站设计
2025年7月31日
暗黑模式设计： 使用深紫色和深蓝色作为主背景；霓虹灯效果的文字和按钮，营造KTV氛围；半透明卡片设计增强层次感。 响应式布局： 使用CSS Grid和Flexbox实现自适应布局；在手机、平板和桌面设备上均有良好表现；针对小屏幕设备优化了按钮和卡片布局。 核心功能区： 特色服务展示（音效、曲库、餐饮）；套餐价格卡片（突出显示热门套餐）；联系信息区块（地址、电话、营业时间）。 视觉元素： 霓虹灯文字动画效果；渐变色按钮和分隔线；图标强化视觉传达。
[网站模板]广州城市宣传网站（响应式+暗黑模式）
文章摘要：响应式设计
：
使用CSS Grid和Flexbox实现灵活布局；适配不同屏幕尺寸（桌面、平板、手机）；媒体查询优化移动端显示效果。
暗黑模式
：
右上角切换按钮（太阳/月亮图标）；保存用户偏好到本地存储；精心设计的暗色系配色方案。
现代化UI
：
分区展示广州特色（城市印象、特色景点、美食文化、现代风貌）；悬停动画效果增强交互体验;滚动动画提升视觉吸引力。
内容结构
：
头部大图展示广州全景；城市介绍部分（文字+图片）；特色景点卡片展示（广州塔、珠江夜游、陈家祠）；美食文化展示（点心、烧腊、糖水、煲仔饭）；现代风貌展示（经济、交通、教育）。
页脚区域
：
联系信息和社交媒体链接；版权信息。
<!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.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #e6b325;
--secondary-color: #c10d0d;
--bg-light: #f5f5f5;
--text-light: #333;
--card-light: #fff;
--bg-dark: #121212;
--text-dark: #f0f0f0;
--card-dark: #1e1e1e;
--transition: all 0.4s ease;
}
body {
background-color: var(--bg-light);
color: var(--text-light);
transition: var(--transition);
overflow-x: hidden;
line-height: 1.6;
}
body.dark-mode {
background-color: var(--bg-dark);
color: var(--text-dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-52-45_1755291165750_gdsc.jpg');
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.dark-mode header {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-52-45_1755291165750_gdsc.jpg');
background-size: cover;
background-position: center;
}
.header-content {
max-width: 800px;
padding: 20px;
}
.logo {
font-size: 4rem;
margin-bottom: 20px;
color: var(--primary-color);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 3.5rem;
margin-bottom: 20px;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.tagline {
font-size: 1.5rem;
margin-bottom: 30px;
max-width: 700px;
}
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.2);
border: none;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
color: var(--primary-color);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
transition: var(--transition);
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(30deg);
}
/* 分区样式 */
section {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
position: relative;
color: var(--secondary-color);
}
.dark-mode .section-title {
color: var(--primary-color);
}
.section-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--secondary-color);
}
.dark-mode .section-title::after {
background: var(--primary-color);
}
/* 城市介绍 */
.about-content {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.about-text {
flex: 1;
min-width: 300px;
}
.about-image {
flex: 1;
min-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.about-image img {
width: 100%;
height: auto;
display: block;
transition: var(--transition);
}
.about-image:hover img {
transform: scale(1.05);
}
/* 特色卡片 */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: var(--card-light);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.dark-mode .feature-card {
background: var(--card-dark);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.feature-img {
height: 200px;
overflow: hidden;
}
.feature-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.feature-card:hover .feature-img img {
transform: scale(1.1);
}
.feature-content {
padding: 20px;
}
.feature-content h3 {
margin-bottom: 10px;
color: var(--secondary-color);
}
.dark-mode .feature-content h3 {
color: var(--primary-color);
}
/* 美食展示 */
.food-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}
.food-item {
position: relative;
height: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.food-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.food-item:hover img {
transform: scale(1.1);
}
.food-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 15px;
transform: translateY(100%);
transition: var(--transition);
}
.food-item:hover .food-overlay {
transform: translateY(0);
}
/* 现代风貌 */
.modern-showcase {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 40px;
}
.modern-card {
flex: 1;
min-width: 300px;
background: var(--card-light);
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.dark-mode .modern-card {
background: var(--card-dark);
}
.modern-card:hover {
transform: translateY(-10px);
}
.modern-icon {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: 20px;
}
.dark-mode .modern-icon {
color: var(--primary-color);
}
/* 页脚 */
footer {
background: var(--text-light);
color: white;
padding: 40px 0;
text-align: center;
}
.dark-mode footer {
background: #0a0a0a;
}
.footer-content {
max-width: 600px;
margin: 0 auto;
}
.footer-logo {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
margin: 30px 0;
flex-wrap: wrap;
}
.footer-links a {
color: white;
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary-color);
}
.footer-beian a{
color: inherit;
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.tagline {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem;
}
.about-content {
flex-direction: column;
}
.theme-toggle {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.logo {
font-size: 3rem;
}
.section-title {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<!-- 主题切换按钮 -->
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
<!-- 头部区域 -->
<header>
<div class="header-content">
<div class="logo">
<i class="fas fa-city"></i>
</div>
<h1>魅力广州</h1>
<p class="tagline">千年商都，岭南明珠，现代之城，美食天堂</p>
<p>一座融合传统与现代、东方与西方的国际大都市</p>
</div>
</header>
<!-- 城市介绍 -->
<section class="about-section">
<div class="container">
<h2 class="section-title">广州印象</h2>
<div class="about-content">
<div class="about-text">
<p>广州，别称羊城、花城，是广东省省会，国家中心城市。作为中国南大门，广州拥有2200多年建城历史，是海上丝绸之路的起点之一，也是中国历史上唯一从未关闭过的通商口岸。</p>
<p>广州是岭南文化的发源地和兴盛地，粤剧、粤菜、广绣、广彩等文化遗产享誉世界。同时，作为中国改革开放的前沿阵地，广州已成为一座现代化国际大都市。</p>
<p>广州塔、珠江新城、白云山、陈家祠、沙面岛等景点展现了广州传统与现代交融的独特魅力。而"食在广州"的美誉，更让这里成为美食爱好者的天堂。</p>
</div>
<div class="about-image">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-39-28_1755290368410_gz.jpeg" alt="广州城市景观">
</div>
</div>
</div>
</section>
<!-- 特色景点 -->
<section class="attractions-section">
<div class="container">
<h2 class="section-title">特色景点</h2>
<div class="features">
<div class="feature-card">
<div class="feature-img">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/14-03-48-38_1755114518150_8d085753d176ab2523b4f4fedab14f39.jpg" alt="广州塔">
</div>
<div class="feature-content">
<h3>广州塔</h3>
<p>广州新地标，昵称"小蛮腰"，塔高600米，是中国第一高塔。塔顶设有观景平台和摩天轮，可360度俯瞰广州全景。</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-39-28_1755290368408_2g.jpg" alt="珠江夜景">
</div>
<div class="feature-content">
<h3>珠江夜游</h3>
<p>乘船游览珠江，欣赏两岸璀璨夜景，途经广州塔、海心沙、珠江新城等地标建筑，感受广州现代魅力。</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-39-28_1755290368409_c0.jpg" alt="陈家祠">
</div>
<div class="feature-content">
<h3>陈家祠</h3>
<p>岭南建筑艺术的瑰宝，集岭南民间建筑装饰艺术之大成，以"三雕三塑一铸铁"著称，被誉为"岭南建筑艺术明珠"。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 美食文化 -->
<section class="cuisine-section">
<div class="container">
<h2 class="section-title">食在广州</h2>
<p class="section-subtitle">"食在广州"早已闻名天下，广州是中国美食之都，粤菜发源地，以选料广博、做工精细、口味清淡著称。</p>
<div class="food-gallery">
<div class="food-item">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-48-11_1755290891255_dx.jpg" alt="广式点心">
<div class="food-overlay">
<h3>广式点心</h3>
<p>虾饺、烧卖、凤爪、叉烧包...早茶文化的精髓</p>
</div>
</div>
<div class="food-item">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-48-11_1755290891257_sl.jpg" alt="烧腊">
<div class="food-overlay">
<h3>广式烧腊</h3>
<p>烧鹅、叉烧、白切鸡...皮脆肉嫩，香气四溢</p>
</div>
</div>
<div class="food-item">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/04-48-11_1755290891258_ts.png" alt="糖水">
<div class="food-overlay">
<h3>广式糖水</h3>
<p>双皮奶、杨枝甘露、姜撞奶...甜蜜的岭南风味</p>
</div>
</div>
<div class="food-item">
<img src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/14-04-03-21_1755115401984_baozaifan.jpg" alt="煲仔饭">
<div class="food-overlay">
<h3>煲仔饭</h3>
<p>腊味、窝蛋牛肉、黄鳝...锅气十足，饭焦香脆</p>
</div>
</div>
</div>
</div>
</section>
<!-- 现代风貌 -->
<section class="modern-section">
<div class="container">
<h2 class="section-title">现代广州</h2>
<div class="modern-showcase">
<div class="modern-card">
<div class="modern-icon">
<i class="fas fa-university"></i>
</div>
<h3>经济中心</h3>
<p>广州是中国重要的商贸中心和综合交通枢纽，拥有中国进出口商品交易会（广交会），被誉为"中国第一展"。</p>
</div>
<div class="modern-card">
<div class="modern-icon">
<i class="fas fa-subway"></i>
</div>
<h3>交通枢纽</h3>
<p>广州拥有亚洲最大的高铁站——广州南站，以及世界级航空枢纽白云国际机场，地铁网络总里程居世界前列。</p>
</div>
<div class="modern-card">
<div class="modern-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h3>教育名城</h3>
<p>广州拥有中山大学、华南理工大学等众多知名高校，是华南地区的教育中心，人才资源丰富。</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-city"></i>
</div>
<h3>魅力广州 - 千年商都，现代之城</h3>
<p>探索广州的过去、现在与未来</p>
<div class="footer-links">
<a href="#"><i class="fab fa-weibo"></i> 微博</a>
<a href="#"><i class="fab fa-weixin"></i> 微信</a>
<a href="#"><i class="fab fa-tiktok"></i> 抖音</a>
<a href="#"><i class="fas fa-envelope"></i> 联系我们</a>
</div>
<p class="footer-beian">© <a target="_blank" href="https://www.tomde.cloud">本站由Tomde.cloud提供</a></p>
</div>
</div>
</footer>
<script>
// 暗黑模式Init
if(!!!localStorage.getItem('theme')){
localStorage.setItem('theme', 'dark');
}
// 暗黑模式切换
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
const icon = themeToggle.querySelector('i');
// 检查本地存储的主题偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark-mode');
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
}
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
localStorage.setItem('theme', 'dark');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
localStorage.setItem('theme', 'light');
}
});
// 滚动动画效果
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
section.classList.add('fade-in');
observer.observe(section);
});
</script>
</body>
</html>