下面是一个简约的HTML个人主页的示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人主页</title> <style> body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f8f8f8; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; font-size: 28px; font-weight: bold; letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .container { max-width: 800px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .card { background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 5px; flex-basis: calc(33.33% - 20px); margin-bottom: 20px; overflow: hidden; } .card img { width: 100%; height: 200px; object-fit: cover; } .card h3 { margin: 10px; font-size: 20px; font-weight: bold; color: #333; } .card p { margin: 10px; font-size: 16px; color: #666; line-height: 1.5; } .card a { display: block; margin: 10px; font-size: 16px; font-weight: bold; color: #333; text-decoration: none; } .card a:hover { color: #000; } </style> </head> <body> <header> <h1>个人主页</h1> </header> <div class="container"> <div class="card"> <img src="https://picsum.photos/600/400" alt="Image"> <h3>个人介绍</h3> <p>这里是个人介绍的内容,可以简单描述自己的背景、职业、兴趣爱好等等。</p> <a href="#">了解更多</a> </div> <div class="card"> <img src="https://picsum.photos/600/400" alt="Image"> <h3>工作经历</h3> <p>这里可以展示自己的工作经历,包括公司名称、职位、时间、工作内容等等。</p> <a href="#">了解更多</a> </div> <div class="card"> <img src="https://picsum.photos/600/400" alt="Image"> <h3>项目经验</h3> <p>这里可以展示自己的项目经验,包括项目名称、时间、职责、技术栈、成果等等。</p> <a href="#">了解更多</a> </div> <div class="card"> <img src="https://picsum.photos/600/400" alt="Image"> <h3>联系方式</h3> <p>这里可以展示自己的联系方式,包括邮箱、电话、微信、GitHub等等。</p> <a href="#">了解更多</a> </div> <div class="card"> <img src="https://picsum.photos/600/400" alt="Image"> <h3>教育背景</h3> <p>这里可以展示自己的教育背景,包括学校名称、专业、时间、学位等等。</p> <a href="#">了解更多</a> </div> </div> </body> </html>
这个主页使用了简单的CSS布局和样式,包含一个顶部的标题和四个卡片式的内容区块。卡片式的布局使用了flexbox布局,并使用了简单的阴影效果来增加深度感。每个卡片包括一个标题、一张图片、一个简短的描述和一个了解更多的链接。图片使用了响应式设计,可以根据浏览器窗口大小自适应。在这个例子中,我们使用了一个名为picsum的服务来生成随机图片,但在实际中,你可以将图片替换为你自己的图片。
你可以根据自己的需要修改这个模板,并添加更多的内容区块或页面。这个示例代码是一个简单的起点,可以让你快速创建一个简约的个人主页。
评论