个人中心页面html+css代码
时间: 2023-12-24 22:22:51 浏览: 25
抱歉,作为AI语言模型,我不具备生成个人中心页面的能力。但我可以提供一些常用的HTML和CSS代码,帮助您开始创建您自己的个人中心页面:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人中心</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>个人中心</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">个人信息</a></li>
<li><a href="#">订单记录</a></li>
<li><a href="#">设置</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>个人信息</h2>
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">保存</button>
</form>
</section>
<section>
<h2>订单记录</h2>
<table>
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>手机</td>
<td>1</td>
<td>5999</td>
</tr>
<tr>
<td>002</td>
<td>电脑</td>
<td>1</td>
<td>8999</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
CSS代码:
```css
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
ul {
list-style: none;
}
header {
background-color: #f2f2f2;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 24px;
}
nav ul {
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #d9d9d9;
}
main {
padding: 20px;
}
section {
margin-bottom: 30px;
}
section h2 {
margin-bottom: 10px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"],
form input[type="email"],
form input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
width: 100%;
}
form button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button[type="submit"]:hover {
background-color: #3e8e41;
}
table {
border-collapse: collapse;
width: 100%;
}
table th,
table td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
table thead {
background-color: #f2f2f2;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
请注意,这只是一个简单的示例。您可以根据自己的需求进行修改和扩展。