首页好看的html示例代码

好看的html示例代码

时间: 2023-02-06 15:45:24 浏览: 194

好的，以下是一个美观的 HTML 示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的网站</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .header { background-color: lightblue; padding: 20px; text-align: center; } .nav { display: flex; justify-content: space-between; align-items: center; background-color: lightgrey; padding: 20px; } .nav a { text-decoration: none; color: black; font-size: 18px; } .nav a:hover { color: white; } .main { display: flex; flex-wrap: wrap; margin: 20px; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: 10px; text-align: center; } .card img { width: 100%; height: 200px; object-fit: cover; } .card h3 { margin: 10px 0; } .card p { margin: 0; padding: 10px; font-size: 14px; color: grey; } .footer { background-color: lightgrey; padding: 20px; text-align: center; font-size: 12px; color: grey; } </style> </head> <body> <div class="header"> <h1>我的网站</h1> </div> <div class="nav"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">联系</a> </div> <div class="main"> <div class="card"> <img src="https://picsum.photos/300/200" alt="图像"> <h3>标题 1</h3> <p>内容 1</p> </div> <div class="card"> <img src="https://picsum.photos/300/200" alt="图像"> <h3>标题 2</h3> <p>内容 2</p> </div> <div class="card"> <img src="https://picsum.photos/300/200" alt="图像"> <h3>标题 3

阅读全文