AI生成式探究学习教学辅助设计单-4.2 学生成绩信息表制作.docx

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