首页请给我一段html的代码，要求使用Adobe Dreamweaver制作“电商节活动”的网站“数码产品”页面。要求整体是橙底白字，并且色彩较为活泼。

请给我一段html的代码，要求使用Adobe Dreamweaver制作“电商节活动”的网站“数码产品”页面。要求整体是橙底白字，并且色彩较为活泼。

时间: 2024-03-31 13:32:20 浏览: 131

<!DOCTYPE html> <html> <head> <title>电商节活动-数码产品</title> <style> body{ background-color: orange; color: white; font-family: Arial, sans-serif; } h1{ font-size: 36px; text-align: center; margin-top: 50px; } .product{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 50px; } .item{ background-color: white; margin: 20px; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); text-align: center; width: 300px; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .item img{ max-width: 90%; max-height: 70%; margin-bottom: 20px; } .item h2{ font-size: 24px; margin-bottom: 10px; } .item p{ font-size: 18px; margin-bottom: 20px; } .item button{ background-color: #ff6600; color: white; border: none; padding: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: all 0.3s ease-in-out; } .item button:hover{ background-color: #cc5500; } </style> </head> <body> <h1>数码产品</h1> <div class="product"> <div class="item"> <img src="img/product1.jpg" alt="产品1"> <h2>产品1</h2> <p>产品1的描述</p> <button>立即购买</button> </div> <div class="item"> <img src="img/product2.jpg" alt="产品2"> <h2>产品2</h2> <p>产品2的描述</p> <button>立即购买</button> </div> <div class="item"> <img src="img/product3.jpg" alt="产品3"> <h2>产品3</h2> <p>产品3的描述</p> <button>立即购买</button> </div> <div class="item"> <img src="img/product4.jpg" alt="产品4"> <h2>产品4</h2> <p>产品4的描述</p> <button>立即购买</button> </div> </div> </body> </html>

阅读全文