写一个显示用户信息的网页
时间: 2023-12-15 12:04:20 浏览: 70
以下是一个简单的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中,以便在页面加载时自动显示用户信息。
阅读全文
相关推荐














