广州公司网站制作量品定制合伙人

广州公司网站制作,量品定制合伙人,花都网站建设公司怎么样,百度网站排名提升工具旧物改造灵感库 - 创新设计梦工场我将设计一个适合中老年人使用的旧物改造灵感库#xff0c;具有大字体、简洁界面和直观操作流程。设计思路- 采用温暖环保的绿色为主色调- 大按钮和清晰导航方便操作- 卡片式布局展示改造案例- 支持搜索、筛选和上传功能- 响应式设计适配不同设…旧物改造灵感库 - 创新设计梦工场我将设计一个适合中老年人使用的旧物改造灵感库具有大字体、简洁界面和直观操作流程。设计思路- 采用温暖环保的绿色为主色调- 大按钮和清晰导航方便操作- 卡片式布局展示改造案例- 支持搜索、筛选和上传功能- 响应式设计适配不同设备下面是完整的实现代码!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title旧物改造灵感库 - 创新设计梦工场/titlelink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.cssstyle* {margin: 0;padding: 0;box-sizing: border-box;font-family: Microsoft YaHei, sans-serif;}:root {--primary: #4CAF50;--primary-dark: #388E3C;--secondary: #FFC107;--light: #F1F8E9;--dark: #1B5E20;--gray: #757575;--white: #FFFFFF;}body {background-color: #f5f5f5;color: #333;line-height: 1.6;font-size: 18px;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {background: linear-gradient(135deg, var(--primary), var(--dark));color: var(--white);padding: 20px 0;text-align: center;box-shadow: 0 4px 12px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 100;}.logo {display: flex;align-items: center;justify-content: center;gap: 15px;margin-bottom: 10px;}.logo i {font-size: 2.5rem;color: var(--secondary);}h1 {font-size: 2.5rem;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0,0,0,0.2);}.tagline {font-size: 1.3rem;opacity: 0.9;max-width: 800px;margin: 0 auto;}nav {background-color: var(--white);padding: 15px 0;box-shadow: 0 2px 8px rgba(0,0,0,0.08);margin-bottom: 30px;}.nav-container {display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;}.nav-btn {background-color: var(--light);color: var(--dark);border: none;padding: 12px 25px;font-size: 1.2rem;border-radius: 50px;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 8px;}.nav-btn:hover, .nav-btn.active {background-color: var(--primary);color: var(--white);transform: translateY(-2px);}.search-section {background-color: var(--white);padding: 25px;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.08);margin-bottom: 30px;display: flex;flex-wrap: wrap;gap: 20px;align-items: center;}.search-box {flex: 1;min-width: 300px;position: relative;}.search-box input {width: 100%;padding: 16px 20px 16px 55px;font-size: 1.2rem;border: 2px solid #e0e0e0;border-radius: 50px;outline: none;transition: border-color 0.3s;}.search-box input:focus {border-color: var(--primary);}.search-box i {position: absolute;left: 25px;top: 50%;transform: translateY(-50%);font-size: 1.3rem;color: var(--gray);}.filter-select {padding: 16px 25px;font-size: 1.2rem;border: 2px solid #e0e0e0;border-radius: 50px;background-color: var(--white);min-width: 200px;outline: none;cursor: pointer;}.filter-select:focus {border-color: var(--primary);}.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 30px;margin-bottom: 40px;}.card {background-color: var(--white);border-radius: 15px;overflow: hidden;box-shadow: 0 6px 15px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;}.card:hover {transform: translateY(-10px);box-shadow: 0 12px 25px rgba(0,0,0,0.15);}.card-img {height: 220px;overflow: hidden;}.card-img img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}.card:hover .card-img img {transform: scale(1.05);}.card-content {padding: 25px;}.card-title {font-size: 1.5rem;color: var(--dark);margin-bottom: 12px;}.card-type {display: inline-block;background-color: var(--light);color: var(--primary-dark);padding: 6px 15px;border-radius: 20px;font-size: 1rem;margin-bottom: 15px;}.card-desc {color: var(--gray);margin-bottom: 20px;font-size: 1.1rem;}.card-footer {display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #eee;padding-top: 15px;}.card-scene {font-size: 1rem;color: var(--primary);display: flex;align-items: center;gap: 5px;}.like-btn {background: none;border: none;color: var(--gray);font-size: 1.3rem;cursor: pointer;transition: color 0.3s;}.like-btn:hover, .like-btn.liked {color: #f44336;}.upload-section {background-color: var(--white);padding: 30px;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.08);margin-bottom: 40px;}.section-title {font-size: 1.8rem;color: var(--dark);margin-bottom: 25px;display: flex;align-items: center;gap: 10px;}.upload-form {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;}.form-group {margin-bottom: 20px;}.form-group label {display: block;margin-bottom: 10px;font-size: 1.2rem;color: var(--dark);font-weight: bold;}.form-control {width: 100%;padding: 16px;font-size: 1.1rem;border: 2px solid #e0e0e0;border-radius: 10px;background-color: var(--light);}.form-control:focus {border-color: var(--primary);outline: none;}textarea.form-control {min-height: 150px;resize: vertical;}.full-width {grid-column: span 2;}.submit-btn {background-color: var(--primary);color: var(--white);border: none;padding: 16px 40px;font-size: 1.3rem;border-radius: 50px;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 10px;margin-top: 10px;}.submit-btn:hover {background-color: var(--primary-dark);transform: translateY(-3px);box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);}footer {background-color: var(--dark);color: var(--white);padding: 30px 0;text-align: center;margin-top: 40px;}.footer-content {max-width: 800px;margin: 0 auto;}.footer-links {display: flex;justify-content: center;gap: 25px;margin: 20px 0;flex-wrap: wrap;}.footer-link {color: var(--secondary);text-decoration: none;font-size: 1.1rem;transition: color 0.3s;}.footer-link:hover {color: var(--white);text-decoration: underline;}.copyright {margin-top: 20px;opacity: 0.8;font-size: 1rem;}media (max-width: 768px) {.upload-form {grid-template-columns: 1fr;}.full-width {grid-column: span 1;}.gallery {grid-template-columns: 1fr;}h1 {font-size: 2rem;}.tagline {font-size: 1.1rem;}}/style/headbodyheaderdiv classcontainerdiv classlogoi classfas fa-recycle/ih1旧物改造灵感库/h1/divp classtagline创新设计梦工场 · 让旧物焕发新生 · 省钱环保又实用/p/div/headernavdiv classcontainer nav-containerbutton classnav-btn activei classfas fa-home/i 首页灵感/buttonbutton classnav-btni classfas fa-seedling/i 种植园艺/buttonbutton classnav-btni classfas fa-tshirt/i 服装改造/buttonbutton classnav-btni classfas fa-utensils/i 家居用品/buttonbutton classnav-btni classfas fa-gift/i 创意礼品/buttonbutton classnav-btni classfas fa-star/i 我的收藏/button/div/navmain classcontainersection classsearch-sectiondiv classsearch-boxi classfas fa-search/iinput typetext idsearch-input placeholder搜索改造类型或关键词.../divselect classfilter-select idtype-filteroption value所有改造类型/optionoption value花盆花盆容器/optionoption value围裙围裙服饰/optionoption value收纳收纳整理/optionoption value家具家具翻新/optionoption value玩具儿童玩具/optionoption value装饰家居装饰/option/selectselect classfilter-select idscene-filteroption value所有应用场景/optionoption value阳台阳台花园/optionoption value厨房厨房空间/optionoption value客厅客厅装饰/optionoption value卧室卧室布置/optionoption value庭院庭院景观/optionoption value儿童房儿童房间/option/select/sectionsection classgallery idinspiration-gallery!-- 案例卡片将通过JS动态生成 --/sectionsection classupload-sectionh2 classsection-titlei classfas fa-cloud-upload-alt/i 分享您的改造作品/h2form classupload-form idupload-formdiv classform-group full-widthlabel forproject-title作品名称/labelinput typetext idproject-title classform-control placeholder例如塑料瓶变身高颜值花盆/divdiv classform-grouplabel forproject-type改造类型/labelselect idproject-type classform-controloption value请选择类型/optionoption value花盆花盆容器/optionoption value围裙围裙服饰/optionoption value收纳收纳整理/optionoption value家具家具翻新/optionoption value玩具儿童玩具/optionoption value装饰家居装饰/option/select/divdiv classform-grouplabel forproject-scene应用场景/labelselect idproject-scene classform-controloption value请选择场景/optionoption value阳台阳台花园/optionoption value厨房厨房空间/optionoption value客厅客厅装饰/optionoption value卧室卧室布置/optionoption value庭院庭院景观/optionoption value儿童房儿童房间/option/select/divdiv classform-group full-widthlabel forproject-desc改造说明/labeltextarea idproject-desc classform-control placeholder详细描述您的改造过程、使用材料和技巧.../textarea/divdiv classform-group full-widthlabel forproject-image上传作品照片/labelinput typefile idproject-image classform-control acceptimage/*/divdiv classform-group full-widthbutton typesubmit classsubmit-btni classfas fa-paper-plane/i 提交我的作品/button/div/form/section/mainfooterdiv classcontainer footer-contenth3创新设计梦工场 · 旧物改造灵感库/h3p让创意改变生活让环保成为习惯/pdiv classfooter-linksa href# classfooter-link关于我们/aa href# classfooter-link使用指南/aa href# classfooter-link改造教程/aa href# classfooter-link常见问题/aa href# classfooter-link联系我们/aa href# classfooter-link隐私政策/a/divp classcopyright© 2023 创新设计梦工场 | 旧物改造灵感库 | 让每件旧物都有新生命/p/div/footerscript// 示例数据 - 旧物改造案例const projects [{id: 1,title: 塑料瓶创意花盆,type: 花盆,scene: 阳台,description: 将废弃塑料瓶切割成两半底部打孔排水外部用麻绳缠绕装饰变身时尚花盆。适合种植小型多肉植物。,likes: 128,liked: false,image: https://images.unsplash.com/photo-1598880940080-ff9a29813625?ixlibrb-4.0.3autoformatfitcropw600q80},{id: 2,title: 旧牛仔裤改围裙,type: 围裙,scene: 厨房,description: 利用旧牛仔裤的裤腿部分制作围裙主体口袋保留作为工具袋腰带使用裤腰部分既实用又有个性。,likes: 96,liked: false,image: https://images.unsplash.com/photo-1622473590773-f588134b6ce7?ixlibrb-4.0.3autoformatfitcropw600q80},{id: 3,title: 玻璃瓶变收纳罐,type: 收纳,scene: 厨房,description: 清洗干净的玻璃瓶去掉标签用丙烯颜料绘制图案或贴上装饰纸盖子喷漆处理变身精美收纳罐。,likes: 87,liked: false,image: https://images.unsplash.com/photo-1600857544200-b2f666a6b1dd?ixlibrb-4.0.3autoformatfitcropw600q80},{id: 4,title: 旧梯子书架,type: 家具,scene: 客厅,description: 将废旧木梯横放固定阶梯部分摆放书籍和装饰品顶部可放置绿植打造独特的墙面书架。,likes: 142,liked: false,image: https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixlibrb-4.0.3autoformatfitcropw600q80},{id: 5,title: 轮胎秋千椅,type: 装饰,scene: 庭院,description: 旧轮胎清洗后刷上鲜艳油漆内部加软垫悬挂在树上或专用支架上成为孩子们喜爱的秋千座椅。,likes: 204,liked: false,image: https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlibrb-4.0.3autoformatfitcropw600q80},{id: 6,title: 纸箱变玩具屋,type: 玩具,scene: 儿童房,description: 大型纸箱裁剪出门窗内部用彩纸装饰屋顶可做成斜坡添加小家具变成孩子专属的娃娃屋。,likes: 178,liked: false,image: https://images.unsplash.com/photo-1587654780291-39c9404d746b?ixlibrb-4.0.3autoformatfitcropw600q80}];// DOM元素const gallery document.getElementById(inspiration-gallery);const searchInput document.getElementById(search-input);const typeFilter document.getElementById(type-filter);const sceneFilter document.getElementById(scene-filter);const uploadForm document.getElementById(upload-form);// 渲染项目卡片function renderProjects(projectsToRender) {gallery.innerHTML ;if (projectsToRender.length 0) {gallery.innerHTML div classno-results没有找到匹配的改造案例试试其他关键词吧/div;return;}projectsToRender.forEach(project {const card document.createElement(div);card.className card;card.innerHTML div classcard-imgimg src${project.image} alt${project.title}/divdiv classcard-contenth3 classcard-title${project.title}/h3span classcard-type${project.type}/spanp classcard-desc${project.description}/pdiv classcard-footerspan classcard-scenei classfas fa-map-marker-alt/i ${project.scene}/spanbutton classlike-btn ${project.liked ? liked : } data-id${project.id}i classfas fa-heart/i ${project.likes}/button/div/div;gallery.appendChild(card);});// 添加点赞事件监听document.querySelectorAll(.like-btn).forEach(btn {btn.addEventListener(click, function() {const id parseInt(this.getAttribute(data-id));const project projects.find(p p.id id);if (project) {if (project.liked) {project.likes--;project.liked false;} else {project.likes;project.liked true;}this.classList.toggle(liked);this.innerHTML i classfas fa-heart/i ${project.likes};}});});}// 过滤和搜索项目function filterProjects() {const searchTerm searchInput.value.toLowerCase();const typeValue typeFilter.value;const sceneValue sceneFilter.value;const filtered projects.filter(project {const matchesSearch project.title.toLowerCase().includes(searchTerm) ||project.description.toLowerCase().includes(searchTerm) ||project.type.toLowerCase().includes(searchTerm) ||project.scene.toLowerCase().includes(searchTerm);const matchesType typeValue ? project.type typeValue : true;const matchesScene sceneValue ? project.scene sceneValue : true;return matchesSearch matchesType matchesScene;});renderProjects(filtered);}// 初始化页面function initPage() {renderProjects(projects);// 添加事件监听searchInput.addEventListener(input, filterProjects);typeFilter.addEventListener(change, filterProjects);sceneFilter.addEventListener(change, filterProjects);// 导航按钮事件document.querySelectorAll(.nav-btn).forEach(btn {btn.addEventListener(click, function() {document.querySelectorAll(.nav-btn).forEach(b b.classList.remove(active));this.classList.add(active);// 实际应用中这里会过滤对应类别的项目// 这里简化处理仅重新渲染所有项目filterProjects();});});// 表单提交事件uploadForm.addEventListener(submit, function(e) {e.preventDefault();const title document.getElementById(project-title).value;const type document.getElementById(project-type).value;const scene document.getElementById(project-scene).value;const desc document.getElementById(project-desc).value;if (!title || !type || !scene || !desc) {alert(请填写所有必填字段);return;}// 创建新项目对象const newProject {id: projects.length 1,title: title,type: type,scene: scene,description: desc,likes: 0,liked: false,image: https://images.unsplash.com/photo-1505842381624-c6b0579625a5?ixlibrb-4.0.3autoformatfitcropw600q80 // 默认图片};projects.unshift(newProject);renderProjects(projects);// 重置表单uploadForm.reset();alert(作品提交成功感谢您分享创意);});}// 页面加载完成后初始化window.addEventListener(DOMContentLoaded, initPage);/script/body/html主要功能说明1. 灵感展示区- 卡片式布局展示各种旧物改造案例- 每张卡片包含作品图片、标题、类型、描述和应用场景- 支持点赞功能记录受欢迎的作品2. 搜索与筛选- 关键词搜索支持标题、描述和类型搜索- 按改造类型筛选花盆、围裙、收纳等- 按应用场景筛选阳台、厨房、客厅等3. 作品上传- 提供表单供用户上传自己的改造作品- 包含作品名称、类型、场景、详细说明等字段- 提交后自动添加到灵感库中4. 用户体验优化- 大字体和清晰按钮适合中老年人使用- 响应式设计适配不同设备屏幕- 环保主题的绿色配色方案- 卡片悬停动画增强交互体验这个应用完全在前端运行使用JavaScript动态生成内容无需后端支持。在实际应用中可以添加数据库支持以持久化存储用户上传的作品。我是编程小白请大家多多指教谢谢