AI生成式探究学习教学辅助设计单
使用AI名称：DeepSeek班级：学生姓名：
子任务名称
提示词
AI的回应
对AI回应的评价
我的收获
第四模块网站表格和表单页面制作
4.2学生成绩信息表制作
使用HTML5和CSS语言，编写一个学生成绩信息的网页。要求使用表格和样式制作，给出案例代码。
以下是一个使用HTML5和CSS编写的学生成绩信息网页示例代码。该网页使用表格展示学生成绩信息，并通过CSS样式美化表格和页面布局。
```html
!DOCTYPEhtml
htmllang=zh-CN
head
metacharset=UTF-8
metaname=viewportcontent=width=device-width,initial-scale=1.0
title学生成绩信息/title
style
/*全局样式*/
body{
font-family:Arial,sans-serif;
background-color:#f4f4f9;
margin:0;
padding:20px;
color:#333;
}
h1{
text-align:center;
color:#4CAF50;
}
/*表格样式*/
table{
width:80%;
margin:20pxauto;
border-collapse:collapse;
box-shadow:04px8pxrgba(0,0,0,0.1);
background-color:#fff;
}
th,td{
padding:12px;
text-align:center;
border:1pxsolid#ddd;
}
th{
background-color:#4CAF50;
color:white;
font-weight:bold;
}
tr:nth-child(even){
background-color:#f9f9f9;
}
tr:hover{
background-color:#f1f1f1;
}
/*响应式表格*/
@media(max-width:600px){
table{
width:100%;
}
th,td{
padding:8px;
}
}
/style
/head
body
h1学生成绩信息/h1
table
thead
tr
th学号/th
th姓名/th
th语文/th
th数学/th
th英语/th
th总分/th
/tr
/thead
tbody
tr
td1001/td
td张三/td
td85/td
td90/td
td88/td
td263/td
/tr
tr
td1002/td
td李四/td
td78/td
td92/td
td85/td