# 元创电子 - 电子元件解决方案专家

By 18711430060, 27 July, 2025
角色
assistant
content

# 元创电子 - 电子元件解决方案专家

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>元创电子 - 电子元件解决方案专家</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 100%;
overflow-x: hidden;
}

/* 头部样式 */
.header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 15px 0;
text-align: center;
position: relative;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 5px;
}
.slogan {
font-size: 0.9rem;
opacity: 0.9;
}
.nav-btn {
position: absolute;
right: 15px;
top: 15px;
background: none;
border: none;
color: white;
font-size: 1.5rem;
}

/* 轮播图 */
.banner {
height: 180px;
background: url('https://example.com/banner.jpg&#039;) center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.banner h1 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.banner p {
font-size: 0.9rem;
max-width: 80%;
}

/* 主要内容区 */
.section {
padding: 20px 15px;
background: white;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.section-title {
font-size: 1.2rem;
color: #1e3c72;
margin-bottom: 15px;
border-left: 4px solid #1e3c72;
padding-left: 10px;
}

/* 产品展示 */
.products {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.product-item {
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
}
.product-img {
height: 80px;
background: #f5f5f5;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.product-title {
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 3px;
}
.product-desc {
font-size: 0.8rem;
color: #666;
}

/* 联系我们 */
.contact-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.contact-icon {
width: 30px;
height: 30px;
background: #1e3c72;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}

/* 底部 */
.footer {
background: #2a2a2a;
color: #aaa;
padding: 20px 15px;
text-align: center;
font-size: 0.8rem;
}

/* 按钮 */
.btn {
display: inline-block;
padding: 8px 15px;
background: #1e3c72;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 0.9rem;
margin-top: 10px;
}
.btn-block {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<header class="header">
<div class="logo">元创电子</div>
<div class="slogan">精密连接世界 · 创新驱动未来</div>
<button class="nav-btn">☰</button>
</header>

<!-- 轮播图 -->
<section class="banner">
<h1>电子元件解决方案专家</h1>
<p>15年行业积淀 · 服务全球2000+企业客户</p>
</section>

<!-- 关于我们 -->
<section class="section">
<h2 class="section-title">关于我们</h2>
<p>元创电子成立于2008年，专注于高端电子元器件的研发与制造，拥有20000㎡智能化生产基地，通过ISO9001和IATF16949双重认证。</p>
<div style="display: flex; justify-content: space-between; margin-top: 15px;">
<div style="text-align: center;">
<div style="font-size: 1.2rem; color: #1e3c72; font-weight: bold;">15+</div>
<div style="font-size: 0.7rem;">行业经验</div>
</div>
<div style="text-align: center;">
<div style="font-size: 1.2rem; color: #1e3c72; font-weight: bold;">200+</div>
<div style="font-size: 0.7rem;">核心专利</div>
</div>
<div style="text-align: center;">
<div style="font-size: 1.2rem; color: #1e3c72; font-weight: bold;">0.005%</div>
<div style="font-size: 0.7rem;">不良率</div>
</div>
</div>
</section>

<!-- 产品展示 -->
<section class="section">
<h2 class="section-title">核心产品</h2>
<div class="products">
<div class="product-item">
<div class="product-img">[电容图片]</div>
<div class="product-title">MLCC电容系列</div>
<div class="product-desc">01005-2220全尺寸覆盖</div>
</div>
<div class="product-item">
<div class="product-img">[电感图片]</div>
<div class="product-title">功率电感</div>
<div class="product-desc">车规级AEC-Q200认证</div>
</div>
<div class="product-item">
<div class="product-img">[模组图片]</div>
<div class="product-title">无线通信模组</div>
<div class="product-desc">BLE+WiFi6双模</div>
</div>
<div class="product-item">
<div class="product-img">[模块图片]</div>
<div class="product-title">BMS采集模块</div>
<div class="product-desc">新能源汽车专用</div>
</div>
</div>
<a href="#" class="btn btn-block">查看全部产品</a>
</section>

<!-- 行业应用 -->
<section class="section">
<h2 class="section-title">行业应用</h2>
<div style="background: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span>消费电子</span>
<span>35%</span>
</div>
<div style="height: 5px; background: #e0e0e0; border-radius: 2px;">
<div style="width: 35%; height: 100%; background: #1e3c72;"></div>
</div>
</div>
<div style="background: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span>汽车电子</span>
<span>28%</span>
</div>
<div style="height: 5px; background: #e0e0e0; border-radius: 2px;">
<div style="width: 28%; height: 100%; background: #1e3c72;"></div>
</div>
</div>
<div style="background: #f5f5f5; padding: 10px; border-radius: 4px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span>工业设备</span>
<span>22%</span>
</div>
<div style="height: 5px; background: #e0e0e0; border-radius: 2px;">
<div style="width: 22%; height: 100%; background: #1e3c72;"></div>
</div>
</div>
</section>

<!-- 联系我们 -->
<section class="section">
<h2 class="section-title">联系我们</h2>
<div class="contact-item">
<div class="contact-icon">📞</div>
<div>400-888-XXXX</div>
</div>
<div class="contact-item">
<div class="contact-icon">✉️</div>
<div>info@yuancheng.com</div>
</div>
<div class="contact-item">
<div class="contact-icon">🏢</div>
<div>深圳市南山区科技园</div>
</div>
<a href="#" class="btn btn-block">在线咨询</a>
</section>

<!-- 底部 -->
<footer class="footer">
<p>©2023 元创电子科技</p>
<p style="margin-top: 10px;">粤ICP备XXXXXXXX号</p>
<div style="margin-top: 10px;">
<a href="#" style="color: #aaa; margin: 0 5px;">隐私政策</a>
<a href="#" style="color: #aaa; margin: 0 5px;">人才招聘</a>
</div>
</footer>
</div>
</body>
</html>
```

## 页面特点

1. **移动优先设计**：
- 完全响应式布局，适配各种手机屏幕
- 触控友好的按钮和交互元素
- 简洁的导航结构

2. **核心内容呈现**：
- 突出展示企业核心竞争力和关键数据
- 产品以网格形式直观展示
- 行业应用数据可视化

3. **性能优化**：
- 轻量级代码结构
- 内联关键CSS减少请求
- 适合移动网络环境的图片处理方案

4. **转化功能**：
- 显著的联系方式区域
- 多处行动召唤按钮
- 简洁的表单入口

使用时请替换示例图片链接为您真实的图片资源，并可根据实际需求调整颜色方案和内容结构。如需添加更多交互功能(如下拉菜单、表单等)，可以进一步扩展JavaScript部分。

total_tokens
4298