\u4f5c\u54c1\u30da\u30fc\u30b8\uff08\u5199\u771f\u30e1\u30a4\u30f3\uff09<\/title>\n\n<style>\nbody{\n margin:0;\n font-family:sans-serif;\n background:#0f1115;\n color:#fff;\n}\n\n.container{\n max-width:900px;\n margin:20px auto;\n padding:10px;\n}\n\n.title{\n font-size:22px;\n margin-bottom:10px;\n color:#ff3d7f;\n}\n\n.gallery{\n display:grid;\n grid-template-columns:1fr;\n gap:10px;\n}\n\n.main{\n width:100%;\n aspect-ratio:4\/5;\n background:#000;\n border-radius:10px;\n overflow:hidden;\n}\n\n.main img{\n width:100%;\n height:100%;\n object-fit:cover;\n}\n\n.thumbs{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:8px;\n}\n\n.thumb{\n aspect-ratio:1\/1;\n background:#000;\n border-radius:8px;\n overflow:hidden;\n cursor:pointer;\n}\n\n.thumb img{\n width:100%;\n height:100%;\n object-fit:cover;\n}\n\n.info{\n margin-top:15px;\n padding:15px;\n background:#181b22;\n border-radius:10px;\n}\n\n.label{\n font-size:12px;\n color:#aaa;\n}\n\n.text{\n font-size:15px;\n margin-bottom:10px;\n}\n\n.price{\n font-size:20px;\n color:#ff3d7f;\n font-weight:bold;\n}\n\ninput,textarea{\n width:100%;\n margin-top:6px;\n margin-bottom:10px;\n padding:10px;\n border-radius:6px;\n border:none;\n background:#222;\n color:#fff;\n}\n\nbutton{\n width:100%;\n padding:12px;\n background:#ff3d7f;\n border:none;\n border-radius:8px;\n color:#fff;\n font-weight:bold;\n cursor:pointer;\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n<div class=\"title\" id=\"title\">\u4f5c\u54c1\u30bf\u30a4\u30c8\u30eb<\/div>\n\n<div class=\"gallery\">\n<div class=\"main\"><img id=\"mainImg\"><\/div>\n\n<div class=\"thumbs\">\n<div class=\"thumb\" onclick=\"setImg(0)\"><img id=\"t0\"><\/div>\n<div class=\"thumb\" onclick=\"setImg(1)\"><img id=\"t1\"><\/div>\n<div class=\"thumb\" onclick=\"setImg(2)\"><img id=\"t2\"><\/div>\n<\/div>\n<\/div>\n\n<div class=\"info\">\n<div class=\"label\">\u5185\u5bb9<\/div>\n<div class=\"text\" id=\"desc\">\u8aac\u660e\u6587<\/div>\n\n<div class=\"label\">\u4fa1\u683c<\/div>\n<div class=\"price\" id=\"price\">\u00a50<\/div>\n<\/div>\n\n<hr>\n\n\n<h3>\u7de8\u96c6<\/h3>\n<input id=\"inputTitle\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\">\n<textarea id=\"inputDesc\" placeholder=\"\u5185\u5bb9\"><\/textarea>\n<input id=\"inputPrice\" placeholder=\"\u4fa1\u683c\uff08\u4f8b\uff1a3000\u5186\uff09\">\n\n<input type=\"file\" id=\"img1\">\n<input type=\"file\" id=\"img2\">\n<input type=\"file\" id=\"img3\">\n\n<button onclick=\"saveHTML()\">HTML\u4fdd\u5b58<\/button>\n\n<\/div>\n\n<script>\nconst imgs=[null,null,null];\n\nfunction update(){\n title.textContent=inputTitle.value;\n desc.textContent=inputDesc.value;\n price.textContent=inputPrice.value;\n}\n\n['inputTitle','inputDesc','inputPrice'].forEach(id=>{\n document.getElementById(id).addEventListener('input',update);\n});\n\n['img1','img2','img3'].forEach((id,i)=>{\n document.getElementById(id).addEventListener('change',e=>{\n let f=e.target.files[0];\n if(!f)return;\n let r=new FileReader();\n r.onload=ev=>{\n imgs[i]=ev.target.result;\n document.getElementById('t'+i).src=imgs[i];\n if(!mainImg.src) mainImg.src=imgs[i];\n };\n r.readAsDataURL(f);\n });\n});\n\nfunction setImg(i){ if(imgs[i]) mainImg.src=imgs[i]; }\n\nfunction saveHTML(){\n let blob=new Blob([document.documentElement.outerHTML],{type:'text\/html'});\n let a=document.createElement('a');\n a.href=URL.createObjectURL(blob);\n a.download='photo_page.html';\n a.click();\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u4f5c\u54c1\u30da\u30fc\u30b8\uff08\u5199\u771f\u30e1\u30a4\u30f3\uff09 \u4f5c\u54c1\u30bf\u30a4\u30c8\u30eb \u5185\u5bb9 \u8aac\u660e\u6587 \u4fa1\u683c \u00a50 \u7de8\u96c6 HTML\u4fdd\u5b58<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2026-04-03T20:31:28","date_gmt":"2026-04-03T11:31:28","guid":{"rendered":"http:\/\/ghgzhfhh.com\/?page_id=8"},"modified":"2026-04-03T20:31:28","modified_gmt":"2026-04-03T11:31:28","slug":"8-2","status":"publish","type":"page","link":"https:\/\/ghgzhfhh.com\/?page_id=8","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\n\u4f5c\u54c1\u30da\u30fc\u30b8\uff08\u5199\u771f\u30e1\u30a4\u30f3\uff09<\/title>\n\n<style>\nbody{\n margin:0;\n font-family:sans-serif;\n background:#0f1115;\n color:#fff;\n}\n\n.container{\n max-width:900px;\n margin:20px auto;\n padding:10px;\n}\n\n.title{\n font-size:22px;\n margin-bottom:10px;\n color:#ff3d7f;\n}\n\n.gallery{\n display:grid;\n grid-template-columns:1fr;\n gap:10px;\n}\n\n.main{\n width:100%;\n aspect-ratio:4\/5;\n background:#000;\n border-radius:10px;\n overflow:hidden;\n}\n\n.main img{\n width:100%;\n height:100%;\n object-fit:cover;\n}\n\n.thumbs{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:8px;\n}\n\n.thumb{\n aspect-ratio:1\/1;\n background:#000;\n border-radius:8px;\n overflow:hidden;\n cursor:pointer;\n}\n\n.thumb img{\n width:100%;\n height:100%;\n object-fit:cover;\n}\n\n.info{\n margin-top:15px;\n padding:15px;\n background:#181b22;\n border-radius:10px;\n}\n\n.label{\n font-size:12px;\n color:#aaa;\n}\n\n.text{\n font-size:15px;\n margin-bottom:10px;\n}\n\n.price{\n font-size:20px;\n color:#ff3d7f;\n font-weight:bold;\n}\n\ninput,textarea{\n width:100%;\n margin-top:6px;\n margin-bottom:10px;\n padding:10px;\n border-radius:6px;\n border:none;\n background:#222;\n color:#fff;\n}\n\nbutton{\n width:100%;\n padding:12px;\n background:#ff3d7f;\n border:none;\n border-radius:8px;\n color:#fff;\n font-weight:bold;\n cursor:pointer;\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n<div class=\"title\" id=\"title\">\u4f5c\u54c1\u30bf\u30a4\u30c8\u30eb<\/div>\n\n<div class=\"gallery\">\n<div class=\"main\"><img id=\"mainImg\"><\/div>\n\n<div class=\"thumbs\">\n<div class=\"thumb\" onclick=\"setImg(0)\"><img id=\"t0\"><\/div>\n<div class=\"thumb\" onclick=\"setImg(1)\"><img id=\"t1\"><\/div>\n<div class=\"thumb\" onclick=\"setImg(2)\"><img id=\"t2\"><\/div>\n<\/div>\n<\/div>\n\n<div class=\"info\">\n<div class=\"label\">\u5185\u5bb9<\/div>\n<div class=\"text\" id=\"desc\">\u8aac\u660e\u6587<\/div>\n\n<div class=\"label\">\u4fa1\u683c<\/div>\n<div class=\"price\" id=\"price\">\u00a50<\/div>\n<\/div>\n\n<hr>\n\n\n<h3>\u7de8\u96c6<\/h3>\n<input id=\"inputTitle\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\">\n<textarea id=\"inputDesc\" placeholder=\"\u5185\u5bb9\"><\/textarea>\n<input id=\"inputPrice\" placeholder=\"\u4fa1\u683c\uff08\u4f8b\uff1a3000\u5186\uff09\">\n\n<input type=\"file\" id=\"img1\">\n<input type=\"file\" id=\"img2\">\n<input type=\"file\" id=\"img3\">\n\n<button onclick=\"saveHTML()\">HTML\u4fdd\u5b58<\/button>\n\n<\/div>\n\n<script>\nconst imgs=[null,null,null];\n\nfunction update(){\n title.textContent=inputTitle.value;\n desc.textContent=inputDesc.value;\n price.textContent=inputPrice.value;\n}\n\n['inputTitle','inputDesc','inputPrice'].forEach(id=>{\n document.getElementById(id).addEventListener('input',update);\n});\n\n['img1','img2','img3'].forEach((id,i)=>{\n document.getElementById(id).addEventListener('change',e=>{\n let f=e.target.files[0];\n if(!f)return;\n let r=new FileReader();\n r.onload=ev=>{\n imgs[i]=ev.target.result;\n document.getElementById('t'+i).src=imgs[i];\n if(!mainImg.src) mainImg.src=imgs[i];\n };\n r.readAsDataURL(f);\n });\n});\n\nfunction setImg(i){ if(imgs[i]) mainImg.src=imgs[i]; }\n\nfunction saveHTML(){\n let blob=new Blob([document.documentElement.outerHTML],{type:'text\/html'});\n let a=document.createElement('a');\n a.href=URL.createObjectURL(blob);\n a.download='photo_page.html';\n a.click();\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u4f5c\u54c1\u30da\u30fc\u30b8\uff08\u5199\u771f\u30e1\u30a4\u30f3\uff09 \u4f5c\u54c1\u30bf\u30a4\u30c8\u30eb \u5185\u5bb9 \u8aac\u660e\u6587 \u4fa1\u683c \u00a50 \u7de8\u96c6 HTML\u4fdd\u5b58<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/ghgzhfhh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}