|
好的，以下是一个简单的HTML和CSS代码，用于创建一个包含人物介绍和五个副业的主页： ```html <!DOCTYPE html> <html> <head> <title>人物介绍</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } h1 { margin: 0; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 30px; } .card { background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin: 20px; max-width: 300px; padding: 20px; text-align: center; } .card img { border-radius: 50%; margin-bottom: 10px; max-width: 100%; } .card h2 { font-size: 24px; margin: 10px 0; } .card p { font-size: 18px; margin: 0 0 10px; } .card ul { list-style-type: none; padding: 0; } .card li { font-size: 16px; margin-bottom: 5px; } </style> </head> <body> <header> <h1>人物介绍</h1> </header> <div class="container"> <div class="card"> <img src="https://via.placeholder.com/150" alt="Person"> <h2>John Doe</h2> <p>一位伟大的人物</p> <ul> <li>副业1: 音乐制作</li> <li>副业2: 摄影</li> <li>副业3: 写作</li> <li>副业4: 绘画</li> <li>副业5: 旅行</li> </ul> </div> </div> </body> </html> ``` 解释一下代码： - `<!DOCTYPE html>` 声明文档类型为 HTML5。 - `<html>` 元素是 HTML 文档的根元素。 - `<head>` 元素包含文档的元（meta）数据，例如标题、样式和脚本等。 - `<title>` 元素定义文档的标题，显示在浏览器的标题栏或标签页上。 - `<style>` 元素包含 CSS 样式规则。 - `body` 元素包含文档的内容，例如文本、图像和视频等。 - `header` 元素通常包含网站的标题和导航栏等。 - `h1` 元素定义一个大标题。 - `.container` 类定义一个包含卡片的容器。 - `.card` 类定义一个人物介绍卡片。 - `img` 元素显示人物的照片。 - `ul` 元素包含人物的五个副业。 - `li` 元素包含每个副业的详细信息。 请注意，上述代码中使用的图像是占位符图像，您可以将其替换为实际的人物照片。 (责任编辑：) |