【前端技术】HTML与CSS案例分析：探索网页设计的无限可能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人资料编辑器</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group input[type="submit"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
background-color: #5cb85c;
color: white;
cursor: pointer;
}
.form-group input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<input type="submit" value="更新个人资料">
</div>
</form>
</body>
</html>这个代码示例展示了如何使用HTML和内联CSS创建一个简单的用户资料编辑表单。表单包含用户名、电子邮件和密码字段，并且每个字段都有适当的标签和样式。同时，它演示了如何使用类选择器来为不同类型的输入框设置统一的样式，以及如何使用伪类来为按钮设置鼠标悬停效果。这个示例教学了如何结合HTML和CSS来创建一个有专业感的网页。
评论已关闭