首页使用dive+table+css布局静态页面，呈现自己的个人信息，要求有表头，表要有边框，表在页面水平居中和垂直居中的html代码

使用dive+table+css布局静态页面，呈现自己的个人信息，要求有表头，表要有边框，表在页面水平居中和垂直居中的html代码

时间: 2024-10-11 19:17:05 浏览: 42

你可以使用HTML、CSS以及可能的Dive.js（一个轻量级的JavaScript库，用于处理网页布局）来创建一个简单的个人信息静态页面。以下是一个示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; font-family: Arial, sans-serif; } table { border-collapse: collapse; width: 90%; text-align: left; border: 1px solid #ccc; } th, td { padding: 15px; border-bottom: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } </style> </head> <body> <div id="layout" data-dive="#container"> <table id="infoTable"> <thead> <tr> <th>个人信息</th> </tr> </thead> <tbody> <tr> <td>姓名：</td> <td><span id="name">Your Name</span></td> </tr> <tr> <td>年龄：</td> <td><span id="age">Your Age</span></td> </tr> <tr> <td>职业：</td> <td><span id="job">Your Job</span></td> </tr>  </tbody> </table> </div> <script src="https://unpkg.com/@divejs/core@latest/dist/dive.min.js"></script> <script> // 当Dive.js解析到#layout元素时，自动调整容器大小 dive('#layout', { target: '#container' }); </script> </body> </html> ``` 在这个例子中，我们首先设置了整个页面的布局，使其水平和垂直居中。然后创建了一个表格，设置了边框和内联样式。`<th>`元素作为表头，而`<td>`元素则用于显示个人信息的具体内容。记得将`<span>`元素内的文本替换为你实际的个人信息，并确保已经引入了Dive.js库。如果不需要Dive.js的功能，也可以省略相关的脚本部分。

阅读全文