首页写一个显示用户信息的网页

写一个显示用户信息的网页

时间: 2023-12-15 21:04:20 浏览: 69

以下是一个简单的HTML/CSS代码示例，用于显示用户信息： ```html <!DOCTYPE html> <html> <head> <title>User Information</title> <style> /* 样式表 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { margin: auto; max-width: 600px; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } h1 { text-align: center; color: #333; } ul { list-style: none; padding: 0; } li { margin-bottom: 10px; } label { display: inline-block; width: 120px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>User Information</h1> <ul> <li> <label>Username:</label> <span>JohnDoe123</span> </li> <li> <label>Name:</label> <span>John Doe</span> </li> <li> <label>Email:</label> <span>johndoe123@example.com</span> </li> <li> <label>Age:</label> <span>30</span> </li> <li> <label>Location:</label> <span>New York</span> </li> <li> <label>Interests:</label> <span>Reading, hiking, cooking</span> </li> </ul> </div> </body> </html> ``` 该代码将创建一个容器（类名为“container”），包含一个标题（`<h1>`标签）和一个无序列表（`<ul>`标签）。每个列表项包括一个标签（`<label>`标签）和一个值（`<span>`标签）。标签用于描述值的含义，值包含实际的用户信息。你可以使用JavaScript或服务器端脚本语言（如PHP）来从数据库或其他数据源中检索用户信息，然后将其动态地嵌入HTML中，以便在页面加载时自动显示用户信息。

阅读全文