Web实验二 CSS基本样式实验

一时失言乱红尘 2024-04-17 11:46 75阅读 0赞

> #### 实验原理 ####
> 
> 通过创建CSS样式文件，理解CSS样式基本属性作用及意义。
> 
> #### 实验目的 ####
> 
> 理解CSS基本概念及功能  
> 理解CSS样式的设计原则  
> 理解并掌握CSS样式的基本声明方法  
> 理解并掌握多种CSS选择器的使用方法  
> 理解并掌握字文本、表格、超链接等元素常用属性的使用方法  
> 理解并掌握背景、颜色、内外边距、尺寸、圆角等CSS基本属性的使用方法
> 
> #### 实验内容 ####
> 
> 基创建maven Web项目及模块，experiment-02，项目打包类型为war  
> 在src/main下，创建webapp目录  
> 在webapp目录下，创建table.html文件，编写测试数据，完成一个数据表格
> 
> 运行显示结果![ec8bb52b3a244f568297be5fd9ac79fb.png][]
> 
> #### 需求+设计提示 ####
> 
> 实现，通过定义CSS属性，优化以上html内容
> 
> 文本容器样式  
> 创建一个抽象的标签文本容器样式，默认标签圆角3px，左右内边距5px，字体白色，用于在具体样式背景色中突出显式  
> 创建具有具体的意义的成功标签样式与警告标签样式，声明不同合适的背景颜色  
> 使用“层叠”的声明方式使用文本容器
> 
> 表格样式  
> 占用最大宽度；标题与内容均居，且内边距上下左右均为10px；仅显示行的下线；奇偶行背景颜色不同
> 
> 超链接button样式  
> 定义按钮样式的超链接，背景暗红色，8px圆角，字体色，取消文本下划线，增加内边距，声明合适的显式类型，鼠标悬浮时改变样式  
> 如何在渲染行时，计算inline超链接的高度？
> 
> 修改html代码，在合适元素上添加CSS声明的类，使页面的显示样式为![286a04f3dda344d7bed2f1cc1f7ac136.png][]

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: auto;
            }
            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>

![7203c3d74df74dd5bc3de375f2a133c4.png][]

[ec8bb52b3a244f568297be5fd9ac79fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/7482dfeae4644a058d3d1c102c9cb1a4.png
[286a04f3dda344d7bed2f1cc1f7ac136.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/084226b3cdf34e5e9bf1d894a9563b3f.png
[7203c3d74df74dd5bc3de375f2a133c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/725cba1e24d349fbaee38998b9d3f8ee.png