[网站模板]响应式公司官网首页
2025年7月10日
相关文章
[网站模板]广州城市宣传网站（响应式+暗黑模式）
2025年8月13日
响应式设计 ： 使用CSS Grid和Flexbox实现灵活布局；适配不同屏幕尺寸（桌面、平板、手机）；媒体查询优化移动端显示效果。 暗黑模式 ： 右上角切换按钮（太阳/月亮图标）；保存用户偏好到本地存储；精心设计的暗色系配色方案。 现代化UI ： 分区展示广州特色（城市印象、特色景点、美食文化、现代风貌）；悬停动画效果增强交互体验;滚动动画提升视觉吸引力。 内容结构 ： 头部大图展示广州全景；城市介绍部分（文字+图片）；特色景点卡片展示（广州塔、珠江夜游、陈家祠）；美食文化展示（点心、烧腊、糖水、煲仔饭）；现代风貌展示（经济、交通、教育）。 页脚区域 ： 联系信息和社交媒体链接；版权信息。
[网站模板]化妆品销售公司官网首页
2025年7月13日
現代化設計：採用柔和的粉紫色調，符合化妝品行業特性；簡約而優雅的排版與佈局；產品卡片懸浮效果增強互動體驗。 響應式設計：在手機、平板和桌面設備上均能完美顯示；導航欄在移動設備上轉換為漢堡菜單；內容區域自動調整佈局適應不同屏幕尺寸。 核心功能區域：吸引人的首頁英雄區；公司特色展示；熱銷產品展；示與分類；限時促銷倒計時；完整的頁腳信息。 互動元素：導航欄動畫效果；產品篩選功能；倒計時動態更新；懸浮效果增強用戶體驗；這個網站設計既美觀又實用，能夠有效展示化妝品公司的產品與服務，同時提供流暢的用戶體驗。
[网站模板]社区桶装水销售点网站
文章摘要：响应式设计：网站布局会自动适应不同屏幕尺寸，在手机和平板上也有良好的显示效果。
暗黑模式：点击右上角的月亮图标可以切换到暗黑模式，再次点击可恢复明亮模式。
核心内容：
产品展示：展示三种不同类型的桶装水及价格
服务介绍：配送、回收和客户服务
关于我们：品牌故事和服务理念
联系方式：地址、电话和营业时间
交互功能：
平滑滚动导航
移动端汉堡菜单
产品订购按钮
这个设计采用了清新蓝色作为主色调，符合水产品的特性，同时通过精心设计的布局和动画效果，提供了良好的用户体验。
<!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: #3498db;
--secondary-color: #2ecc71;
--accent-color: #f39c12;
--text-color: #333;
--bg-color: #f8f9fa;
--card-bg: #ffffff;
--header-bg: rgba(255, 255, 255, 0.95);
--footer-bg: #2c3e50;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
.dark-mode {
--primary-color: #5dade2;
--secondary-color: #58d68d;
--accent-color: #f8c471;
--text-color: #ecf0f1;
--bg-color: #1a1a2e;
--card-bg: #16213e;
--header-bg: rgba(26, 26, 46, 0.95);
--footer-bg: #0f3460;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: var(--transition);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
padding-top: 80px;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 导航栏样式 */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--header-bg);
box-shadow: var(--shadow);
z-index: 1000;
padding: 15px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
font-size: 1.3rem;
font-weight: bold;
color: var(--primary-color);
}
.logo i {
margin-right: 10px;
font-size: 2rem;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 25px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
position: relative;
}
.nav-links a:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: var(--transition);
}
.nav-links a:hover:after {
width: 100%;
}
.theme-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--text-color);
margin-left: 20px;
}
/* 英雄区域 */
.hero {
padding: 80px 0;
text-align: center;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('https://cdn.jsdelivr.net/gh/tomdehub/resources/img/site/2025-09/20250911011457.png') no-repeat;
background-size: cover;
color: white;
border-radius: 12px;
margin-bottom: 40px;
}
.dark-mode .hero {
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-09/20250911011457.png') no-repeat;
background-size: cover;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: var(--transition);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* 产品区域 */
.section-title {
text-align: center;
margin-bottom: 40px;
color: var(--primary-color);
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.product-card {
background-color: var(--card-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.product-card:hover {
transform: translateY(-10px);
}
.product-img {
height: 200px;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 5rem;
}
.product-info {
padding: 20px;
}
.product-info h3 {
margin-bottom: 10px;
color: var(--primary-color);
}
.price {
font-size: 1.2rem;
font-weight: bold;
color: var(--accent-color);
margin: 10px 0;
}
/* 服务区域 */
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.service-card {
background-color: var(--card-bg);
padding: 30px;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
}
.service-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 20px;
}
/* 关于我们 */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
align-items: center;
}
.about-image {
background: linear-gradient(135deg, var(--primary-color) 0%, #1a5f7a 100%);
height: 400px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 5rem;
}
/* 页脚 */
footer {
background-color: var(--footer-bg);
color: white;
padding: 40px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
font-size: 1.2rem;
}
.footer-section p, .footer-section li {
margin-bottom: 10px;
}
.footer-section ul {
list-style: none;
}
.footer-section a {
color: #ddd;
text-decoration: none;
}
.footer-section a:hover {
color: var(--primary-color);
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom a {
color: inherit;
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2rem;
}
.about {
grid-template-columns: 1fr;
}
.about-image {
height: 250px;
}
}
/* 移动菜单 */
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: block;
}
.nav-links.active {
display: flex;
flex-direction: column;
position: absolute;
top: 80px;
left: 0;
width: 100%;
background-color: var(--header-bg);
padding: 20px;
box-shadow: var(--shadow);
}
.nav-links.active li {
margin: 10px 0;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<div class="container navbar">
<div class="logo">
<i class="fas fa-tint"></i>
<span>清泉之家</span>
</div>
<button class="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#products">产品</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">
<i class="fas fa-moon"></i>
</button>
</li>
</ul>
</div>
</header>
<!-- 主要内容 -->
<div class="container">
<!-- 英雄区域 -->
<section class="hero" id="home">
<h1>优质桶装水，直送到家</h1>
<p>我们提供各种高品质桶装水，免费配送上门，服务社区十年，值得信赖</p>
<a href="#products" class="btn">立即订购</a>
</section>
<!-- 产品区域 -->
<section id="products">
<h2 class="section-title">我们的产品</h2>
<div class="products">
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>纯净水</h3>
<p>经过多道工序净化，口感清爽，适合日常饮用</p>
<div class="price">¥15/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>矿泉水</h3>
<p>源自天然泉水，富含矿物质，健康养生</p>
<div class="price">¥20/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>山泉水</h3>
<p>采集自深山泉水，天然无污染，甘甜可口</p>
<div class="price">¥25/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>纯净水</h3>
<p>经过多道工序净化，口感清爽，适合日常饮用</p>
<div class="price">¥15/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>矿泉水</h3>
<p>源自天然泉水，富含矿物质，健康养生</p>
<div class="price">¥20/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-water"></i>
</div>
<div class="product-info">
<h3>山泉水</h3>
<p>采集自深山泉水，天然无污染，甘甜可口</p>
<div class="price">¥25/桶</div>
<a href="#" class="btn">订购</a>
</div>
</div>
</div>
</section>
<!-- 服务区域 -->
<section id="services">
<h2 class="section-title">我们的服务</h2>
<div class="services">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-truck"></i>
</div>
<h3>快速配送</h3>
<p>下单后2小时内送达，确保您及时用水</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-recycle"></i>
</div>
<h3>空桶回收</h3>
<p>环保回收空桶，清洗消毒后循环使用</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-headset"></i>
</div>
<h3>全天候服务</h3>
<p>全天候客服支持，解决您的用水问题</p>
</div>
</div>
</section>
<!-- 关于我们 -->
<section id="about">
<h2 class="section-title">关于我们</h2>
<div class="about">
<div class="about-content">
<h3>十年社区服务经验</h3>
<p>
清泉之家成立于2013年，一直致力于为社区居民提供优质桶装水和配送服务。我们与多个优质水源地合作，确保水质安全健康。</p>
<p>我们的配送团队熟悉社区每个角落，能够快速响应您的订单，确保您及时用上放心水。</p>
<a href="#contact" class="btn">联系我们</a>
</div>
<div class="about-image">
<i class="fas fa-store"></i>
</div>
</div>
</section>
</div>
<!-- 页脚 -->
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>联系我们</h3>
<p><i class="fas fa-map-marker-alt"></i> 地址：佛山市南海区清泉路123-1号</p>
<p><i class="fas fa-phone"></i> 电话：100-8888-6666</p>
<p><i class="fab fa-weixin"></i> 微信：wx_8888_6666</p>
</div>
<div class="footer-section">
<h3>营业时间</h3>
<p>周一至周五: 8:00 - 20:00</p>
<p>周六至周日: 9:00 - 18:00</p>
</div>
<div class="footer-section">
<h3>快速链接</h3>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#products">产品</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© <a href="https://www.tomde.cloud" target="_blank">本站由www.tomde.cloud提供</a></p>
</div>
</div>
</footer>
<script>
// 暗黑模式切换
const dm = localStorage.getItem('dark-mode')
const themeToggle = document.querySelector('.theme-toggle');
const themeIcon = document.querySelector('.theme-toggle i');
if (dm && dm === 'true') {
document.body.classList.toggle('dark-mode');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
localStorage.setItem('dark-mode', 'true');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
localStorage.setItem('dark-mode', 'false');
}
});
// 移动端菜单
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('active');
if (navLinks.classList.contains('active')) {
mobileMenuBtn.innerHTML = '<i class="fas fa-times"></i>';
} else {
mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
}
});
// 平滑滚动
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) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动端菜单
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
}
}
});
});
</script>
</body>
</html>