旧物改造灵感库，核心功能，分享旧物改造案例，如塑料瓶做花盆，旧衣服改围裙等，支持搜索改造类型，上传自己的作品，应用场景，喜欢动手的中老年人找改造灵感，废物利用省钱又环保。

发布时间：2025-12-21 04:32

利用旧物改造，如改造衣物、家具，既环保又省钱。 #生活技巧# #节省生活成本# #生活节俭# #家庭维修自己动手#

旧物改造灵感库 - 创新设计梦工场

我将设计一个适合中老年人使用的旧物改造灵感库，具有大字体、简洁界面和直观操作流程。

设计思路

- 采用温暖环保的绿色为主色调

- 大按钮和清晰导航方便操作

- 卡片式布局展示改造案例

- 支持搜索、筛选和上传功能

- 响应式设计适配不同设备

下面是完整的实现代码：

<!DOCTYPE html>

<head>

<title>旧物改造灵感库 - 创新设计梦工场</title>

<style>

* {

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>

</head>

<body>

<h1>旧物改造灵感库</h1>

</div>

<p class="tagline">创新设计梦工场 · 让旧物焕发新生 · 省钱环保又实用</p>

</div>

</header>

<nav>

</div>

</nav>

</div>

<option value="">所有改造类型</option>

</select>

<option value="">所有应用场景</option>

</select>

</section>

</section>

<h2 class="section-title"><i class="fas fa-cloud-upload-alt"></i> 分享您的改造作品</h2>

</div>

<option value="">请选择类型</option>

</select>

</div>

<option value="">请选择场景</option>

</select>

</div>

</div>

<label for="project-image">上传作品照片</label>

</div>

<button type="submit" class="submit-btn"><i class="fas fa-paper-plane"></i> 提交我的作品</button>

</div>

</form>

</section>

</main>

<h3>创新设计梦工场 · 旧物改造灵感库</h3>

<p>让创意改变生活，让环保成为习惯</p>

</div>

</footer>

// 示例数据 - 旧物改造案例

const projects = [

{

id: 1,

title: "塑料瓶创意花盆",

type: "花盆",

scene: "阳台",

description: "将废弃塑料瓶切割成两半，底部打孔排水，外部用麻绳缠绕装饰，变身时尚花盆。适合种植小型多肉植物。",

likes: 128,

liked: false,

image: "https://images.unsplash.com/photo-1598880940080-ff9a29813625?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

{

id: 2,

title: "旧牛仔裤改围裙",

type: "围裙",

scene: "厨房",

description: "利用旧牛仔裤的裤腿部分制作围裙主体，口袋保留作为工具袋，腰带使用裤腰部分，既实用又有个性。",

likes: 96,

liked: false,

image: "https://images.unsplash.com/photo-1622473590773-f588134b6ce7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

{

id: 3,

title: "玻璃瓶变收纳罐",

type: "收纳",

scene: "厨房",

description: "清洗干净的玻璃瓶去掉标签，用丙烯颜料绘制图案或贴上装饰纸，盖子喷漆处理，变身精美收纳罐。",

likes: 87,

liked: false,

image: "https://images.unsplash.com/photo-1600857544200-b2f666a6b1dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

{

id: 4,

title: "旧梯子书架",

type: "家具",

scene: "客厅",

description: "将废旧木梯横放固定，阶梯部分摆放书籍和装饰品，顶部可放置绿植，打造独特的墙面书架。",

likes: 142,

liked: false,

image: "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

{

id: 5,

title: "轮胎秋千椅",

type: "装饰",

scene: "庭院",

description: "旧轮胎清洗后刷上鲜艳油漆，内部加软垫，悬挂在树上或专用支架上，成为孩子们喜爱的秋千座椅。",

likes: 204,

liked: false,

image: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

{

id: 6,

title: "纸箱变玩具屋",

type: "玩具",

scene: "儿童房",

description: "大型纸箱裁剪出门窗，内部用彩纸装饰，屋顶可做成斜坡，添加小家具，变成孩子专属的娃娃屋。",

likes: 178,

liked: false,

image: "https://images.unsplash.com/photo-1587654780291-39c9404d746b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

}

];

// 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 class="no-results">没有找到匹配的改造案例，试试其他关键词吧！</div>';

return;

}

projectsToRender.forEach(project => {

const card = document.createElement('div');

card.className = 'card';

card.innerHTML = `

</div>

<h3 class="card-title">${project.title}</h3>

<span class="card-type">${project.type}</span>

<p class="card-desc">${project.description}</p>

<span class="card-scene"><i class="fas fa-map-marker-alt"></i> ${project.scene}</span>

<i class="fas fa-heart"></i> ${project.likes}

</button>

</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 class="fas 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?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" // 默认图片

};

projects.unshift(newProject);

renderProjects(projects);

// 重置表单

uploadForm.reset();

alert('作品提交成功！感谢您分享创意！');

});

}

// 页面加载完成后初始化

window.addEventListener('DOMContentLoaded', initPage);

</script>

</body>

</html>

主要功能说明

1. 灵感展示区

- 卡片式布局展示各种旧物改造案例

- 每张卡片包含作品图片、标题、类型、描述和应用场景

- 支持点赞功能记录受欢迎的作品

2. 搜索与筛选

- 关键词搜索（支持标题、描述和类型搜索）

- 按改造类型筛选（花盆、围裙、收纳等）

- 按应用场景筛选（阳台、厨房、客厅等）

3. 作品上传

- 提供表单供用户上传自己的改造作品

- 包含作品名称、类型、场景、详细说明等字段

- 提交后自动添加到灵感库中

4. 用户体验优化

- 大字体和清晰按钮，适合中老年人使用

- 响应式设计适配不同设备屏幕

- 环保主题的绿色配色方案

- 卡片悬停动画增强交互体验

这个应用完全在前端运行，使用JavaScript动态生成内容，无需后端支持。在实际应用中，可以添加数据库支持以持久化存储用户上传的作品。

我是编程小白，请大家多多指教，谢谢！

网址：旧物改造灵感库，核心功能，分享旧物改造案例，如塑料瓶做花盆，旧衣服改围裙等，支持搜索改造类型，上传自己的作品，应用场景，喜欢动手的中老年人找改造灵感，废物利用省钱又环保。 https://www.yuejiaxmz.com/news/view/1421002

⬅️上一篇：老旧小区换新颜居民生活更美满

➡️下一篇：老妈网购神操作！8件小家居的妙用

旧物改造灵感库，核心功能，分享旧物改造案例，如塑料瓶做花盆，旧衣服改围裙等，支持搜索改造类型，上传自己的作品，应用场景，喜欢动手的中老年人找改造灵感，废物利用省钱又环保。

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享