[网站模板]响应式公司官网首页
2025年7月10日
相关文章
[网站模板]广州城市宣传网站（响应式+暗黑模式）
2025年8月13日
响应式设计 ： 使用CSS Grid和Flexbox实现灵活布局；适配不同屏幕尺寸（桌面、平板、手机）；媒体查询优化移动端显示效果。 暗黑模式 ： 右上角切换按钮（太阳/月亮图标）；保存用户偏好到本地存储；精心设计的暗色系配色方案。 现代化UI ： 分区展示广州特色（城市印象、特色景点、美食文化、现代风貌）；悬停动画效果增强交互体验;滚动动画提升视觉吸引力。 内容结构 ： 头部大图展示广州全景；城市介绍部分（文字+图片）；特色景点卡片展示（广州塔、珠江夜游、陈家祠）；美食文化展示（点心、烧腊、糖水、煲仔饭）；现代风貌展示（经济、交通、教育）。 页脚区域 ： 联系信息和社交媒体链接；版权信息。
[网站模板]化妆品销售公司官网首页
2025年7月13日
現代化設計：採用柔和的粉紫色調，符合化妝品行業特性；簡約而優雅的排版與佈局；產品卡片懸浮效果增強互動體驗。 響應式設計：在手機、平板和桌面設備上均能完美顯示；導航欄在移動設備上轉換為漢堡菜單；內容區域自動調整佈局適應不同屏幕尺寸。 核心功能區域：吸引人的首頁英雄區；公司特色展示；熱銷產品展；示與分類；限時促銷倒計時；完整的頁腳信息。 互動元素：導航欄動畫效果；產品篩選功能；倒計時動態更新；懸浮效果增強用戶體驗；這個網站設計既美觀又實用，能夠有效展示化妝品公司的產品與服務，同時提供流暢的用戶體驗。
[网站模板]民宿宣传网站设计
文章摘要：暗黑主题设计
：使用深色背景与金色/米色强调色形成对比，营造高端宁静的氛围
响应式布局
：采用Flexbox和Grid布局，确保在各种屏幕尺寸上都能良好显示
无导航设计
：通过单页滚动布局，让用户自然浏览内容
视觉元素
：使用高品质背景图片展示民宿环境，卡片式设计展示房间和设施，微妙的悬停动画增强交互体验，
主要内容区域
：引人注目的英雄区域，关于民宿的介绍，房间展示，设施与服务，客户评价，联系信息。
这个设计注重用户体验和视觉吸引力，同时保持了暗黑主题的高雅风格。您可以直接复制这段代码到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.4.0/css/all.min.css">
<style>
:root {
--dark-bg: #121212;
--darker-bg: #0a0a0a;
--card-bg: #1e1e1e;
--accent: #8a6d3b;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--dark-bg);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
.hero-content {
max-width: 800px;
animation: fadeIn 1.5s ease-in-out;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
letter-spacing: 2px;
color: #fff;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 30px;
color: var(--text-secondary);
}
.btn {
display: inline-block;
padding: 15px 30px;
background-color: var(--accent);
color: #000;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: var(--transition);
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #c8a97e;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Section Styling */
section {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: var(--text-primary);
position: relative;
}
.section-title:after {
content: '';
display: block;
width: 80px;
height: 3px;
background: var(--accent);
margin: 15px auto;
}
/* About Section */
.about-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.about-text {
flex: 1;
min-width: 300px;
}
.about-image {
flex: 1;
min-width: 300px;
height: 400px;
background: url('https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80') no-repeat center center/cover;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
/* Rooms Section */
.rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.room-card {
background-color: var(--card-bg);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: var(--transition);
}
.room-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.room-image {
height: 200px;
background-position: center;
background-size: cover;
}
.room-content {
padding: 20px;
}
.room-content h3 {
margin-bottom: 10px;
color: var(--text-primary);
}
.room-content p {
color: var(--text-secondary);
margin-bottom: 15px;
}
.price {
color: var(--accent);
font-weight: bold;
font-size: 1.2rem;
}
/* Amenities Section */
.amenities {
background-color: var(--darker-bg);
}
.amenities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.amenity-item {
text-align: center;
padding: 30px;
background-color: var(--card-bg);
border-radius: 10px;
transition: var(--transition);
}
.amenity-item:hover {
transform: scale(1.05);
}
.amenity-item i {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 20px;
}
/* Testimonials */
.testimonials-container {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial {
background-color: var(--card-bg);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
margin: 20px;
text-align: center;
}
.testimonial-text {
font-style: italic;
margin-bottom: 20px;
color: var(--text-secondary);
}
.testimonial-author {
font-weight: bold;
color: var(--text-primary);
}
/* Contact Section */
.contact {
background-color: var(--darker-bg);
}
.contact-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.contact-info {
flex: 1;
min-width: 300px;
}
.contact-form {
flex: 1;
min-width: 300px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: var(--text-secondary);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
background-color: var(--card-bg);
border: none;
border-radius: 5px;
color: var(--text-primary);
}
/* Footer */
footer {
background-color: #080808;
padding: 40px 0;
text-align: center;
}
.social-links {
margin-bottom: 20px;
}
.social-links a {
color: var(--text-secondary);
font-size: 1.5rem;
margin: 0 10px;
transition: var(--transition);
}
.social-links a:hover {
color: var(--accent);
}
.copyright a {
color: inherit;
text-decoration: none;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>兰三岚民宿</h1>
<p>远离城市喧嚣，体验自然静谧之美</p>
<a href="#contact" class="btn">立即预订</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">关于我们</h2>
<div class="about-content">
<div class="about-text">
<p>兰三岚民宿坐落于风景如画的山谷中，四周被茂密的森林和清澈的溪流环绕。我们提供独特的住宿体验，让您远离城市的喧嚣，沉浸在大自然的宁静之中。</p>
<p>民宿由传统民居改造而成，既保留了原有的建筑特色，又融入了现代舒适设施。每个房间都经过精心设计，确保为您提供最舒适的居住体验。</p>
<p>无论是寻找灵感的艺术家，还是需要放松的都市人，兰三岚民宿都是您的理想之选。</p>
</div>
<div class="about-image"></div>
</div>
</div>
</section>
<!-- Rooms Section -->
<section id="rooms" class="rooms">
<div class="container">
<h2 class="section-title">客房展示</h2>
<div class="rooms-grid">
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>山景大床房</h3>
<p>宽敞舒适的房间，配有超大落地窗，可欣赏壮丽山景。</p>
<p class="price">￥880/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>竹林雅居</h3>
<p>被竹林环绕的独立小屋，提供极致的隐私和宁静体验。</p>
<p class="price">￥1280/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>家庭套房</h3>
<p>宽敞的两室一厅套房，适合家庭或小团体入住。</p>
<p class="price">￥1580/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>山景大床房</h3>
<p>宽敞舒适的房间，配有超大落地窗，可欣赏壮丽山景。</p>
<p class="price">￥880/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>竹林雅居</h3>
<p>被竹林环绕的独立小屋，提供极致的隐私和宁静体验。</p>
<p class="price">￥1280/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>家庭套房</h3>
<p>宽敞的两室一厅套房，适合家庭或小团体入住。</p>
<p class="price">￥1580/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>山景大床房</h3>
<p>宽敞舒适的房间，配有超大落地窗，可欣赏壮丽山景。</p>
<p class="price">￥880/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>竹林雅居</h3>
<p>被竹林环绕的独立小屋，提供极致的隐私和宁静体验。</p>
<p class="price">￥1280/晚</p>
</div>
</div>
<div class="room-card">
<div class="room-image" style="background-image: url('https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div>
<div class="room-content">
<h3>家庭套房</h3>
<p>宽敞的两室一厅套房，适合家庭或小团体入住。</p>
<p class="price">￥1580/晚</p>
</div>
</div>
</div>
</div>
</section>
<!-- Amenities Section -->
<section id="amenities" class="amenities">
<div class="container">
<h2 class="section-title">设施服务</h2>
<div class="amenities-grid">
<div class="amenity-item">
<i class="fas fa-utensils"></i>
<h3>本地美食</h3>
<p>提供采用当地食材烹制的传统美食</p>
</div>
<div class="amenity-item">
<i class="fas fa-spa"></i>
<h3>水疗服务</h3>
<p>专业按摩和理疗服务，让您彻底放松</p>
</div>
<div class="amenity-item">
<i class="fas fa-hiking"></i>
<h3>徒步旅行</h3>
<p>组织周边徒步活动，探索自然美景</p>
</div>
<div class="amenity-item">
<i class="fas fa-swimming-pool"></i>
<h3>无边泳池</h3>
<p>俯瞰山谷的无限泳池，享受清凉一刻</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials">
<div class="container">
<h2 class="section-title">客人评价</h2>
<div class="testimonials-container">
<div class="testimonial">
<p class="testimonial-text">"这是我住过最棒的民宿！环境优美，服务周到，食物也非常美味。一定会再次光临！"</p>
<p class="testimonial-author">- 张女士，上海</p>
</div>
<div class="testimonial">
<p class="testimonial-text">"兰三岚民宿是远离城市喧嚣的完美之地。清晨被鸟鸣唤醒，夜晚仰望星空，这种体验无与伦比。"</p>
<p class="testimonial-author">- 李先生，北京</p>
</div>
<div class="testimonial">
<p class="testimonial-text">"这是我住过最棒的民宿！环境优美，服务周到，食物也非常美味。一定会再次光临！"</p>
<p class="testimonial-author">- 张女士，上海</p>
</div>
<div class="testimonial">
<p class="testimonial-text">"兰三岚民宿是远离城市喧嚣的完美之地。清晨被鸟鸣唤醒，夜晚仰望星空，这种体验无与伦比。"</p>
<p class="testimonial-author">- 李先生，北京</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<div class="contact-content">
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 地址：广东省山风景区王者峡谷</p>
<p><i class="fas fa-phone"></i> 电话：0666-88888888</p>
<p><i class="fab fa-weixin"></i> 微信：wx-66668888</p>
<p><i class="fas fa-envelope"></i> 邮箱：minsu@tomde.cloud</p>
<p><i class="fas fa-clock"></i> 前台服务时间：全天24小时</p>
</div>
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="tel">电话</label>
<input type="tel" id="tel" required>
</div>
<button type="submit" class="btn">提交</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<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="copyright">© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a></p>
</div>
</footer>
</body>
</html>