首页用html和css生成一个首页的网页代码，要求内容齐全，可以根据屏幕尺寸调整大小

用html和css生成一个首页的网页代码，要求内容齐全，可以根据屏幕尺寸调整大小

时间: 2023-05-29 08:01:26 浏览: 42

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } #header { background-color: #333; color: #fff; padding: 20px; text-align: center; } #nav { background-color: #ccc; padding: 10px; text-align: center; } #nav a { color: #333; text-decoration: none; padding: 10px; } #nav a:hover { background-color: #333; color: #fff; } #main { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .box { width: 300px; height: 300px; margin: 20px; background-color: #eee; border: 1px solid #ccc; text-align: center; padding: 20px; } #footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } @media(max-width: 768px) { .box { width: 100%; } } </style> </head> <body> <header id="header"> <h1>欢迎来到我的网站</h1> </header> <nav id="nav"> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <div id="main"> <div class="box"> <h2>产品1</h2> <p>这是产品1的介绍</p> </div> <div class="box"> <h2>产品2</h2> <p>这是产品2的介绍</p> </div> <div class="box"> <h2>产品3</h2> <p>这是产品3的介绍</p> </div> </div> <footer id="footer"> 版权所有 © 2021 </footer> </body> </html>