[网站模板]小龙虾宵夜档宣传网站，响应式、暗黑主题、纯静态html源码
暗黑主题设计：使用深色背景搭配红色和金色的强调色，营造高端餐饮氛围
完全响应式：使用CSS Grid和Flexbox布局，适配各种屏幕尺寸
简洁明了：没有复杂的导航栏，直接展示餐厅的核心信息和特色
重点突出：强调小龙虾的新鲜度、秘制配方和多种口味选择
视觉层次：通过卡片式设计和悬停效果增强用户体验
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>
<style>
:root {
--primary-color: #e63946;
--secondary-color: #f4a261;
--dark-bg: #121212;
--darker-bg: #0a0a0a;
--text-color: #f1faee;
--text-muted: #a5a5a5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--dark-bg);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
}
header {
text-align: center;
padding: 2rem 0;
}
.logo {
font-size: 3rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 1rem;
text-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
}
.tagline {
font-size: 1.2rem;
color: var(--secondary-color);
margin-bottom: 2rem;
}
.hero {
position: relative;
height: 50vh;
background-image:
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23121212" width="100" height="100"/><path fill="%231e1e1e" d="M0 0h50v50H0z"/></svg>');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
border-radius: 8px;
overflow: hidden;
}
.hero-content {
text-align: center;
z-index: 2;
padding: 2rem;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
color: var(--text-muted);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.feature-card {
background-color: var(--darker-bg);
padding: 2rem;
border-radius: 8px;
text-align: center;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--secondary-color);
}
.feature-card p {
color: var(--text-muted);
}
.menu-showcase {
margin-bottom: 3rem;
}
.menu-showcase h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: var(--secondary-color);
}
.menu-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
}
.menu-item {
background-color: var(--darker-bg);
border-radius: 8px;
overflow: hidden;
}
.menu-item-img {
height: 200px;
background-color: #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.menu-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu-item-content {
padding: 1.5rem;
}
.menu-item h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--text-color);
}
.menu-item p {
color: var(--text-muted);
margin-bottom: 1rem;
}
.price {
color: var(--primary-color);
font-weight: bold;
font-size: 1.2rem;
}
.contact {
background-color: var(--darker-bg);
padding: 3rem;
border-radius: 8px;
text-align: center;
margin-bottom: 3rem;
}
.contact h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--secondary-color);
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-item {
padding: 1.5rem;
}
.info-item h3 {
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.info-item p {
color: var(--text-muted);
}
footer {
text-align: center;
padding: 2rem;
color: var(--text-muted);
font-size: 0.9rem;
}
.copyright a {
color: white;
text-decoration: none;
}
@media (max-width: 768px) {
.logo {
font-size: 2.5rem;
}
.hero h2 {
font-size: 2rem;
}
.container {
padding: 1rem;
}
.feature-card,
.contact {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">图丫丫小龙虾</div>
<div class="tagline">鲜香麻辣，回味无穷</div>
</header>
<section class="hero">
<div class="hero-content">
<h2>专注美味小龙虾</h2>
<p>精选优质龙虾，秘制配方，带给您最地道的麻辣鲜香体验</p>
</div>
</section>
<section class="features">
<div class="feature-card">
<div class="feature-icon">🦞</div>
<h3>新鲜食材</h3>
<p>每日精选活虾，保证食材新鲜度，让您吃得放心</p>
</div>
<div class="feature-card">
<div class="feature-icon">👨🍳</div>
<h3>秘制配方</h3>
<p>传承秘制配方，二十余种香料精心烹制，味道独特</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔥</div>
<h3>多种口味</h3>
<p>麻辣、蒜蓉、十三香等多种口味，满足不同需求</p>
</div>
</section>
<section class="menu-showcase">
<h2>招牌推荐</h2>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="麻辣小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>经典麻辣小龙虾</h3>
<p>香辣过瘾，麻而不涩，辣而不燥</p>
<div class="price">¥128/份</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="蒜蓉小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>黄金蒜蓉小龙虾</h3>
<p>蒜香浓郁，鲜美多汁，不吃辣人士首选</p>
<div class="price">¥138/份</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="十三香小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>秘制十三香小龙虾</h3>
<p>十余种香料精心调配，层次丰富</p>
<div class="price">¥138/份</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="麻辣小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>经典麻辣小龙虾</h3>
<p>香辣过瘾，麻而不涩，辣而不燥</p>
<div class="price">¥128/份</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="蒜蓉小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>黄金蒜蓉小龙虾</h3>
<p>蒜香浓郁，鲜美多汁，不吃辣人士首选</p>
<div class="price">¥138/份</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-img">
<img
src="https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-08/20250823010803_1755882483291.jpg"
alt="十三香小龙虾图片"
/>
</div>
<div class="menu-item-content">
<h3>秘制十三香小龙虾</h3>
<p>十余种香料精心调配，层次丰富</p>
<div class="price">¥138/份</div>
</div>
</div>
</div>
</section>
<section class="contact">
<h2>联系我们</h2>
<p>欢迎到店品尝或致电、微订购</p>
<div class="contact-info">
<div class="info-item">
<h3>地址</h3>
<p>广州市海珠区美食街1088号</p>
</div>
<div class="info-item">
<h3>营业时间</h3>
<p>周一至周日: 15:00 - 24:00</p>
</div>
<div class="info-item">
<h3>电话</h3>
<p>168-8888-8888</p>
</div>
<div class="info-item">
<h3>微信</h3>
<p>wx_tuyaya</p>
</div>
</div>
</section>
</div>
<footer>
<p class="copyright">
© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a>
</p>
</footer>
</body>
</html>预览地址： https://preview.yunbimo.com/240530c9-fd82-4a3a-a897-b69ab392c54b