首页用html设计一个简洁的个人主页

用html设计一个简洁的个人主页

时间: 2023-10-18 17:03:25 浏览: 104

个人主页的设计目标是展示个人信息和技能，同时保持简洁和易读性。以下是一个基本的html设计示例： ``` <!DOCTYPE html> <html> <head> <title>个人主页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h1 { text-align: center; } .container { max-width: 600px; margin: 0 auto; } .intro { margin-bottom: 20px; text-align: center; } .skills { margin-bottom: 20px; } .skills ul { list-style-type: none; padding: 0; margin: 0; } .skills li { margin-bottom: 10px; } .contact { text-align: center; } .contact a { color: #000; text-decoration: none; margin: 0 10px; } </style> </head> <body> <div class="container"> <h1>个人主页</h1> <div class="intro"> <p>欢迎来到我的个人主页！我是一名自由职业者，专注于网页设计和前端开发。</p> </div> <div class="skills"> <h2>技能</h2> <ul> <li>HTML/CSS</li> <li>JavaScript</li> <li>响应式设计</li> </ul> </div> <div class="contact"> <h2>联系方式</h2> <p>电子邮件：example@example.com</p> <p>电话号码：123-456-7890</p> <p>GitHub：<a href="https://github.com/example">example</a></p> </div> </div> </body> </html> ``` 这个设计示例包括一个标题 "个人主页"，一个介绍部分，一个技能列表和一个联系方式部分。整个页面使用居中对齐，并使用简单的样式来提高可读性和美观度。

阅读全文