[网站模板]企业公司官网
2025年9月2日
相关文章
[网站模板]响应式公司官网首页
2025年7月10日
这是一个现代、专业的响应式公司官网首页，包含导航栏、大字宣传区域、服务介绍、关于我们、客户评价和页脚等核心元素。使用Flexbox和Grid实现灵活的响应式布局，采用现代简约的设计风格，实现移动端友好的导航菜单，使用CSS变量确保主题一致性，添加平滑的动画效果增强用户体验。
[网站模板]化妆品销售公司官网首页
2025年7月13日
現代化設計：採用柔和的粉紫色調，符合化妝品行業特性；簡約而優雅的排版與佈局；產品卡片懸浮效果增強互動體驗。 響應式設計：在手機、平板和桌面設備上均能完美顯示；導航欄在移動設備上轉換為漢堡菜單；內容區域自動調整佈局適應不同屏幕尺寸。 核心功能區域：吸引人的首頁英雄區；公司特色展示；熱銷產品展；示與分類；限時促銷倒計時；完整的頁腳信息。 互動元素：導航欄動畫效果；產品篩選功能；倒計時動態更新；懸浮效果增強用戶體驗；這個網站設計既美觀又實用，能夠有效展示化妝品公司的產品與服務，同時提供流暢的用戶體驗。
[网站模板]响应式五金供应商网站（支持暗黑模式）
文章摘要：网站设计简洁实用，专注于五金产品的展示，同时提供了良好的用户体验和视觉效果。
响应式设计
：在手机设备上显示为单列布局，在平板设备上显示为双列布局，在桌面设备上显示为三列布局。
暗黑模式
：默认启用暗黑模式，提供亮/暗模式切换按钮，使用CSS变量实现主题切换，用户偏好设置保存在本地存储中。
简洁界面
：无传统导航栏，清晰的视觉层次结构，充足的空间和留白，简洁的产品卡片设计。
功能区域
：顶部功能区（搜索、主题切换），产品分类筛选，产品展示网格，底部联系信息。
交互元素
：平滑滚动效果，分类筛选按钮，产品卡片悬停效果，主题切换动画。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GX五金之家 - 专业五金工具供应商</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #3a86ff;
--secondary: #ff006e;
--background: #121212;
--surface: #1e1e1e;
--text: #e0e0e0;
--text-secondary: #a0a0a0;
--border: #333;
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
--transition: all 0.3s ease;
}
.light-theme {
--background: #f5f7fa;
--surface: #ffffff;
--text: #333333;
--text-secondary: #666666;
--border: #e0e0e0;
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background);
color: var(--text);
line-height: 1.6;
transition: var(--transition);
min-height: 100vh;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: var(--surface);
padding: 20px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
font-size: 28px;
color: var(--primary);
}
.logo h1 {
font-size: 24px;
font-weight: 700;
color: var(--text);
}
.logo span {
color: var(--primary);
}
.controls {
display: flex;
gap: 15px;
align-items: center;
}
.search-box {
position: relative;
}
.search-box input {
background: var(--background);
border: 1px solid var(--border);
border-radius: 30px;
padding: 10px 20px 10px 40px;
color: var(--text);
width: 200px;
transition: var(--transition);
}
.search-box input:focus {
width: 250px;
outline: none;
border-color: var(--primary);
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.theme-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
color: var(--text-secondary);
transition: var(--transition);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--primary);
}
.hero {
text-align: center;
padding: 50px 20px;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?q=80&w=1000') center/cover no-repeat;
margin-bottom: 40px;
border-radius: 0 0 20px 20px;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: white;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
color: rgba(255, 255, 255, 0.9);
}
.btn {
display: inline-block;
background: var(--primary);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
margin-left: 15px;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.categories {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 20px 0;
margin-bottom: 30px;
scrollbar-width: none;
}
.categories::-webkit-scrollbar {
display: none;
}
.category-btn {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
font-size: 14px;
}
.category-btn:hover, .category-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.product-card {
background: var(--surface);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
height: 100%;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.product-image {
height: 200px;
background: #2c2c2c;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 40px;
}
.product-info {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.product-info h3 {
font-size: 18px;
margin-bottom: 10px;
color: var(--text);
}
.product-info p {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 15px;
flex-grow: 1;
}
.product-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
font-weight: 700;
font-size: 20px;
color: var(--primary);
}
.rating {
color: #ffc107;
}
.footer {
background: var(--surface);
padding: 30px 0;
margin-top: 40px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
color: var(--text);
font-size: 18px;
}
.footer-section p, .footer-section a {
color: var(--text-secondary);
margin-bottom: 10px;
display: block;
text-decoration: none;
transition: var(--transition);
}
.footer-section a:hover {
color: var(--primary);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
}
.copyright {
text-align: center;
padding-top: 30px;
color: var(--text-secondary);
font-size: 14px;
border-top: 1px solid var(--border);
margin-top: 20px;
}
.copyright a{
text-decoration: none;
color: inherit;
}
@media (max-width: 768px) {
.logo {
margin-bottom: 10px;
}
.hero h2 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.search-box input {
width: 150px;
}
.search-box input:focus {
width: 180px;
}
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 480px) {
header{
padding-top: 10px;
padding-bottom: 10px;
}
.header-content {
flex-direction: column;
gap: 15px;
}
.logo {
margin-bottom: 0;
}
.hero {
padding: 30px 15px;
}
.hero h2 {
font-size: 1.5rem;
}
.btn {
padding: 10px 20px;
font-size: 14px;
}
.product-image {
height: 160px;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<div class="logo-icon">
<i class="fas fa-tools"></i>
</div>
<h1>GX五金<span>之家</span></h1>
</div>
<div class="controls">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索产品...">
</div>
<button class="theme-toggle" id="theme-toggle">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
</div>
</header>
<section class="hero">
<div class="container">
<h2>专业五金工具供应商</h2>
<p>我们提供高质量的五金工具、建筑材料及工业配件，满足您的专业需求</p>
<div class="hero-btns">
<a href="#products" class="btn">浏览产品</a>
<a href="#contact" class="btn btn-outline">联系我们</a>
</div>
</div>
</section>
<main class="container">
<div class="categories">
<button class="category-btn active">所有产品</button>
<button class="category-btn">手动工具</button>
<button class="category-btn">电动工具</button>
<button class="category-btn">紧固件</button>
<button class="category-btn">锁具</button>
<button class="category-btn">建筑材料</button>
<button class="category-btn">管道配件</button>
<button class="category-btn">安全防护</button>
</div>
<div class="products-grid" id="products">
<!-- 产品卡片 -->
<div class="product-card">
<div class="product-image">
<i class="fas fa-wrench"></i>
</div>
<div class="product-info">
<h3>工业级活动扳手</h3>
<p>高强度铬钒钢制造，防滑手柄设计，适用于各种工业环境</p>
<div class="product-meta">
<div class="price">¥89.00</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-hammer"></i>
</div>
<div class="product-info">
<h3>纤维柄羊角锤</h3>
<p>防震纤维手柄，锤头淬火处理，平衡性好，经久耐用</p>
<div class="product-meta">
<div class="price">¥45.00</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-bolt"></i>
</div>
<div class="product-info">
<h3>不锈钢螺丝套装</h3>
<p>304不锈钢材质，多种规格组合，防锈耐腐蚀</p>
<div class="product-meta">
<div class="price">¥32.50</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-toolbox"></i>
</div>
<div class="product-info">
<h3>专业工具套装</h3>
<p>128件专业工具组合，满足家庭维修和工业需求</p>
<div class="product-meta">
<div class="price">¥399.00</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-plug"></i>
</div>
<div class="product-info">
<h3>工业级电钻</h3>
<p>750W大功率，双速调节，附带20种钻头配件</p>
<div class="product-meta">
<div class="price">¥289.00</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-lock"></i>
</div>
<div class="product-info">
<h3>防盗门锁套装</h3>
<p>C级防盗锁芯，304不锈钢材质，防撬防技术开启</p>
<div class="product-meta">
<div class="price">¥168.00</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer" id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于我们</h3>
<p>五金之家成立于2005年，专注于提供高质量的五金工具和建筑材料。我们致力于成为您最值得信赖的五金供应商。</p>
</div>
<div class="footer-section">
<h3>联系方式</h3>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>广东省广州市五金大道888号</span>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>020-66668888</span>
</div>
<div class="contact-item">
<i class="fab fa-weixin"></i>
<span>gx-wujin-999</span>
</div>
</div>
</div>
<div class="footer-section">
<h3>营业时间</h3>
<p>周一至周五: 8:00 - 20:00</p>
<p>周六至周日: 9:00 - 18:00</p>
<p>节假日: 10:00 - 16:00</p>
</div>
</div>
<div class="copyright">
© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a>
</div>
</div>
</footer>
<script>
// 暗黑模式切换
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = themeToggle.querySelector('i');
// 检查本地存储或系统偏好
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'light' || (!savedTheme && !systemPrefersDark)) {
document.body.classList.add('light-theme');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('light-theme');
if (document.body.classList.contains('light-theme')) {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
localStorage.setItem('theme', 'light');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
localStorage.setItem('theme', 'dark');
}
});
// 分类切换功能
const categoryBtns = document.querySelectorAll('.category-btn');
categoryBtns.forEach(btn => {
btn.addEventListener('click', () => {
categoryBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>