Web实验二 CSS基本样式实验

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

实验原理

通过创建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>