[网站模板]响应式公司官网首页
2025年7月10日
相关文章
[网站模板]广州城市宣传网站（响应式+暗黑模式）
2025年8月13日
响应式设计 ： 使用CSS Grid和Flexbox实现灵活布局；适配不同屏幕尺寸（桌面、平板、手机）；媒体查询优化移动端显示效果。 暗黑模式 ： 右上角切换按钮（太阳/月亮图标）；保存用户偏好到本地存储；精心设计的暗色系配色方案。 现代化UI ： 分区展示广州特色（城市印象、特色景点、美食文化、现代风貌）；悬停动画效果增强交互体验;滚动动画提升视觉吸引力。 内容结构 ： 头部大图展示广州全景；城市介绍部分（文字+图片）；特色景点卡片展示（广州塔、珠江夜游、陈家祠）；美食文化展示（点心、烧腊、糖水、煲仔饭）；现代风貌展示（经济、交通、教育）。 页脚区域 ： 联系信息和社交媒体链接；版权信息。
[网站模板]水果店宣传网站设计
2025年8月26日
响应式设计 ：在各种屏幕尺寸上都能完美显示 暗黑主题 ：使用深色背景搭配鲜艳的水果图标和强调色 现代UI ：采用卡片式设计、微妙的阴影和过渡动画 功能完整 ：包含特色介绍、产品展示、促销倒计时和联系信息 无需导航 ：按照要求没有添加导航栏，使内容更加聚焦 您可以直接复制上面的代码到HTML文件中，然后在浏览器中打开即可查看效果。网站包含了所有必要的部分，展示了一个高端水果店的品牌形象和产品信息。
[网站模板]炭火烧烤店宣传网站
文章摘要：无菜单栏设计：
完全移除了传统顶部菜单栏；左侧仅保留品牌标识（logo+店名）；右侧保留主题切换按钮。
替代导航方案：
右侧垂直导航点：显示当前浏览位置，点击可跳转到对应部分；导航点悬停显示区域名称；底部返回顶部按钮。
视觉设计：
默认暗黑主题，突出烧烤氛围；暖色调（红色、橙色）作为强调色；炭火纹理背景增强氛围感；卡片悬停动画效果。
内容布局：
简洁的页面分区：特色、菜单、联系我们；响应式网格布局展示菜品；清晰的联系信息卡片。
响应式优化：
在移动设备上自动隐藏导航点；使用clamp()实现响应式字体大小；触摸友好的按钮尺寸；图片自动适配容器。
这个设计保持了网站的功能性和美观性，同时通过替代导航方案解决了没有传统菜单栏的问题，使界面更加简洁清爽。暗黑模式作为默认主题，完美契合烧烤店的夜间营业特性。
<!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;
transition: background-color 0.5s ease, color 0.3s ease, transform 0.3s ease;
}
:root {
--primary: #e74c3c;
--secondary: #f39c12;
--accent: #c0392b;
--text: #ecf0f1;
--background: #121212;
--card-bg: #1e1e1e;
--card-shadow: rgba(0, 0, 0, 0.4);
--border: rgba(255, 255, 255, 0.1);
}
.light-mode {
--text: #2c3e50;
--background: #f5f5f5;
--card-bg: #ffffff;
--card-shadow: rgba(0, 0, 0, 0.1);
--border: rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 - 无菜单栏 */
header {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1600891964599-f61ba0e24092?ixlib=rb-4.0.3') no-repeat center center/cover;
height: 100vh;
min-height: 600px;
display: flex;
flex-direction: column;
text-align: center;
padding: 20px;
position: relative;
justify-content: center;
}
.light-mode header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1600891964599-f61ba0e24092?ixlib=rb-4.0.3') no-repeat center center/cover;
}
.brand {
position: absolute;
top: 30px;
left: 30px;
display: flex;
align-items: center;
z-index: 10;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: var(--secondary);
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
color: var(--primary);
font-size: 2.2rem;
}
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.hero h1 {
color: white;
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.2;
}
.hero p {
color: white;
font-size: clamp(1rem, 3vw, 1.5rem);
max-width: 700px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
background: var(--primary);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin: 10px;
transition: transform 0.3s, background 0.3s;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
transform: translateY(-3px);
background: var(--accent);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: #e4e4e4;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
background: var(--card-bg);
border: 1px solid var(--border);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 100;
box-shadow: 0 2px 10px var(--card-shadow);
}
.theme-toggle i {
font-size: 1.5rem;
color: var(--secondary);
}
/* 导航点 */
.nav-dots {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 90;
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
margin: 10px 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.nav-dot.active {
background: var(--primary);
transform: scale(1.3);
}
.nav-dot::after {
content: attr(data-section);
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
background: var(--card-bg);
color: var(--text);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
white-space: nowrap;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.nav-dot:hover::after {
opacity: 1;
}
/* 特色部分 */
.features {
padding: 100px 0;
text-align: center;
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 20px;
color: var(--secondary);
position: relative;
display: inline-block;
}
.section-title:after {
content: '';
position: absolute;
width: 70%;
height: 3px;
background: var(--primary);
bottom: -10px;
left: 15%;
}
.section-subtitle {
font-size: clamp(1rem, 2vw, 1.2rem);
max-width: 700px;
margin: 0 auto 60px;
color: var(--text);
opacity: 0.9;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
background: var(--card-bg);
border-radius: 10px;
padding: 40px 30px;
box-shadow: 0 5px 15px var(--card-shadow);
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-card i {
font-size: 3rem;
color: var(--primary);
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.feature-card p {
color: var(--text);
opacity: 0.8;
}
/* 菜单部分 */
.menu {
padding: 100px 0;
background: var(--card-bg);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.menu-item {
background: var(--background);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px var(--card-shadow);
transition: transform 0.3s;
}
.menu-item:hover {
transform: scale(1.03);
}
.menu-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.menu-item-content {
padding: 20px;
}
.menu-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--secondary);
}
.menu-item p {
margin-bottom: 15px;
color: var(--text);
opacity: 0.9;
}
.price {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary);
}
/* 联系部分 */
.contact {
padding: 100px 0;
text-align: center;
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
text-align: left;
}
.contact-card {
background: var(--card-bg);
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px var(--card-shadow);
}
.contact-card h3 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--secondary);
}
.contact-card p {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.contact-card i {
margin-right: 10px;
color: var(--primary);
width: 20px;
}
.contact-card a {
color: var(--text);
text-decoration: none;
}
.map-container {
height: 400px;
margin-top: 50px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px var(--card-shadow);
position: relative;
}
.map-container .map-shade {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0);
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* 页脚 */
footer {
background: var(--card-bg);
padding: 40px 0;
text-align: center;
border-top: 2px solid var(--primary);
}
.social-links {
margin: 20px 0;
}
.social-links a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: var(--primary);
color: white;
border-radius: 50%;
margin: 0 10px;
text-decoration: none;
transition: transform 0.3s;
}
.social-links a:hover {
transform: translateY(-5px);
background: var(--accent);
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 90;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top i {
color: white;
font-size: 1.2rem;
}
.footer-ba a {
color: inherit;
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 992px) {
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.2rem;
}
.nav-dots {
display: none;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.features, .menu, .contact {
padding: 60px 0;
}
}
@media (max-width: 480px) {
.logo {
font-size: 1.5rem;
}
.hero h1 {
font-size: 2rem;
}
.contact-info {
grid-template-columns: 1fr;
}
.brand {
top: 20px;
left: 20px;
}
}
</style>
</head>
<body>
<!-- 主题切换按钮 -->
<div class="theme-toggle" id="themeToggle">
<i class="fas fa-sun"></i>
</div>
<!-- 导航点 -->
<div class="nav-dots">
<div class="nav-dot active" data-section="首页" data-target="header"></div>
<div class="nav-dot" data-section="特色" data-target="features"></div>
<div class="nav-dot" data-section="菜单" data-target="menu"></div>
<div class="nav-dot" data-section="联系我们" data-target="contact"></div>
</div>
<!-- 返回顶部按钮 -->
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<!-- 头部区域 - 无菜单栏 -->
<header>
<div class="container">
<div class="brand">
<div class="logo">
<i class="fas fa-fire"></i>
<span>炭火烧烤坊</span>
</div>
</div>
<div class="hero">
<h1>极致炭火烧烤体验</h1>
<p>精选优质食材，传统炭火工艺，为您带来最地道的烧烤风味。每一口都是对味蕾的极致诱惑。</p>
<div>
<a href="#menu" class="btn">查看菜单</a>
<a href="#contact" class="btn btn-outline">在线预订</a>
</div>
</div>
</div>
</header>
<!-- 特色区域 -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">我们的特色</h2>
<p class="section-subtitle">传承与创新的完美结合，为您打造独一无二的烧烤体验</p>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-fire"></i>
<h3>传统炭火工艺</h3>
<p>坚持使用传统木炭烧烤，让食物吸收炭火香气，保留最原始的美味。</p>
</div>
<div class="feature-card">
<i class="fas fa-seedling"></i>
<h3>优质食材</h3>
<p>精选优质肉类与新鲜蔬菜，每日新鲜采购，确保食材的最佳品质。</p>
</div>
<div class="feature-card">
<i class="fas fa-mortar-pestle"></i>
<h3>秘制酱料</h3>
<p>传承三代的秘制酱料配方，独特风味让每一口都充满惊喜。</p>
</div>
</div>
</div>
</section>
<!-- 菜单区域 -->
<section class="menu" id="menu">
<div class="container">
<h2 class="section-title">招牌美食</h2>
<p class="section-subtitle">每一道都是精心制作的烧烤艺术品</p>
<div class="menu-grid">
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3" alt="炭烤牛排">
<div class="menu-item-content">
<h3>炭火秘制牛排</h3>
<p>精选澳洲谷饲牛肉，炭火慢烤，外焦里嫩，肉汁丰富。</p>
<div class="price">¥128</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3" alt="烤羊排">
<div class="menu-item-content">
<h3>香草烤羊排</h3>
<p>新西兰羔羊排，配以迷迭香等香料，肉质鲜嫩无膻味。</p>
<div class="price">¥98</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1611270629569-8b357cb88da9?ixlib=rb-4.0.3" alt="烤海鲜拼盘">
<div class="menu-item-content">
<h3>海鲜烧烤拼盘</h3>
<p>新鲜大虾、扇贝、鱿鱼组合，搭配特制海鲜酱汁。</p>
<div class="price">¥158</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3" alt="蔬菜烧烤">
<div class="menu-item-content">
<h3>田园时蔬烧烤</h3>
<p>精选当季新鲜蔬菜，保留原味与营养，健康美味。</p>
<div class="price">¥58</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3" alt="烤羊排">
<div class="menu-item-content">
<h3>香草烤羊排</h3>
<p>新西兰羔羊排，配以迷迭香等香料，肉质鲜嫩无膻味。</p>
<div class="price">¥98</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3" alt="烤羊排">
<div class="menu-item-content">
<h3>香草烤羊排</h3>
<p>新西兰羔羊排，配以迷迭香等香料，肉质鲜嫩无膻味。</p>
<div class="price">¥98</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系区域 -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<p class="section-subtitle">期待您的光临，一起享受美食时光</p>
<div class="contact-info">
<div class="contact-card">
<h3>营业时间</h3>
<p><i class="fas fa-clock"></i> 周一至周五: 17:00 - 23:00</p>
<p><i class="fas fa-clock"></i> 周末及节假日: 16:00 - 24:00</p>
<h3>店铺地址</h3>
<p><i class="fas fa-map-marker-alt"></i> 美食大道88号烧烤广场3楼</p>
<p><i class="fas fa-subway"></i> 地铁1号线美食广场站D出口</p>
<p><i class="fas fa-car"></i> 提供免费停车位</p>
</div>
<div class="contact-card">
<h3>在线预订</h3>
<p>扫描二维码关注公众号</p>
<p>
<img width="100"
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/web/qrcode_www.tomde.cloud.png"
alt="炭火烧烤坊">
</p>
<p>或直接拨通过电话、微信联系</p>
<p><i class="fas fa-phone"></i> 电话：<a href="tel:+86 198-8888-9999"> +86 198-8888-9999</a></p>
<p><i class="fab fa-weixin"></i> 微信：<a> wx-198-8888-9999</a></p>
<p>团队聚餐请提前24小时预订</p>
</div>
</div>
<div class="map-container">
<div class="map-shade" onclick="window.open('https://uri.amap.com/marker?position=113.270268,23.11873&name=炭火烧烤坊&src=mypage&coordinate=gaode&callnative=0')"></div>
<iframe src="https://uri.amap.com/marker?position=113.270268,23.11873&name=炭火烧烤坊&src=mypage&coordinate=gaode&callnative=0"
allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="logo">
<i class="fas fa-fire"></i>
<span>炭火烧烤坊</span>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
<a href="#"><i class="fab fa-bilibili"></i></a>
</div>
<p class="footer-ba">© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a></p>
</div>
</footer>
<script>
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
// 检查本地存储中的主题偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
body.classList.add('light-mode');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
themeToggle.addEventListener('click', () => {
body.classList.toggle('light-mode');
if (body.classList.contains('light-mode')) {
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
} else {
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 导航点功能
const navDots = document.querySelectorAll('.nav-dot');
const sections = document.querySelectorAll('section, header');
function updateNavDots() {
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
currentSection = section.getAttribute('id') || 'header';
}
});
navDots.forEach(dot => {
dot.classList.remove('active');
if (dot.getAttribute('data-target') === currentSection) {
dot.classList.add('active');
}
});
}
navDots.forEach(dot => {
dot.addEventListener('click', function () {
const target = this.getAttribute('data-target');
const targetElement = target === 'header'
? document.querySelector('header')
: document.getElementById(target);
window.scrollTo({
top: targetElement.offsetTop,
behavior: 'smooth'
});
});
});
// 返回顶部按钮
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
// 更新导航点状态
updateNavDots();
// 显示/隐藏返回顶部按钮
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 初始化导航点状态
updateNavDots();
</script>
</body>
</html>