html网页代码学生信息,有更改按钮,点击更改可以更改信息,要运用到css
时间: 2024-02-02 07:03:25 浏览: 31
当然可以运用到CSS,您可以使用CSS来美化表单元素,使其更加美观和易于使用。例如:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<input type="button" value="更改" onclick="updateStudent()">
</form>
```
```css
form {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
width: 300px;
margin: 0 auto;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"], input[type="radio"] {
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
}
input[type="button"] {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 3px;
width: 100%;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #3e8e41;
}
```
在这个例子中,我们使用CSS来添加一个灰色背景,圆角边框和内边距,使表单看起来更加美观。我们还添加了一个悬停样式,以使提交按钮在鼠标悬停时更加明亮。您可以根据需要自定义样式,以使表单适合您的网站设计。