使用CSS制作一张带有四个圆角的各大***铝锭价格表 -- 2019年09月06日 - 作业

首页 > 博客列表 > 使用CSS制作一张带有四个圆角的各大***铝锭价格表 -- 2019年09月06日

博主信息

博文 10

粉丝 0

访问量 6334

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用CSS制作一张带有四个圆角的各大***铝锭价格表</title>
    <link rel="stylesheet" href="/css/style.css">
    <style type="text/css">

    </style
</head>

<body>
    <!--表格开始-->
    <table>
        <!--    标题-->
        <caption>9月6日各大***铝锭价格表
            <h6>单位：元/吨</h6>
        </caption>
        <thead>
            <tr>
                <th>***</th>
                <th>最低</th>
                <th>最高</th>
                <th>均价</th>
                <th>涨跌</th>
            </tr>
        </thead>
        <!--    主体-->
        <tbody>
            <tr>
                <td>长江现货***</td>
                <td>14400</td>
                <td>14440</td>
                <td>14420</td>
                <td>+20</td>
            </tr>
            <tr>

                <td>上海现货***</td>
                <td>14400</td>
                <td>14440</td>
                <td>14420</td>
                <td>+20</td>
            </tr>

            <tr>
                <td>广东南储***</td>
                <td>14420</td>
                <td>14520</td>
                <td>14470</td>
                <td>+20</td>
            </tr>

            <tr>

                <td>南海有色现货***</td>
                <td>14710</td>
                <td>14810</td>
                <td>14760</td>
                <td>+20</td>
            </tr>

            <tr>

                <td>99.7%华通现货***</td>
                <td>14400</td>
                <td>14440</td>
                <td>14420</td>
                <td>+20</td>
            </tr>

            <tr>
                <td>上海期货***</td>
                <td>14360</td>
                <td>14425</td>
                <td>-----</td>
                <td>----</td>
            </tr>



        </tbody>
        <!--底部-->
        <tfoot>
            <tr>
                <td>中铝***</td>
                <td>华东:14430</td>
                <td>华南:14490</td>
                <td>西南:14360</td>
                <td>中原:14340</td>
            </tr>

        </tfoot>
    </table>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

            /*表格开始*/
            
            table {
                border-collapse: separate;
                border-spacing: 0;
                width: 800px;
                margin: 30px auto;
            }
            
            table caption {
                font-weight: bolder;
                font-size: 1.6rem;
                margin-bottom: 10px;
            }
            
            th,
            td {
                text-align: center;
                padding: 10px;
                font-size: 0.8rem;
                box-sizing: border-box;
            }
            
            table thead>tr:first-of-type {
                background-color: lightgreen;
                list-style-type: decimal;
            }
            
            table thead>tr:nth-last-of-type(5) {
                background-color: lightgreen;
                list-style-type: decimal;
            }
            /*给主体一个背景色，先table然后主体tody下的tr第一行，td第一轮用类选择器*/
            
            table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(5) {
                background-color: lightslategrey;
            }
            /*选择tbody主体倒数tr第3行，td第2列0.00做出背景颜色醒目显示*/
            
            table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(2) {
                background-color: lightcoral;
            }
            /*选择tbody主体倒数tr第4行，td第2列0.00做出背景颜色醒目显示*/
            
            table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(1) {
                background-color: lightcoral;
            }
            /*底部背景*/
            
            table tfoot>tr:last-of-type {
                background-color: #666666;
                color: white;
                overflow: hidden;
            }
            
            table {
                box-shadow: 2px 2px 2px #888888;
                position: relative;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            }
            
            tbody td {
                border: 1px solid #999999;
                overflow: hidden;
            }
            
            table thead th {
                border: 1px solid #999999;
            }
            
            table tfoot td {
                border: 1px solid #999999;
            }
            
            table th:first-of-type {
                border-top-left-radius: 20px;
            }
            
            table th:last-of-type {
                border-top-right-radius: 20px;
            }
            
            table tfoot td:first-of-type {
                border-bottom-left-radius: 20px;
            }
            
            table tfoot td:last-of-type {
                border-bottom-right-radius: 20px;
            }

运行实例 »

点击 "运行实例" 按钮查看在线实例

这些名字太长我根本记不住,需要时只能看手册了,对我而言基本也很少用到..

批改状态：合格

老师批语：这个案例写完, 你的css水平又上了一个层次

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

mysql

2019-09-24 22:17:27