使用Trae工具生成网页版书架和书籍的图形操作界面直接上图以下是我发给AI的提示词(我懒得连接数据库了所以直接做个html版的案例):生成一个html网页网页中循环生成一排排的书架每排书架上循环放置立起来的书籍当用户使用鼠标点击书脊时弹出这本书的简介使用html、css、JavaScript、jQuery等技术栈网页中书架的UI整体使用淡紫色。网页背景色使用豆绿色护眼的颜色。生成的所有文件放在电脑的桌面上。AI生成的源代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的书架/title !-- 引入 jQuery CDN -- script srchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/script style /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 页面背景豆绿色护眼 */ body { /* 豆绿色护眼渐变背景 */ background: linear-gradient(135deg, #C7D8A9 0%, #A8C97F 50%, #B4D66D 100%); min-height: 100vh; font-family: Microsoft YaHei, 微软雅黑, sans-serif; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; } /* 页面标题 */ .page-title { color: #5D4E6D; font-size: 2.2rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); letter-spacing: 3px; } .page-subtitle { color: #7A6B8A; font-size: 1rem; margin-bottom: 25px; opacity: 0.8; } /* 书架外层容器 */ .bookshelf-container { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 0; /* 排与排之间无间隙形成整体书架 */ } /* 单排书架 */ .shelf-row { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; /* 书架隔板区域 */ min-height: 200px; padding: 0 20px; background: #D8BFD8; /* 顶板立体感顶部内阴影模拟厚度 */ box-shadow: inset 0 6px 8px -4px rgba(90, 60, 90, 0.3), inset 0 -2px 3px rgba(255, 255, 255, 0.3); border-bottom: 6px solid #C0A0C0; } /* 书架左侧板 */ .shelf-row::before { content: ; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(to right, #B89AB8, #D8BFD8); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15); z-index: 5; } /* 书架右侧板 */ .shelf-row::after { content: ; position: absolute; right: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(to left, #B89AB8, #D8BFD8); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15); z-index: 5; } /* 书架底板隔板 */ .shelf-board { position: absolute; left: 0; right: 0; bottom: -6px; height: 14px; background: linear-gradient(to bottom, #D8BFD8 0%, #C0A0C0 40%, #A88AA8 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); z-index: 6; } /* 书籍书脊样式 */ .book { position: relative; display: flex; align-items: center; justify-content: center; /* 书脊宽度随机高度统一 */ width: 42px; min-width: 38px; max-width: 55px; height: 180px; /* 书脊圆角与立体感 */ border-radius: 3px 3px 1px 1px; cursor: pointer; /* 书脊顶部高光 底部阴影模拟立体感 */ box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.35), inset -2px 0 4px rgba(0, 0, 0, 0.35), 2px 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, filter 0.2s ease; z-index: 2; /* 书脊微微倾斜效果 */ transform-origin: bottom center; overflow: hidden; } /* 书脊悬停效果微微放大、变亮 */ .book:hover { transform: translateY(-12px) scale(1.08); filter: brightness(1.25); z-index: 10; box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.5), inset -2px 0 4px rgba(0, 0, 0, 0.25), 4px 6px 12px rgba(0, 0, 0, 0.4); } /* 书脊上的装饰条顶部和底部金色边条 */ .book::before, .book::after { content: ; position: absolute; left: 0; right: 0; height: 6px; background: linear-gradient(to right, rgba(218, 165, 32, 0.6), rgba(255, 215, 0, 0.8), rgba(218, 165, 32, 0.6)); } .book::before { top: 10px; } .book::after { bottom: 10px; } /* 书脊文字竖排 */ .book-title { writing-mode: vertical-rl; text-orientation: upright; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); letter-spacing: 1px; max-height: 130px; overflow: hidden; text-align: center; padding: 0 2px; user-select: none; line-height: 1.1; } /* 模态框样式 */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 1000; justify-content: center; align-items: center; } .modal-overlay.active { display: flex; } .modal-box { background: linear-gradient(135deg, #F5F0FA 0%, #E6E6FA 100%); border-radius: 12px; width: 90%; max-width: 480px; padding: 0; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); overflow: hidden; animation: modalIn 0.3s ease; border: 3px solid #D8BFD8; } keyframes modalIn { from { opacity: 0; transform: scale(0.8) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* 模态框顶部色带 */ .modal-header { padding: 20px 25px; color: #fff; position: relative; } .modal-header h2 { font-size: 1.4rem; margin-bottom: 6px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .modal-header .modal-author { font-size: 0.95rem; opacity: 0.9; } /* 关闭按钮 */ .modal-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.3); color: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .modal-close:hover { background: rgba(255, 255, 255, 0.6); } /* 模态框正文 */ .modal-body { padding: 22px 25px 28px; } .modal-body .modal-label { font-size: 0.85rem; color: #9B7EBD; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; } .modal-body .modal-intro { font-size: 0.95rem; color: #4A3B5A; line-height: 1.8; text-indent: 2em; } /* 响应式适配 */ media (max-width: 768px) { .page-title { font-size: 1.6rem; } .shelf-row { min-height: 160px; padding: 0 14px; } .book { height: 145px; width: 34px; min-width: 30px; max-width: 44px; } .book-title { font-size: 11px; max-height: 100px; } .book::before, .book::after { height: 4px; } .book::before { top: 8px; } .book::after { bottom: 8px; } } media (max-width: 480px) { .book { height: 120px; width: 28px; min-width: 24px; max-width: 36px; } .book-title { font-size: 9px; max-height: 85px; } .shelf-row { min-height: 135px; padding: 0 10px; } } /style /head body !-- 页面标题 -- h1 classpage-title 我的书架/h1 p classpage-subtitle点击任意书脊查看书籍简介/p !-- 书架容器JS动态生成书架排和书籍 -- div classbookshelf-container idbookshelf !-- 书架内容由jQuery动态生成 -- /div !-- 模态框自定义弹窗 -- div classmodal-overlay idmodalOverlay div classmodal-box idmodalBox div classmodal-header idmodalHeader button classmodal-close idmodalClosetimes;/button h2 idmodalTitle/h2 span classmodal-author idmodalAuthor/span /div div classmodal-body div classmodal-label内容简介/div p classmodal-intro idmodalIntro/p /div /div /div script $(function () { // 书籍数据池44本真实书籍 var bookData [ { title: 红楼梦, author: 曹雪芹, intro: 中国古典四大名著之一以贾宝玉、林黛玉、薛宝钗的爱情婚姻悲剧为主线深刻描写了贾、史、王、薛四大家族的兴衰变化展现了封建社会的百态人生。, color: #8B0000 }, { title: 三国演义, author: 罗贯中, intro: 中国古典四大名著之一描写了东汉末年至西晋初年近百年的历史风云塑造了曹操、刘备、关羽、诸葛亮等众多鲜明人物形象。, color: #2F4F4F }, { title: 西游记, author: 吴承恩, intro: 中国古典四大名著之一讲述唐僧师徒四人西天取经的故事充满奇幻色彩蕴含深刻的人生哲理和社会寓意。, color: #FF8C00 }, { title: 水浒传, author: 施耐庵, intro: 中国古典四大名著之一描写北宋末年以宋江为首的一百零八位好汉在梁山聚义的故事展现了官逼民反的社会现实。, color: #556B2F }, { title: 百年孤独, author: 加西亚·马尔克斯, intro: 魔幻现实主义文学代表作讲述布恩迪亚家族七代人的传奇故事展现拉丁美洲百年来的兴衰变迁荣获诺贝尔文学奖。, color: #4B0082 }, { title: 活着, author: 余华, intro: 讲述农民福贵历经人生苦难的一生从地主少爷到一无所有亲人相继离世却依然坚强活着的故事是中国当代文学经典。, color: #696969 }, { title: 围城, author: 钱钟书, intro: 中国现代文学经典以幽默讽刺的笔调描写知识分子方鸿渐的人生经历揭示了城外的人想冲进去城里的人想逃出来的人生困境。, color: #708090 }, { title: 平凡的世界, author: 路遥, intro: 以孙少安、孙少平两兄弟为主线全景式展现了中国20世纪70年代到80年代城乡社会生活的巨大变迁荣获茅盾文学奖。, color: #8B4513 }, { title: 白夜行, author: 东野圭吾, intro: 日本推理小说杰作讲述两个孩子因一桩命案而命运交织的故事跨越十九年的爱与犯罪深刻揭示人性的黑暗与光明。, color: #1a1a2e }, { title: 解忧杂货店, author: 东野圭吾, intro: 一家神秘的杂货店通过书信连接过去与未来为烦恼的人们解答人生困惑温暖治愈的故事令人动容。, color: #2E8B57 }, { title: 追风筝的人, author: 卡勒德·胡赛尼, intro: 讲述阿富汗少年阿米尔与仆人哈桑的友谊与背叛以及成年后追寻救赎的故事深刻揭示了忠诚、勇气与救赎的主题。, color: #CD853F }, { title: 小王子, author: 圣埃克苏佩里, intro: 法国经典童话讲述小王子从自己的星球出发游历各星球的故事以孩子的视角揭示了成人世界的荒诞与人生的真谛。, color: #FFD700 }, { title: 1984, author: 乔治·奥威尔, intro: 反乌托邦经典小说描绘了一个极权主义社会主人公温斯顿在思想警察的监控下挣扎求存警示了权力对人性的摧残。, color: #2F2F2F }, { title: 三体, author: 刘慈欣, intro: 中国科幻里程碑之作讲述地球文明与三体文明的接触与对抗探讨了宇宙社会学与文明存亡的宏大主题荣获雨果奖。, color: #191970 }, { title: 球状闪电, author: 刘慈欣, intro: 以球状闪电这一自然现象为线索展开对量子物理与宇宙本质的探索兼具硬科幻的严谨与文学的想象力。, color: #008080 }, { title: 人类简史, author: 尤瓦尔·赫拉利, intro: 从认知革命、农业革命到科学革命以全新视角梳理人类十万年的发展历程深刻反思人类文明的成就与代价。, color: #D2691E }, { title: 未来简史, author: 尤瓦尔·赫拉利, intro: 探讨人类未来的发展方向从智人征服世界到智人为神人思考生物技术与人工智能将如何重塑人类社会。, color: #8B4513 }, { title: 时间简史, author: 史蒂芬·霍金, intro: 物理学家霍金的科普名著用通俗语言讲解宇宙起源、黑洞、时间本质等前沿物理概念激发无数人对宇宙的好奇。, color: #1C1C1C }, { title: 明朝那些事, author: 当年明月, intro: 以幽默风趣的笔调讲述明朝三百年历史从朱元璋开国到崇祯亡国让严肃历史变得生动有趣引发全民读史热潮。, color: #B8860B }, { title: 万历十五年, author: 黄仁宇, intro: 以大历史观审视明朝万历年间的关键人物与事件揭示了中国传统社会走向衰落的深层结构性原因。, color: #DAA520 }, { title: 乡土中国, author: 费孝通, intro: 社会学经典著作深入分析中国农村社会的差序格局、礼治秩序等基本特征理解中国传统社会结构的必读之作。, color: #6B8E23 }, { title: 撒哈拉的故事, author: 三毛, intro: 三毛以细腻深情的笔触记录她在撒哈拉沙漠的生活点滴充满异域风情与对自由生活的热爱。, color: #DEB887 }, { title: 梦里花落知多少, author: 三毛, intro: 三毛在丈夫荷西意外去世后创作的散文集以真挚的笔触书写丧夫之痛与对生命的感悟感人至深。, color: #9370DB }, { title: 倾城之恋, author: 张爱玲, intro: 张爱玲代表作讲述白流苏与范柳原在香港沦陷时的爱情故事以冷峻笔调揭示了乱世中人与人之间的算计与温情。, color: #800080 }, { title: 半生缘, author: 张爱玲, intro: 讲述顾曼桢与沈世钧错过的半生情缘描绘了旧时代女性命运的无奈与悲凉是张爱玲最动人的长篇小说之一。, color: #663399 }, { title: 黄金时代, author: 王小波, intro: 以知青时代为背景讲述王二与陈清扬的故事以黑色幽默的笔调表达对自由与理性的追求是当代文学经典。, color: #B8860B }, { title: 沉默的大多数, author: 王小波, intro: 王小波杂文精选集以睿智幽默的文字评论社会、文化、思想等话题展现了独立思考与理性精神的力量。, color: #2F4F4F }, { title: 挪威的森林, author: 村上春树, intro: 日本畅销小说以主人公渡边的回忆讲述青春时代与直子、绿子之间的爱情与迷茫探讨生与死、孤独与联结。, color: #228B22 }, { title: 海边的卡夫卡, author: 村上春树, intro: 讲述十五岁少年田村卡夫卡的奇幻旅程两条叙事线交织充满隐喻与哲思是村上春树最具想象力的作品之一。, color: #4682B4 }, { title: 且听风吟, author: 村上春树, intro: 村上春树处女作以轻盈的笔调描绘二十岁夏天的青春往事奠定了其独特的文学风格荣获群像新人文学奖。, color: #5F9EA0 }, { title: 皮囊, author: 蔡崇达, intro: 以故乡福建为背景用质朴深情的文字书写亲情、故土与成长每一篇都是对生命与灵魂的深刻凝视。, color: #A0522D }, { title: 看见, author: 柴静, intro: 央视记者柴静的自传体作品记录了她十年采访生涯中的重大事件与个人成长以真诚的目光观察社会与人性。, color: #778899 }, { title: 南渡北归, author: 岳南, intro: 全景式描写抗战时期中国知识分子的南渡西迁与战后北归展现大师们的风骨与命运是一部厚重的人物史诗。, color: #8B4513 }, { title: 局外人, author: 加缪, intro: 存在主义文学代表作讲述默尔索在母亲葬礼上冷漠、随后意外杀人被判死刑的故事揭示世界的荒诞与人的真实。, color: #2F2F2F }, { title: 鼠疫, author: 加缪, intro: 以一座被鼠疫封锁的城市为背景描写不同人物面对灾难时的选择与行动探讨反抗、团结与人的尊严。, color: #696969 }, { title: 老人与海, author: 海明威, intro: 讲述老渔夫桑提亚哥在大海上与巨大马林鱼搏斗的故事人可以被毁灭但不能被打败的精神震撼人心荣获诺贝尔奖。, color: #006400 }, { title: 了不起的盖茨比, author: 菲茨杰拉德, intro: 美国文学经典描绘爵士时代盖茨比对旧爱的执著追求与幻灭深刻揭示美国梦的光华与虚妄。, color: #FFD700 }, { title: 飘, author: 玛格丽特·米切尔, intro: 以美国南北战争为背景讲述斯嘉丽·奥哈拉在战火中的坚韧与爱情纠葛塑造了文学史上最鲜明的女性形象之一。, color: #8B0000 }, { title: 简爱, author: 夏洛蒂·勃朗特, intro: 英国文学经典讲述孤女简爱历经磨难追求独立人格与平等爱情的故事塑造了女性自我觉醒的不朽形象。, color: #4169E1 }, { title: 傲慢与偏见, author: 简·奥斯汀, intro: 英国文学经典以伊丽莎白与达西的爱情为主线用幽默细腻的笔调描绘了19世纪英国乡村社会的婚恋观念。, color: #DB7093 }, { title: 罪与罚, author: 陀思妥耶夫斯基, intro: 俄国文学巨著讲述贫困大学生拉斯柯尔尼科夫杀人后的心理挣扎与精神救赎深刻探讨道德、信仰与人性的主题。, color: #800000 }, { title: 战争与和平, author: 托尔斯泰, intro: 俄国文学史诗巨著以拿破仑战争为背景描绘了俄国贵族家庭的命运与时代洪流是世界文学最伟大的作品之一。, color: #556B2F }, { title: 安娜·卡列尼娜, author: 托尔斯泰, intro: 讲述贵族女子安娜追求爱情却走向悲剧的故事以广阔的视角展现了19世纪俄国社会的全景是现实主义文学的巅峰。, color: #8B008B }, { title: 基督山伯爵, author: 大仲马, intro: 法国经典复仇小说讲述爱德蒙·唐泰斯被陷害入狱后越狱复仇的传奇故事情节跌宕起伏是通俗文学的典范。, color: #4B0082 } ]; // 书架配置 var shelfRowCount 6; // 书架排数 var booksPerRow 9; // 每排书籍数量 var bookIndex 0; // 全局书籍索引循环取用 var $bookshelf $(#bookshelf); // 循环生成书架排与书籍 for (var row 0; row shelfRowCount; row) { // 创建一排书架 var $shelfRow $(div classshelf-row/div); // 循环放置书籍 for (var col 0; col booksPerRow; col) { // 从数据池循环取用书籍 var book bookData[bookIndex % bookData.length]; bookIndex; // 创建书脊元素 var $book $(div classbook/div); // 设置书脊背景色渐变增强立体感 $book.css({ background: linear-gradient(to right, shadeColor(book.color, -25) , book.color 15%, book.color 85%, shadeColor(book.color, -40) ) }); // 书脊上书名竖排文字 var $title $(div classbook-title/div).text(book.title); $book.append($title); // 将书籍数据存入data属性供点击时读取 $book.data(bookInfo, book); $shelfRow.append($book); } // 添加书架底板 var $board $(div classshelf-board/div); $shelfRow.append($board); $bookshelf.append($shelfRow); } // 辅助函数调整颜色亮度 function shadeColor(color, percent) { // 将十六进制颜色加深或变亮 var R parseInt(color.substring(1, 3), 16); var G parseInt(color.substring(3, 5), 16); var B parseInt(color.substring(5, 7), 16); R Math.max(0, Math.min(255, R (R * percent / 100))); G Math.max(0, Math.min(255, G (G * percent / 100))); B Math.max(0, Math.min(255, B (B * percent / 100))); return # Math.round(R).toString(16).padStart(2, 0) Math.round(G).toString(16).padStart(2, 0) Math.round(B).toString(16).padStart(2, 0); } // 点击书脊弹出模态框 $(document).on(click, .book, function () { var bookInfo $(this).data(bookInfo); if (!bookInfo) return; // 填充模态框内容 $(#modalTitle).text(bookInfo.title); $(#modalAuthor).text(作者 bookInfo.author); $(#modalIntro).text(bookInfo.intro); // 模态框头部背景色使用书籍颜色 $(#modalHeader).css(background, linear-gradient(135deg, shadeColor(bookInfo.color, 10) , bookInfo.color )); // 显示模态框 $(#modalOverlay).addClass(active); }); // 关闭模态框 // 点击关闭按钮 $(#modalClose).on(click, function () { $(#modalOverlay).removeClass(active); }); // 点击遮罩层关闭 $(#modalOverlay).on(click, function (e) { if (e.target this) { $(this).removeClass(active); } }); // 按ESC键关闭模态框 $(document).on(keydown, function (e) { if (e.keyCode 27) { $(#modalOverlay).removeClass(active); } }); }); /script /body /html