1)新建一个网页,网页的标题为学号+姓名+test01(如2130101唐建国+test01) (2)使用内嵌式引入CSS样式表。 (3)通过fieldset元素和legend元素建立如下面的网页效果图所示的外框架。框架的标题为:考生信息。 (4)建立一个表单form,表单的宽度为300px,背景色为:#9370D8,水平居中显示。 (5)在表单内添加学号、姓名、性别等input元素,具体要求如下: 为学号、姓名、性别等input元素建立汉字与对应元素之间的关联,即单击汉字也能够使对应的input元素
时间: 2024-03-27 17:40:30 浏览: 88
好的,以下是新建网页的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>2130101唐建国+test01</title>
<style type="text/css">
fieldset {
width: 80%;
margin: 0 auto;
border: 2px solid #9370D8;
padding: 10px;
}
legend {
font-size: 24px;
color: #9370D8;
font-weight: bold;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #9370D8;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #5e3ea1;
}
</style>
</head>
<body>
<fieldset>
<legend>考生信息</legend>
<form style="background-color: #9370D8; width: 300px; margin: 0 auto;">
<label for="student-id">学号:</label>
<input type="text" id="student-id" name="student-id">
<br>
<label for="student-name">姓名:</label>
<input type="text" id="student-name" name="student-name">
<br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<input type="submit" value="提交">
</form>
</fieldset>
</body>
</html>
```
解释:
1. 在head标签中,使用style标签嵌入CSS样式表的代码。
2. 使用fieldset和legend标签建立外框架,设置边框、内边距和标题样式。
3. 在form标签中添加input和select元素,使用label标签与其建立关联,设置表单样式属性。
阅读全文