登录  /  注册
博主信息
博文 31
粉丝 1
评论 5
访问量 27863
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用CSS制作一张带有四个圆角的表格_2019/9/6作业
零度 的博客
原创
524人浏览过

图片演示

1.jpg

代码演示

实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用css制作表格并带圆角跟背景半透明实例</title>
    <style>
        /* 表格整体 */
        
        table {
            border: 1px solid red;
            border-spacing: 0;
            box-shadow: 1px 1px 1px red;
            /*这里看群里说了必须要去掉collapse属性要用separate*/
            border-collapse: separate;
            width: 800px;
            margin: 20px auto;
            border-radius: 12px;
            position: relative;
        }
        /* 表格主体 */
        
        th,
        td {
            border: 1px solid red;
            text-align: center;
            padding: 10px;
            margin: 0;
        }
        /* 表格标题 */
        
        table caption {
            font-size: 1.3rem;
            font-weight: bolder;
            margin-bottom: 15px;
        }
        /****************设置表头颜色 ****************/
        /* 表格标题th行的颜色 */
        
        table thead>tr:first-of-type {
            background-color: lightgreen;
        }
        /* 上午的颜色 */
        
        table tbody>tr:first-of-type>td:first-of-type {
            background-color: wheat;
        }
        /* 下午的颜色 */
        
        table tbody>tr:nth-last-of-type(3)>td:first-of-type {
            background-color: lightcyan;
        }
        /************设置表格圆角************/
        /* 设置表格的左上角圆角处理 */
        
        table tr:first-child th:first-child {
            border-top-left-radius: 12px;
        }
        /* 设置表格的右上角圆角处理 */
        
        table tr:first-child th:last-child {
            border-top-right-radius: 12px;
        }
        /* 设置表格的左下角圆角处理 */
        
        tfoot tr:last-child td:first-child {
            border-bottom-left-radius: 12px;
        }
        /* 设置表格的右下角圆角处理 */
        
        tfoot tr:last-child td:last-child {
            border-bottom-right-radius: 12px;
        }
        /* 给表格加个半透明背景图 */
        
        table:before {
            content: '';
            width: 800px;
            height: 88%;
            position: absolute;
            left: 0;
            top: 45px;
            background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3087233032,899150152&fm=26&gp=0.jpg");
            background-size: cover;
            opacity: 0.4;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <table>
        <caption>用css制作表格并带圆角跟背景半透明实例</caption>
        <thead>

            <tr>
                <th>星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>
            <tr>

                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>
            <tr>

                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>
            <tr>

                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>
            <tr>

                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>历史</td>
                <td>化学</td>

            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="5">好好学习天天向上</td>
            </tr>
        </tfoot>


    </table>
</body>

</html>

运行实例 »

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

总结

运用到了之前学过的伪类子元素选择器,过程还是会写出毛病来,又去复习了一遍,目前记住了,基础还是得学好啊~~~


批改状态:合格

老师批语:编程最终拼的是编程思想与基础知识
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学