实验原理
通过创建CSS样式文件，理解CSS样式基本属性作用及意义。
实验目的
理解CSS基本概念及功能
理解CSS样式的设计原则
理解并掌握CSS样式的基本声明方法
理解并掌握多种CSS选择器的使用方法
理解并掌握字文本、表格、超链接等元素常用属性的使用方法
理解并掌握背景、颜色、内外边距、尺寸、圆角等CSS基本属性的使用方法实验内容
基创建maven Web项目及模块，experiment-02，项目打包类型为war
在src/main下，创建webapp目录
在webapp目录下，创建table.html文件，编写测试数据，完成一个数据表格运行显示结果
需求+设计提示
实现，通过定义CSS属性，优化以上html内容
文本容器样式
创建一个抽象的标签文本容器样式，默认标签圆角3px，左右内边距5px，字体白色，用于在具体样式背景色中突出显式
创建具有具体的意义的成功标签样式与警告标签样式，声明不同合适的背景颜色
使用“层叠”的声明方式使用文本容器表格样式
占用最大宽度；标题与内容均居，且内边距上下左右均为10px；仅显示行的下线；奇偶行背景颜色不同超链接button样式
定义按钮样式的超链接，背景暗红色，8px圆角，字体色，取消文本下划线，增加内边距，声明合适的显式类型，鼠标悬浮时改变样式
如何在渲染行时，计算inline超链接的高度？修改html代码，在合适元素上添加CSS声明的类，使页面的显示样式为
1.0版
除上述要求，添加阴影+渐变+转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: gainsboro;
}
p{
font-family: "Adobe 宋体 Std L",serif;
font-weight: bold;
}
span.label{
border-radius: 10px;
padding: 0 5px;
color: white;
font-style: italic;
z-index: 1000;
}
span.label-sucess{
background-image: linear-gradient(to bottom right,green, greenyellow);
}
span.label-warning{
background: orange;
background-image: linear-gradient(to bottom right,gold, orange);
}
table{
width: 100%;
border-collapse: collapse;
box-shadow: 5px 5px 1px gray;
table-layout: fixed;
}
table th ,table td{
text-align: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2 ;
}
table thead{
background: deepskyblue;
}
tbody tr:nth-child(even){
background: deepskyblue;
}
tbody tr:nth-child(odd){
background: lightskyblue;
}
button.btn{
padding: 10px 25px;
box-sizing: content-box;
font-size: 17px;
text-align: center;
background: rgb(217, 19, 19);
border-radius: 6px;
color: whitesmoke;
display: inline-block;
width: 50px;
height: 25px;
transition: height 400ms,width 400ms;
}
button.btn:hover{
background: red;
width: 55px;
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h3>学生信息</h3>
<p>说明：以下为2046级学生名单，共4人,
<span class="label label-sucess">成功加载3人</span>。
<span class="label label-warning">警告：列表不包含降级学生</span>。</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>班级</th>
<th>Email</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>郭立新</td>
<td>软件工程2046级1班</td>
<td>guo@example.com</td>
<td><button class="btn modify" onclick="modifyStudent(1)">修改</button> <button class="btn delete" onclick="deleteStudent(1)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>黄英</td>
<td>软件工程2046级1班</td>
<td>huang@example.com</td>
<td><button class="btn modify" onclick="modifyStudent(2)">修改</button> <button class="btn delete" onclick="deleteStudent(2)">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>吕惠玲</td>
<td>软件工程2046级2班</td>
<td>lv@example.com</td>
<td><button class="btn modify" onclick="modifyStudent(3)">修改</button> <button class="btn delete" onclick="deleteStudent(3)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
