分享4个漂亮的css表格样式
0
![4款漂亮的表格css样式代码.jpg 4款漂亮的表格css样式代码.jpg](/uploadfile/loc/old/202204/jy25mq0qcc0.jpg)
话不多说,直接上四个比较经典的漂亮css表格样式代码:
①第一个,浅灰色表和css样式,非常经典
![浅灰色css表格样式.jpg 浅灰色css表格样式.jpg](/uploadfile/loc/old/202204/ryq41affihk.jpg)
此样式仅用配色实现,无需调用图片,代码是:
Info Header 1 | Info Header 2 | Info Header 3 |
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
②第二个配色蓝黄搭配
![蓝黄色css表格样式.jpg 蓝黄色css表格样式.jpg](/uploadfile/loc/old/202204/or22142chem.jpg)
这个需要用到下面2张图片
![蓝黄色表格样式配图2.jpg 蓝黄色表格样式配图2.jpg](/uploadfile/loc/old/202204/1rknsua1ykg.jpg)
先保存这两张图片然后使用下面代码
Info Header 1 | Info Header 2 | Info Header 3 |
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
③淡蓝色的css表格样式,可以配合js来实现自动换行
![浅蓝色css表格样式.jpg 浅蓝色css表格样式.jpg](/uploadfile/loc/old/202204/5ultkakj2hb.jpg)
此样式对应代码(已包含自动换行的js代码)
Info Header 1 | Info Header 2 | Info Header 3 |
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Text 3A | Text 3B | Text 3C |
Text 4A | Text 4B | Text 4C |
Text 5A | Text 5B | Text 5C |
④依旧是淡蓝色风格,同时配合了js来实现表格行鼠标悬停高亮的功能
![淡蓝色css表格样式代码鼠悬停高亮.jpg 淡蓝色css表格样式代码鼠悬停高亮.jpg](/uploadfile/loc/old/202204/tntdh4dyezg.jpg)
此样式对应的css和javascript代码均已包含其中
Info Header 1 | Info Header 2 | Info Header 3 |
Item 1A | Item 1B | Item 1C |
Item 2A | Item 2B | Item 2C |
Item 3A | Item 3B | Item 3C |
Item 4A | Item 4B | Item 4C |
Item 5A | Item 5B | Item 5C |
这都是一些经典的css表格样式,虽然现在的审美风格略有变化,但是在这些基础代码的框架下,对配色略作改动就可以实现想要的效果。
赞(5)
打赏
微信 支付宝 QQ 扫码打赏
css中表格有多余的边框
css表格样式
css
先来看一下效果:CSS :checked伪类选择器思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时,会绑定同步点击 "for" 属性值为 "checkbox" 的 "id...
话不多说,直接上四个比较经典的漂亮css表格样式代码:①第一个,浅灰色表和css样式,非常经典此样式仅用配色实现,无需调用图片,代码是:table.gridtable { font-family: verdana,arial,sans-serif; font-...
使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法table tr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/table td:nth-child(even){color:#C00;}/*偶数...
在input输入框中使用place内写入文字的方法可以对此输入框做一些简单的说明,但是其颜色如果和输入框文本颜色那样深就会显得有点突兀,可以使用css样式来修改placeolder的文本颜色,使用方法如下:input::-webkit-input-placeh...
有时候,处于营销或者其他原因,我们希望网页上的某些元素或者某个div更显眼一些,从而让访客可以关注到这些内容。而由于需要照顾网页美观协调,又不能把它改成太过显眼的颜色,比如大红色。这时候就可以使用css3的呼吸灯效果,为内容所在div做一个闪烁的边框来实现。c...
把网站前台的UI设计好之后,前台去浏览,有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且,不同浏览器的滚动条还有很多差别。这里,我们可以通过css修改浏览器scrollbar滚动条样式的方法,让页面更加美观舒适。纯css修改浏览器scro...
当鼠标移动到当前div的时候改变内部子div的样式或其他div样式,借助简单的js代码来实现。可以实现不同部位菜单导航的联动或前台不同部位的互动效果。先来看看效果:js实现鼠标移入div后改变内部其他子div样式的全部html代码: js...
css3可以通过代码渲染的方式实现网页背景的高斯模糊效果,告别更换背景时候的ps批图。分享三种css3实现网页背景图片高斯模糊效果的方法。css3实现网页背景模糊方法一(正常模糊): html, body { ...
您可以通过以下步骤查看群晖硬盘是否处于休眠状态:登录群晖 DSM 管理界面。点击左侧导航栏上的“控制面板”。在控制面板页面中,点击“硬盘”选项。在硬盘页面中,您可以看到列出的硬盘信息。如果硬盘处于休眠状态,则会在“状态”列中显示“休眠”。如果您想了解更多硬盘的...
今天遇到一个问题,症状如下:访问某个网站的时候发现网站地址打不开,并且提示DNS_PROBE_FINISHED_NXDOMAIN 无法显示此网页或无法访问此网站感觉应该是dns解析出了问题或者遇到了dns污染。随手把解决方法记下来:键盘win+R组合输入cmd...