以下是一个PNG透明素材网站的HTML代码，包含了您要求的所有结构和设计元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明素材库 - 免费PNG透明背景图片下载</title>
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
/* 导航栏 */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
max-width: 1400px;
margin: 0 auto;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #0eb83a;
}
.logo span {
color: #333;
}
.main-nav {
display: flex;
list-style: none;
}
.main-nav li {
margin: 0 15px;
position: relative;
}
.main-nav li a:hover {
color: #0eb83a;
}
.main-nav li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: #0eb83a;
bottom: -5px;
left: 0;
transition: width 0.3s;
}
.main-nav li a:hover::after {
width: 100%;
}
.user-actions {
display: flex;
align-items: center;
}
.user-actions a {
margin-left: 20px;
padding: 8px 15px;
border-radius: 4px;
transition: all 0.3s;
}
.user-actions .login {
color: #333;
}
.user-actions .login:hover {
color: #0eb83a;
}
.user-actions .upload {
background-color: #0eb83a;
color: white;
}
.user-actions .upload:hover {
background-color: #0ca534;
}
.hamburger {
display: none;
cursor: pointer;
font-size: 24px;
}
/* 搜索区 */
.search-section {
background-color: white;
padding: 60px 5%;
text-align: center;
margin-bottom: 30px;
}
.search-container {
max-width: 800px;
margin: 0 auto;
}
.search-section h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #333;
}
.search-section p {
color: #666;
margin-bottom: 30px;
font-size: 1.1rem;
}
.search-box {
display: flex;
position: relative;
}
.search-box input {
width: 100%;
padding: 15px 20px;
border: 2px solid #ddd;
border-radius: 50px;
font-size: 1rem;
outline: none;
transition: all 0.3s;
}
.search-box input:focus {
border-color: #0eb83a;
box-shadow: 0 0 10px rgba(14, 184, 58, 0.2);
}
.search-box button {
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
background-color: #0eb83a;
color: white;
border: none;
border-radius: 50px;
padding: 0 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.search-box button:hover {
background-color: #0ca534;
}
.advanced-search {
margin-top: 15px;
font-size: 0.9rem;
color: #666;
}
.advanced-search a {
color: #0eb83a;
margin-left: 5px;
}
/* 分类筛选区 */
.filter-section {
max-width: 1400px;
margin: 0 auto 30px;
padding: 0 5%;
}
.filter-title {
font-size: 1.2rem;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.filter-title i {
margin-right: 10px;
color: #0eb83a;
}
.filter-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-tag {
padding: 8px 15px;
background-color: white;
border-radius: 50px;
font-size: 0.9rem;
transition: all 0.3s;
cursor: pointer;
}
.filter-tag:hover, .filter-tag.active {
background-color: #0eb83a;
color: white;
}
/* 素材展示区 */
.materials-section {
max-width: 1400px;
margin: 0 auto 40px;
padding: 0 5%;
}
.materials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
}
.material-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
position: relative;
}
.material-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.material-thumbnail {
width: 100%;
height: 200px;
object-fit: contain;
background-color: #f9f9f9;
display: block;
}
.material-info {
padding: 15px;
}
.material-title {
font-size: 1rem;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.material-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.download-btn {
background-color: #0eb83a;
color: white;
padding: 6px 15px;
border-radius: 4px;
font-size: 0.9rem;
transition: all 0.3s;
}
.download-btn:hover {
background-color: #0ca534;
}
.favorite-btn {
color: #666;
font-size: 1.2rem;
transition: all 0.3s;
}
.favorite-btn:hover {
color: #ff4757;
}
/* 加载动画 */
.loading-placeholder {
width: 100%;
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.loading-placeholder::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
100% {
left: 100%;
}
}
/* 分页控件 */
.pagination {
display: flex;
justify-content: center;
margin-top: 40px;
}
.pagination a {
padding: 8px 15px;
margin: 0 5px;
background-color: white;
border-radius: 4px;
transition: all 0.3s;
}
.pagination a:hover {
background-color: #0eb83a;
color: white;
}
.pagination a.active {
background-color: #0eb83a;
color: white;
}
/* 底部信息 */
footer {
background-color: #333;
color: #ddd;
padding: 50px 5% 30px;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.footer-column h3 {
color: white;
margin-bottom: 20px;
font-size: 1.2rem;
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 10px;
}
.footer-column a:hover {
color: #0eb83a;
}
.copyright {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #444;
color: #999;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.main-nav, .user-actions {
display: none;
}
.hamburger {
display: block;
}
.search-section h1 {
font-size: 2rem;
}
.materials-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
.nav-container {
padding: 15px 3%;
}
.search-section {
padding: 40px 3%;
}
.materials-grid {
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.filter-section, .materials-section {
padding: 0 3%;
}
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<header>
<div class="nav-container">
<a href="index.html" class="logo">透明<span>素材库</span></a>
<ul class="main-nav">
<li><a href="#">首页</a></li>
<li><a href="#">PNG素材</a></li>
<li><a href="#">矢量素材</a></li>
<li><a href="#">PSD模板</a></li>
<li><a href="#">设计教程</a></li>
</ul>
<div class="user-actions">
<a href="#" class="login">登录</a>
<a href="#" class="upload">上传素材</a>
</div>
<div class="hamburger">☰</div>
</div>
</header>
<!-- 主搜索区 -->
<section class="search-section">
<div class="search-container">
<h1>发现百万+高质量透明PNG素材</h1>
<p>免费下载透明背景图片，无需注册，无版权限制</p>
<div class="search-box">
<input type="text" placeholder="搜索您需要的透明素材，例如：树叶、人物、图标...">
<button>搜索</button>
</div>
<div class="advanced-search">
高级搜索: <a href="#">按颜色</a> <a href="#">按尺寸</a> <a href="#">按分类</a>
</div>
</div>
</section>
<!-- 分类筛选区 -->
<section class="filter-section">
<h3 class="filter-title"><i class="fas fa-tags"></i>热门分类</h3>
<div class="filter-tags">
<div class="filter-tag active">全部</div>
<div class="filter-tag">自然</div>
<div class="filter-tag">人物</div>
<div class="filter-tag">动物</div>
<div class="filter-tag">食物</div>
<div class="filter-tag">节日</div>
<div class="filter-tag">商业</div>
<div class="filter-tag">图标</div>
<div class="filter-tag">背景</div>
<div class="filter-tag">装饰</div>
</div>
</section>
<!-- 素材展示区 -->
<section class="materials-section">
<div class="materials-grid">
<!-- 素材卡片1 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明树叶" alt="透明树叶" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">绿色树叶PNG素材</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 素材卡片2 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明人物" alt="透明人物" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">商务人士PNG素材</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 素材卡片3 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明动物" alt="透明动物" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">可爱猫咪PNG素材</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 素材卡片4 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明图标" alt="透明图标" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">社交媒体图标集</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 素材卡片5 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明装饰" alt="透明装饰" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">节日装饰元素</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 素材卡片6 -->
<div class="material-card">
<img src="https://via.placeholder.com/300x200/ffffff/cccccc?text=透明背景" alt="透明背景" class="material-thumbnail">
<div class="material-info">
<h3 class="material-title">几何背景PNG</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
<!-- 加载动画示例 -->
<div class="material-card">
<div class="loading-placeholder"></div>
<div class="material-info">
<h3 class="material-title">加载中...</h3>
<div class="material-actions">
<a href="#" class="download-btn">免费下载</a>
<a href="#" class="favorite-btn">♥</a>
</div>
</div>
</div>
</div>
<!-- 分页控件 -->
<div class="pagination">
<a href="#">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</section>
<!-- 底部信息 -->
<footer>
<div class="footer-container">
<div class="footer-column">
<h3>关于我们</h3>
<ul>
<li><a href="#">网站简介</a></li>
<li><a href="#">团队介绍</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
<div class="footer-column">
<h3>帮助中心</h3>
<ul>
<li><a href="#">常见问题</a></li>
<li><a href="#">上传指南</a></li>
<li><a href="#">版权说明</a></li>
<li><a href="#">使用条款</a></li>
</ul>
</div>
<div class="footer-column">
<h3>素材分类</h3>
<ul>
<li><a href="#">PNG素材</a></li>
<li><a href="#">矢量素材</a></li>
<li><a href="#">PSD模板</a></li>
<li><a href="#">背景纹理</a></li>
</ul>
</div>
<div class="footer-column">
<h3>关注我们</h3>
<ul>
<li><a href="#">微信公众号</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">抖音</a></li>
<li><a href="#">B站</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2025 透明素材库 - 提供免费PNG透明背景图片下载 | 本网站所有素材均可免费商用
</div>
</footer>
</body>
</html>这个HTML代码实现了您要求的所有功能：
- 顶部导航栏：包含logo、主导航和用户操作按钮
- 主搜索区：突出显示的大搜索框，带搜索按钮和高级筛选链接
- 分类筛选区：热门分类标签，可以点击筛选
- 素材展示区：网格布局的素材卡片，包含缩略图、下载和收藏按钮
- 分页控件：页面底部的分页导航
- 底部信息：网站的多栏信息展示
设计特点：
- 使用#0eb83a作为主色调，应用于按钮和交互元素
- 卡片悬停时有放大和阴影效果
- 包含加载动画占位符
- 完全响应式设计，适配不同屏幕尺寸
- 移动设备上导航栏会变为汉堡菜单
您可以根据实际需要修改内容、图片和链接，这个模板提供了完整的结构和样式基础。
需支付 5元 阅读剩余内容
