[网站模板]响应式公司官网首页
2025年7月10日
相关文章
[网站模板]民宿宣传网站设计
2025年8月21日
暗黑主题设计 ：使用深色背景与金色/米色强调色形成对比，营造高端宁静的氛围 响应式布局 ：采用Flexbox和Grid布局，确保在各种屏幕尺寸上都能良好显示 无导航设计 ：通过单页滚动布局，让用户自然浏览内容 视觉元素 ：使用高品质背景图片展示民宿环境，卡片式设计展示房间和设施，微妙的悬停动画增强交互体验， 主要内容区域 ：引人注目的英雄区域，关于民宿的介绍，房间展示，设施与服务，客户评价，联系信息。 这个设计注重用户体验和视觉吸引力，同时保持了暗黑主题的高雅风格。您可以直接复制这段代码到HTML文件中运行，无需任何外部依赖。
[网站模板]响应式五金供应商网站（支持暗黑模式）
2025年8月8日
网站设计简洁实用，专注于五金产品的展示，同时提供了良好的用户体验和视觉效果。 响应式设计 ：在手机设备上显示为单列布局，在平板设备上显示为双列布局，在桌面设备上显示为三列布局。 暗黑模式 ：默认启用暗黑模式，提供亮/暗模式切换按钮，使用CSS变量实现主题切换，用户偏好设置保存在本地存储中。 简洁界面 ：无传统导航栏，清晰的视觉层次结构，充足的空间和留白，简洁的产品卡片设计。 功能区域 ：顶部功能区（搜索、主题切换），产品分类筛选，产品展示网格，底部联系信息。 交互元素 ：平滑滚动效果，分类筛选按钮，产品卡片悬停效果，主题切换动画。
[网站模板]家具家居宣传网站设计
文章摘要：响应式设计：
使用CSS Grid和Flexbox布局；媒体查询适应不同屏幕尺寸；移动设备友好。
暗黑模式：
默认启用暗黑模式；右上角切换按钮；使用CSS变量实现主题切换；本地存储记住用户偏好。
简洁设计：
无导航栏，单页滚动设计；充足留白和合理间距；黄金色调作为点缀色；柔和的阴影效果增强层次感。
主要内容：
引人注目的头部区域；精选家具展示（网格布局）；品牌故事部分；联系信息和地址；社交媒体链接。
这个设计突出了家具产品的视觉效果，同时保持了界面的简洁性。暗黑模式让家具图片更加突出，金色点缀增添了奢华感。整个网站加载快速，用户体验流畅。
<!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, color 0.3s;
}
:root {
--primary: #d4af37;
--text-light: #f5f5f5;
--text-dark: #333;
--bg-dark: #121212;
--bg-dark-secondary: #1e1e1e;
--bg-light: #f8f9fa;
--bg-light-secondary: #e9ecef;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--bg-dark);
color: var(--text-light);
min-height: 100vh;
overflow-x: hidden;
}
body.light-mode {
background-color: var(--bg-light);
color: var(--text-dark);
}
.container {
max-width: 1380px;
margin: 0 auto;
}
.page-header {
width: 100%;
height: 60px;
padding: 10px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: var(--bg-dark);
}
body.light-mode .page-header {
background-color: var(--bg-light);
}
.page-header .logo {
font-size: 1.5rem;
float: left;
}
.page-header .logo a {
text-decoration: none;
color: inherit;
}
/* 主题切换按钮 */
.theme-toggle {
float: right;
background: var(--bg-dark-secondary);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow);
}
.light-mode .theme-toggle {
background: var(--bg-light-secondary);
}
.theme-toggle i {
font-size: 1.5rem;
color: var(--primary);
}
/* 头部区域 */
header {
text-align: center;
padding: 100px 20px 60px;
position: relative;
overflow: hidden;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(18, 18, 18, 0.9) 30%, rgba(30, 30, 30, 0.7));
z-index: -1;
}
.light-mode .header-overlay {
background: linear-gradient(45deg, rgba(248, 249, 250, 0.9) 30%, rgba(233, 236, 239, 0.7));
}
.header-content {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 300;
letter-spacing: 2px;
}
.highlight {
color: var(--primary);
font-weight: 600;
}
.tagline {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.9;
}
.cta-button {
display: inline-block;
background: var(--primary);
color: var(--text-dark);
padding: 15px 40px;
font-size: 1.1rem;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s;
box-shadow: var(--shadow);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);
}
/* 特色区域 */
.features {
padding: 80px 20px;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
font-weight: 300;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: var(--bg-dark-secondary);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.light-mode .feature-card {
background: var(--bg-light-secondary);
}
.feature-img {
height: 250px;
overflow: hidden;
}
.feature-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.feature-card:hover .feature-img img {
transform: scale(1.05);
}
.feature-content {
padding: 25px;
}
.feature-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary);
}
.feature-desc {
margin-bottom: 20px;
opacity: 0.85;
}
.price {
font-size: 1.3rem;
font-weight: 600;
}
/* 关于我们 */
.about {
padding: 100px 20px;
background: var(--bg-dark-secondary);
position: relative;
}
.light-mode .about {
background: var(--bg-light-secondary);
}
.about-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 50px;
align-items: center;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 25px;
font-weight: 300;
}
.about-text p {
margin-bottom: 20px;
opacity: 0.9;
line-height: 1.8;
}
.about-image {
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.about-image img {
width: 100%;
display: block;
}
/* 联系方式 */
.contact {
padding: 100px 20px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.contact-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
margin-top: 50px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-item i {
font-size: 1.8rem;
color: var(--primary);
}
/* 页脚 */
footer {
background: var(--bg-dark-secondary);
padding: 40px 20px;
text-align: center;
font-size: 0.9rem;
opacity: 0.8;
}
.light-mode footer {
background: var(--bg-light-secondary);
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.social-links a {
color: var(--text-light);
font-size: 1.5rem;
transition: color 0.3s;
}
.light-mode .social-links a {
color: var(--text-dark);
}
.social-links a:hover {
color: var(--primary);
}
.footer-beian a {
color: #FFFFFF;
text-decoration: none;
}
.light-mode .footer-beian a {
color: #000000;
}
/* 响应式调整 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.tagline {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.about-content {
text-align: center;
}
}
</style>
</head>
<body class="dark-mode">
<div class="page-header">
<div class="container">
<div class="logo">
<a href=""><span class="highlight">YaZ雅致家居</span> · 非凡世界</a>
</div>
<!-- 主题切换按钮 -->
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-sun"></i>
</button>
</div>
</div>
<!-- 头部区域 -->
<header>
<div class="container">
<div class="header-overlay"></div>
<div class="header-content">
<h1>匠心设计 · <span class="highlight">品质生活</span> · 永恒传承</h1>
<p class="tagline">现代设计与卓越工艺的完美融合，打造您梦想中的生活空间</p>
<a href="#features" class="cta-button">探索精选家具</a>
</div>
</div>
</header>
<!-- 特色产品区域 -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">精选家具系列</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="现代沙发">
</div>
<div class="feature-content">
<h3 class="feature-title">北欧简约沙发</h3>
<p class="feature-desc">采用顶级面料与人体工学设计，完美结合舒适与美学，为您的客厅增添现代气息。</p>
<p class="price">¥8,999起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="实木餐桌">
</div>
<div class="feature-content">
<h3 class="feature-title">橡木实木餐桌</h3>
<p class="feature-desc">精选百年橡木，手工打磨抛光，打造坚固耐用的家庭聚餐中心。</p>
<p class="price">¥6,499起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="设计师床">
</div>
<div class="feature-content">
<h3 class="feature-title">云端舒适床垫</h3>
<p class="feature-desc">七层舒适结构，独立袋装弹簧，提供完美支撑，让您享受婴儿般的睡眠。</p>
<p class="price">¥12,999起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="现代沙发">
</div>
<div class="feature-content">
<h3 class="feature-title">北欧简约沙发</h3>
<p class="feature-desc">采用顶级面料与人体工学设计，完美结合舒适与美学，为您的客厅增添现代气息。</p>
<p class="price">¥8,999起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="实木餐桌">
</div>
<div class="feature-content">
<h3 class="feature-title">橡木实木餐桌</h3>
<p class="feature-desc">精选百年橡木，手工打磨抛光，打造坚固耐用的家庭聚餐中心。</p>
<p class="price">¥6,499起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="设计师床">
</div>
<div class="feature-content">
<h3 class="feature-title">云端舒适床垫</h3>
<p class="feature-desc">七层舒适结构，独立袋装弹簧，提供完美支撑，让您享受婴儿般的睡眠。</p>
<p class="price">¥12,999起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="现代沙发">
</div>
<div class="feature-content">
<h3 class="feature-title">北欧简约沙发</h3>
<p class="feature-desc">采用顶级面料与人体工学设计，完美结合舒适与美学，为您的客厅增添现代气息。</p>
<p class="price">¥8,999起</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="实木餐桌">
</div>
<div class="feature-content">
<h3 class="feature-title">橡木实木餐桌</h3>
<p class="feature-desc">精选百年橡木，手工打磨抛光，打造坚固耐用的家庭聚餐中心。</p>
<p class="price">¥6,499起</p>
</div>
</div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section class="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>关于YaZ雅致家居</h2>
<p>
自2005年创立以来，YaZ雅致家居一直致力于为现代家庭提供高品质的家具解决方案。我们与全球顶尖设计师合作，精心挑选环保材料，打造既美观又实用的家具。</p>
<p>
我们的使命是帮助您创造一个既反映个人风格，又满足功能需求的生活空间。从概念到成品，每一个细节都经过精心设计，确保产品经久耐用。</p>
<p>
在YaZ雅致家居，我们相信家具不仅仅是物品，它们是生活方式的表达，是家庭记忆的容器，是舒适与美的完美结合。</p>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1616486029423-aaa4789e8c9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="YaZ雅致家居展厅">
</div>
</div>
</div>
</section>
<!-- 联系方式 -->
<section class="contact">
<div class="container">
<h2 class="section-title">莅临体验</h2>
<p>欢迎参观我们的展厅，专业设计师将为您提供免费的室内设计咨询</p>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h3>地址</h3>
<p>广东省佛山市顺德区创意家具大道8080号</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<h3>电话</h3>
<p>400-6666-9999</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-clock"></i>
<div>
<h3>营业时间</h3>
<p>每日 10:00 - 21:00</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<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="footer-beian">© <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')) {
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
localStorage.setItem('theme', 'light');
} else {
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
localStorage.setItem('theme', 'dark');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>