【免费】作品设计展示代码可上传自动适应静态源码资源-CSDN下载

共3个文件

url：2个

html：1个

HTML

需积分: 0 2 浏览量 2025-08-25 07:25:58 上传评论收藏 8KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

作品展示.zip （3个子文件）

域名抢注交易平台.url 126B

作品展示.html 35KB

双击获取更多.url 110B

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebGallery - 静态网页展示</title>  <script src="https://cdn.tailwindcss.com"></script>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">  <script> tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#60A5FA', neutral: '#F9FAFB', accent: '#F59E0B' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script>  <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .card-hover { @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1; } .text-balance { text-wrap: balance; } } </style> <style> /* 全局样式 */ html { scroll-behavior: smooth; } /* 加载动画 */ .loader { border-top-color: #3B82F6; animation: spinner 0.6s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } /* 渐入动画 */ .fade-in { animation: fadeIn 0.6s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 图片悬停效果 */ .img-container { overflow: hidden; border-radius: 0.5rem; } .img-container img { transition: transform 0.4s ease; } .img-container:hover img { transform: scale(1.03); } /* 防复制样式 */ .no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body class="font-sans bg-white text-gray-800">  <header id="navbar" class="fixed w-full bg-white/95 backdrop-blur-sm z-50 transition-all duration-300"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center py-4"> <div class="flex items-center space-x-2"> <i class="fa fa-code text-primary"></i> <h1 class="text-lg font-semibold text-gray-800">WebGallery</h1> </div> <nav class="hidden md:flex items-center space-x-6"> <a href="#home" class="text-gray-600 hover:text-primary transition-colors text-sm">首页</a> <a href="#showcase" class="text-gray-600 hover:text-primary transition-colors text-sm">展示</a> <a href="#upload" class="text-gray-600 hover:text-primary transition-colors text-sm">上传</a> <a href="#about" class="text-gray-600 hover:text-primary transition-colors text-sm">关于</a> </nav> <button class="md:hidden text-gray-600" id="menuToggle"> <i class="fa fa-bars"></i> </button> </div> </div>  <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-100"> <div class="container mx-auto px-4 py-2 flex flex-col space-y-1"> <a href="#home" class="py-2 text-gray-600 hover:text-primary transition-colors text-sm">首页</a> <a href="#showcase" class="py-2 text-gray-600 hover:text-primary transition-colors text-sm">展示</a> <a href="#upload" class="py-2 text-gray-600 hover:text-primary transition-colors text-sm">上传</a> <a href="#about" class="py-2 text-gray-600 hover:text-primary transition-colors text-sm">关于</a> </div> </div> </header>  <section id="home" class="pt-24 pb-16 bg-neutral"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-2xl mx-auto text-center fade-in"> <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold leading-tight mb-4 text-balance"> 发现精美的<span class="text-primary">静态网页</span>设计 </h1> <p class="text-gray-600 mb-8 text-balance"> 浏览精选静态网页作品，点击即可查看完整演示 </p> <div class="flex flex-col sm:flex-row justify-center gap-3"> <a href="#showcase" class="bg-primary hover:bg-primary/90 text-white text-sm font-medium py-2.5 px-6 rounded-lg transition-all"> 浏览作品 <i class="fa fa-arrow-right ml-1"></i> </a> <a href="#upload" class="bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium py-2.5 px-6 rounded-lg transition-all border border-gray-200"> 分享你的设计 <i class="fa fa-upload ml-1"></i> </a> </div> </div> </div> </section>  <section class="py-6 bg-white"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-6xl mx-auto"> <div class="flex flex-col md:flex-row justify-between items-center gap-4"> <h2 class="text-xl font-semibold text-gray-800">静态网页精选</h2> <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto"> <div class="relative flex-grow max-w-md"> <input type="text" placeholder="搜索网页..." class="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary text-sm" > <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i> </div> <select class="border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white text-sm"> <option value="all">所有类别</option> <option value="portfolio">作品集</option> <option value="landing">着陆页</option> <option value="blog">博客</option> <option value="ecommerce">电商</option> </select> </div> </div> </div> </div> </section>  <section id="showcase" class="py-8 bg-gray-50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto">  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:g

评论收藏

内容反馈