- 资源介绍
- 更新记录
资源演示
一组非常酷炫的CSS3表格设计样式源码,推荐用来做设计参考。
CSS参考代码
/* Table 1 Style */ table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collapse:separate; } .table1 thead th{ padding:15px; color:#fff; text-shadow:1px 1px 1px #568F23; border:1px solid #93CE37; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px; } .table1 thead th:empty{ background:transparent; border:none; } .table1 tbody th{ color:#fff; text-shadow:1px 1px 1px #568F23; background-color:#9DD929; border:1px solid #93CE37; border-right:3px solid #9ED929; padding:0px 10px; background:-webkit-gradient( linear, left bottom, right top, color-stop(0.02, rgb(158,217,41)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(123,192,67)) ); background: -moz-linear-gradient( left bottom, rgb(158,217,41) 2%, rgb(139,198,66) 51%, rgb(123,192,67) 87% ); -moz-border-radius:5px 0px 0px 5px; -webkit-border-top-left-radius:5px; -webkit-border-bottom-left-radius:5px; border-top-left-radius:5px; border-bottom-left-radius:5px; } .table1 tfoot td{ color: #9CD009; font-size:32px; text-align:center; padding:10px 0px; text-shadow:1px 1px 1px #444; } .table1 tfoot th{ color:#666; } .table1 tbody td{ padding:10px; text-align:center; background-color:#DEF3CA; border: 2px solid #E7EFE0; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; color:#666; text-shadow:1px 1px 1px #fff; } .table1 tbody span.check::before{ content : url(../images/check0.png) } /* Table 2 Style */ table.table2{ font-family: Georgia, serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: -1px; line-height: 1.2em; border-collapse:collapse; text-align:center; } .table2 thead th, .table2 tfoot td{ padding:20px 10px 40px 10px; color:#fff; font-size: 26px; background-color:#222; font-weight:normal; border-right:1px dotted #666; border-top:3px solid #666; -moz-box-shadow:0px -1px 4px #000; -webkit-box-shadow:0px -1px 4px #000; box-shadow:0px -1px 4px #000; text-shadow:1px 1px 1px #000; } .table2 tfoot th{ padding:10px; font-size:18px; text-transform:uppercase; color:#888; } .table2 tfoot td{ font-size:36px; color:#EF870E; border-top:none; border-bottom:3px solid #666; -moz-box-shadow:0px 1px 4px #000; -webkit-box-shadow:0px 1px 4px #000; box-shadow:0px 1px 4px #000; } .table2 thead th:empty{ background:transparent; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .table2 thead :nth-last-child(1){ border-right:none; } .table2 thead :first-child, .table2 tbody :nth-last-child(1){ border:none; } .table2 tbody th{ text-align:right; padding:10px; color:#333; text-shadow:1px 1px 1px #ccc; background-color:#f9f9f9; } .table2 tbody td{ padding:10px; background-color:#f0f0f0; border-right:1px dotted #999; text-shadow:-1px 1px 1px #fff; text-transform:uppercase; color:#333; } .table2 tbody span.check::before{ content : url(../images/check1.png) } /* Table 3 Style */ table.table3{ font-family:Arial; font-size: 18px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: -1px; line-height: 1.7em; text-align:center; border-collapse:collapse; } .table3 thead th{ padding:6px 10px; text-transform:uppercase; color:#444; font-weight:bold; text-shadow:1px 1px 1px #fff; border-bottom:5px solid #444; } .table3 thead th:empty{ background:transparent; border:none; } .table3 thead :nth-child(2), .table3 tfoot :nth-child(2){ background-color: #7FD2FF; } .table3 tfoot :nth-child(2){ -moz-border-radius:0px 0px 0px 5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; } .table3 thead :nth-child(2){ -moz-border-radius:5px 0px 0px 0px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; } .table3 thead :nth-child(3), .table3 tfoot :nth-child(3){ background-color: #45A8DF; } .table3 thead :nth-child(4), .table3 tfoot :nth-child(4){ background-color: #2388BF; } .table3 thead :nth-child(5), .table3 tfoot :nth-child(5){ background-color: #096A9F; } .table3 thead :nth-child(5){ -moz-border-radius:0px 5px 0px 0px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; } .table3 tfoot :nth-child(5){ -moz-border-radius:0px 0px 5px 0px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; } .table3 tfoot td{ font-size:38px; font-weight:bold; padding:15px 0px; text-shadow:1px 1px 1px #fff; } .table3 tbody td{ padding:10px; } .table3 tbody tr:nth-child(4) td{ font-size:26px; font-weight:bold; } .table3 tbody td:nth-child(even){ background-color:#444; color:#444; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(189,189,189)), color-stop(0.7, rgb(224,224,224)) ); background:-moz-linear-gradient( center bottom, rgb(189,189,189) 39%, rgb(224,224,224) 70% ); text-shadow:1px 1px 1px #fff; } .table3 tbody td:nth-child(odd){ background-color:#555; color:#f0f0f0; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(85,85,85)), color-stop(0.7, rgb(105,105,105)) ); background:-moz-linear-gradient( center bottom, rgb(85,85,85) 39%, rgb(105,105,105) 70% ); text-shadow:1px 1px 1px #000; } .table3 tbody td:nth-last-child(1){ border-right:1px solid #222; } .table3 tbody th{ color:#696969; text-align:right; padding:0px 10px; border-right:1px solid #aaa; } .table3 tbody span.check::before{ content : url(../images/check2.png) }
猜你喜欢
-
本站CSS美化教程:Bootstrap/PHP文章栏目输出页改5栏栅格布局
2019-07-20 -
纯CSS3鼠标悬停到图片后显示图片文字动画效果transform特效共10种
2019-05-26 -
炫酷可爱的CSS3+JS实现的进度条Loading加载动画特效图标下载(共五个)
2019-05-25 -
CSS3鼠标悬停显示文字动画特效共10种
2019-05-26 -
CSS3实现鼠标悬停后显示消息提示框效果源码下载共九种
2019-05-26 -
css3鼠标悬停帮助图标显示图片文字提示框源码
2019-05-24 -
CSS实现的网页常用过渡效果焦点图动画效果源码共14种
2019-05-26 -
CSS3实现的会员登录表单源码下载共10种
2019-05-26 -
CSS3手机端点击图标后的动画效果共12种
2019-05-26
-
绚丽的CSS3自定义表单登录样式源码下载
2019-05-25 -
纯CSS3实现进度条加载Loading动画效果代码共八种
2019-05-26 -
CSS3价格表格Table样式源码下载
2019-05-26 -
CSS3图片悬停动态效果源码Transform共6种
2019-05-26 -
人形时钟网页代码hone hone clock
2018-06-10 -
非常酷炫的CSS3表格设计样式源码
2019-05-23 -
六种CSS3常用的按钮Button样式源码下载
2019-05-26 -
QQ登录蓝色动态背景JS实现
2020-02-23 -
CSS3实现的超级炫酷表单CheckBox复选框效果美化代码共九种
2019-05-26
猜你在找
常见问题FAQ
- 购买后由于自身原因导致无法使用可以退款吗?
- 由于源码的可复制性,原则上购买后是不提供退款服务的,购买前请务必联系客服或技术支持并提供必要信息以确认您是否能够使用该源码。另外可以点击右侧获取本地试用版来自行验证代码可行性。购买之前一定要考虑清楚。
- 源码可以拿来商用吗?
- 源码的更新周期是多久?
- 购买后可以开发票吗?
- 2019-05-23Hi,初次和大家见面了,请多关照!