数据表格——伪类的样式

最新推荐文章于 2024-10-13 23:51:54 发布
最新推荐文章于 2024-10-13 23:51:54 发布
阅读量259 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyz15731998001/article/details/121458690
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         table{
             text-align: center;
         }
          th{
             background-color: rgb(183, 183, 226);
             
             

          }
          td{
              height: 20px;
              width: 120px;
          }
          td,th{
             
              padding: 0 1em 0;
          }
          .lei{
              background-color: rgb(209, 211, 224);
              background-image: url(img/arrow.gif);
              background-repeat: no-repeat;
              
              background-size: 15px;
              background-position:20px 10px;
              
             
          }
         .lei td{
            border-top: solid 3px rgb(146, 143, 143);
            text-align: start;
            padding-left: 40px;
            
         }
         .a1{
             background-image: url(img/dots.gif);
             background-repeat: no-repeat;
             
             background-size: 10px;
             background-position:20px -15px;
         }
         .a2{
             
             background-image:url(img/dots2.gif);
             background-repeat: no-repeat;
             background-size: 10px;
              background-position:20px -15px;
         }
       .a1 td{
           padding-left: 30px;
       }
       .a2 td{
           padding-left: 30px;
       }
       .a1:hover{
           background-color: rgba(250, 205, 59, 0.5);
       }
       .a2:hover{
           background-color: rgba(250, 205, 59, 0.5);
       }
    </style>
</head>
<body>
    <table>

    <tr>
        <th>排名</th>
        <th>校名</th>
        <th>总得分</th>
        <th>人才培养总得分</th>
        <th>研究生培养得分</th>
        <th>本科生培养得分</th>
        <th>科学研究总得分</th>
        <th>自然科学研得分</th>
        <th>社会科学研得分</th>
        <th>所属省份</th>
        <th>分省排名</th>
        <th>学校类型</th>
    </tr>
    <tr class="lei">
        <td colspan="12">一类</td>
    </tr>
   
    <tr class="a1">
        <td>1</td>
        <td>清华大学 </td>
        <td>296.77</td>
        <td>128.92</td>
        <td>93.83</td>
        <td>35.09</td>
        <td>167.85</td>
        <td>148.47</td>
        <td>19.38</td>
        <td width="16">京 </td>
        <td width="12">1 </td>
        <td>理工 </td>
    </tr>
    <tr class="a2">
        <td>2</td>
        <td>北京大学 </td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>综合 </td>
    </tr>
    <tr class="lei">
        <td colspan="12">一类</td>
    </tr>
    <tr class="a1">
        <td>3</td>
        <td>浙江大学 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
   
    <tr class="a1">
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>沪 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr class="a1">
        <td>5</td>
        <td>南京大学</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>苏</td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr class="a1">
        <td>6</td>
        <td>复旦大学 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>沪</td>
        <td>2</td>
        <td>综合 </td>
    </tr>
    <tr class="a1">
        <td>7</td>
        <td>华中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂 </td>
        <td>1</td>
        <td>理工 </td>
    </tr>
    <tr class="a1">
        <td>8</td>
        <td>武汉大学 </td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂 </td>
        <td>2</td>
        <td>综合</td>
    </tr>
    <tr class="a1">
        <td>9</td>
        <td>吉林大学 </td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉 </td>
        <td>1</td>
        <td>综合</td>
    </tr>
    <tr class="a2">
        <td>10</td>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陕</td>
        <td>1</td>
        <td>综合</td>
    </tr>
</table>
</body>
</html>

（表格数据不代表真正排名，仅作参考）

奥拓蛋/
关注
利用CSS3的伪类画表格
RunningSnail
02-22 1480
css3 伪类分为：动作伪类、目标伪类、语言伪类、结构伪类、UI元素状态伪类、否定伪类选择器。通过这些伪类选择器，可以实现很多原来需要js才能实现的功能。现在我们来用这些伪类选择器来制作表格。 表格1： 表格2 div.demo{ width:600px; margin:30px auto; font-size:14px; font-family: "微
Vue假数据应用——表格的添加、删除、搜索
weixin_44683100的博客
06-14 1449
HTML <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.js" ></script> <link rel="stylesheet" href="../lib/bootstrap.min.css" /> <!--引入bootstrap框架来写样式--> </head> <body>
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
热门推荐
简单快乐
11-03 3万+
css table tr
使用CSS样式对表格进行美化并对伪类的使用进行解析
starjuly的专栏
07-09 1091
通过使用html的表格展示新用户注册的页面，并使用CSS样式来改变其外观，使其更好看；伪类的使用：link是定义初始时的颜色，visited是定义点击后的颜色， hover是定义选中时的状态并出现下划线，text-decoration：定义下划线是否存在。
table和tr设置样式
......
02-15 3万+
table和tr设置样式，和平常的style和class有些许差别。 1、table 样式设置方法有: (1) (2) 这样的设置的cellspacing，宽度是(1)方法中的2倍宽 (3)css: .table{width:400px;height:300px;background-color:green;border:0;cellspacing:1px;} 这样的设置的cellspac
Python 数据处理 —— pandas 表格样式
dxs18459111694的博客
11-30 1230
讲到这里，Python的数据处理部分已经写的差不多了。学完了前面的部分，差不多已经能够熟练的处理各种各样的数据了。在本系列的最后，我们将介绍如何展示数据，当然，并不是数据的可视化，而是像Excel表格一样，设置数据的颜色、字体、大小等样式在pandas中，通过属性，可以获取一个Styler对象，该对象提供了方法，让我们很方便的格式化和展示DataFrame数据样式的设置是通过CSS来完成，所以，所有的代码需要在中运行：逐元素是将函数应用于每个元素上的函数接受一个标量值，返回一个属性-值对的。
数据结构——第一章 绪论
sunyanxian的博客
11-28 407
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
shsjssnn的博客
11-02 1496
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
el-table表格中数据为空时，表格项显示 ——
weixin_56733569的博客
03-20 4213
当el-table表格项为空的时候，显示"——"符号
数据挖掘课程学习——序列模式发现相关内容调研
qq_53098203的博客
09-23 534
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 本次实验完成**“序列模式发现”**的相关内容调研，主要内容包括：什么是序列模式发现；应用在
jQuery自动滚动表格高亮显示代码
06-24
通过使用CSS的:nth-child()伪类选择器，我们可以为奇数行和偶数行分别设置不同的样式。在jQuery中，我们可能还会用到`each()`函数配合索引来决定哪些行应用哪种样式。 至于JSON初始化表格，这意味着数据是从JSON...
HTML表格标记教程(6):暗边框色属性BORDERCOLORDARK
12-10
本教程将深入讲解一个特殊的表格属性——`BORDERCOLORDARK`，该属性允许我们自定义表格的暗边框色，即右下角和单元格左上角的边框颜色。 **暗边框色属性BORDERCOLORDARK** `BORDERCOLORDARK`属性是HTML4中的一个...
使用CSS Flexbox创建简洁时间轴
最新发布
weixin_40539956的博客
10-13 630
在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。 首先,我们需要创建基本的HTML结构: CSS样式 1. 创建时间线 使用伪元素创建时间线: 2. 事件对齐 使用Flexbox对齐事件: 3. 垂直间距 使用Flexbox控制事件间的垂直间距: 4. 响应式设计 使用媒体查询实现响应式设计: 完整CSS代码 以下是完整的CSS代码: 通过这些CSS样式,我们创建了一个简洁、响应式的时间轴
CSS @规则(At-rules)系列详解___@charset规则使用方法
逆境清醒的博客
10-11 1063
CSS @规则(At-rules)系列详解___@charset规则使用方法
使用scss生成旋转圆圈
qq_41893686的博客
10-13 284
【代码】使用scss生成旋转圆圈。
CSS响应式布局
2401_82561004的博客
10-10 834
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
2024年CSS @规则(At-rules)新增数量超过过去十年的总和，CSS @规则(At-rules)详解系列目录
逆境清醒的博客
10-11 1282
2024年CSS @规则(At-rules)新增数量超过过去十年的总和，CSS @规则(At-rules)详解系列目录
前端_002_CSS扫盲
qq_42936379的博客
10-10 1199
text-align 水平对齐和vertical-align 垂直对齐。选择器{ 属性名:属性值;class选择器 .[class_name]属性选择器 [arrtribute_name]也可以在标签里通过style属性进行样式设置。id选择器 #[id_name]四种链接状态分别是：，拿a标签举例。height和width。元素选择器 [tag]2.文件后缀.css。
CSS中Float(浮动)详解
ning的博客
10-10 621
float属性是CSS布局中的一个重要工具，它允许元素浮动并使文本环绕。通过理解float的工作原理和如何使用它，你可以创建复杂的布局，如图像画廊、侧边栏等。然而，使用float时也要注意清除浮动，以避免布局问题。随着CSS的发展，新的布局技术如Flexbox和Grid也在不断涌现，但float仍然是一个强大的布局选项。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS Float（浮动） | 菜鸟教程float - CSS：层叠样式表 | MDN。
HTC数据表格设计与样式
- `.GridBorder`类定义了表格的边框样式，包括背景色、边框宽度和样式，以及文本对齐方式和单词断行规则。 3. **JavaScript事件处理**: 这段代码包含了一些JavaScript，主要是为了兼容旧版IE浏览器，添加了`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值