首页用web写一个个人页面

用web写一个个人页面

时间: 2024-06-08 11:06:57 浏览: 144

好的，下面是一个简单的示例： ``` <!DOCTYPE html> <html> <head> <title>个人主页</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #f1f1f1; margin: 0; padding: 0; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } h1 { margin: 0; font-size: 36px; } main { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } p { line-height: 1.5; margin-bottom: 20px; } ul { list-style-type: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } li span { font-weight: bold; display: inline-block; width: 100px; margin-right: 10px; } </style> </head> <body> <header> <h1>个人主页</h1> </header> <main> <h2>个人信息</h2> <p>大家好，我是XXX，目前就读于XXX大学XXX专业。</p> <h2>个人技能</h2> <ul> <li><span>编程语言：</span>Java、Python、JavaScript</li> <li><span>前端框架：</span>Vue.js、React</li> <li><span>后端框架：</span>Spring、Django</li> <li><span>数据库：</span>MySQL、MongoDB</li> </ul> <h2>项目经验</h2> <ul> <li><span>项目名称：</span>XXX管理系统</li> <li><span>项目描述：</span>该系统是一个XXX管理系统，主要实现了XXX功能。</li> <li><span>使用技术：</span>Spring、MySQL、Vue.js</li> </ul> </main> </body> </html> ``` 你可以将上面的代码复制到一个文本编辑器中，保存为一个名为index.html的文件，然后在浏览器中打开这个文件，就可以看到一个简单的个人主页了。你可以根据自己的需要修改里面的内容和样式。

阅读全文