HTML+CSS培训教案（十五）

最新推荐文章于 2021-06-29 03:29:48 发布

红壶吃猬队

最新推荐文章于 2021-06-29 03:29:48 发布

阅读量233

点赞数

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/92428561

版权

HTML/CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

三十四、美化表格

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>美化表格</title>
        <style>
            tbody tr{background-color: #cccccc;}
            thead tr,tfoot tr{background: white;}
            td,th{
                padding: 5px;
                border: 2px #ccc solid;
                border-bottom-color: #666;
                border-right-color: #666;
            }
            td+td+td{text-align:right;}
        </style>
    </head>
    <body>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>product</th>
                    <th>ID</th>
                    <th>Country</th>
                    <th>Price</th>
                    <th>Color</th>
                    <th>Weight</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Computer</td>
                    <td>C184645</td>
                    <td>China</td>
                    <td>$3200.00</td>
                    <td>Black</td>
                    <td>5.20kg</td>
                </tr>
                <tr>
                    <td>TV</td>
                    <td>T965874</td>
                    <td>Germany</td>
                    <td>$299.95</td>
                    <td>White</td>
                    <td>15.20kg</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>P494783</td>
                    <td>France</td>
                    <td>$34.80</td>
                    <td>Green</td>
                    <td>0.90kg</td>
                </tr>
                <tr>
                    <td>Recorder</td>
                    <td>R349576</td>
                    <td>China</td>
                    <td>$111.99</td>
                    <td>Sliver</td>
                    <td>0.30kg</td>
                </tr>
                <tr>
                    <td>Washer</td>
                    <td>W454783</td>
                    <td>Japan</td>
                    <td>$240.80</td>
                    <td>White</td>
                    <td>30.90kg</td>
                </tr>
                <tr>
                    <td>Freezer</td>
                    <td>F783990</td>
                    <td>China</td>
                    <td>$191.68</td>
                    <td>blue</td>
                    <td>32.80kg</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Total</th>
                    <th colspan="5">6 products</th>
                </tr>
            </tfoot>
        </table>
    </body>
<html>

知识点

“<标记>+<标记>”为邻接选择器形式，标记间（紧随其后的）相邻方可触发

扩展

添加CSS样式：tr{cursor:pointer;}

答案：cursor鼠标经过时手势，值：pointer/crosshair/text/help

三十五、伪类

代码

（在三十四-扩展1基础上）添加CSS属性：tr td:hover{background:aqua;border:2px aqua solid;}

知识点

CSS伪类：达到动作条件时会触发，用以实现动态效果
样式：

(1):link：来访问时（仅对有效）

(2):visited：已访问时（仅对有效）

(3):hover：鼠标经过时

(4):active：鼠标点击时

扩展

添加CSS属性：th:hover{border-bottom-color:#EEE;border-right-color:#EEE;border-top-color:#666;border-left-color:#666;}

答案：可通过改变边框颜色来实现凹凸感

红壶吃猬队

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（十五）

三十四、美化表格代码<html> <head> <meta content="text/html;charset=utf-8"> <title>美化表格</title> <style> tbody tr{background-color: #c...
复制链接

扫一扫

专栏目录