大家听过table表格?这玩意太常见了!在编程里常会看到它。那你想没想过在table顶部加条斜线?是不是感觉挺牛的,挺新鲜的?其实很简单,我马上教你。
第一招超简单,找你们公司的UI小姐姐,让她给你画个图当背景,然后丢到表格里头去,让它填满整个表格就行。太简单了!
还有个更简单的方法喔~当大家看到这种斜线的效果时,立马就能想起CSS3的Transform属性!其实它就能帮我们做到斜线效果了,而且还很简单。不过别忘了要考虑浏览器兼容性的~因为IE还有人在用!要是你们公司只支持Chrome浏览器的话,那这个方法简直再合适不过!
下面这招很轻松,照着刚才那样写上去就行咯。但这个小技巧有个小问题哟—这个斜线是用两种颜色的边框画出来给表头的,两侧颜色不能一样。你想做宣传、优惠啥的表格,这个办法挺好使的。可要是你想要斜线那两头颜色一致的话,建议还是换别的方法。别忘了考虑周全
.biaoTou { border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/ border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/ }
另一个简单的方法,就是用css3的new tag canvas当画板,直接在上面画一条斜线超级容易。具体怎么弄我就不多说了,但得注意一下,有些浏览器可能会有兼容性问题。比如说要是只打算支持Chrome浏览器,那就随心所欲。只是可惜了,现实中公司总是得担心那个破烂IE(真希望能只搞定Google浏览器的项目啊)。
搞定最终办法有点儿费劲!但利用js的话就方便多了,尽管看起来有点复杂,执行效果可是杠杠的!用它能弄出多种多样灵活的形式!对于懂点儿编程的人来说,这个选择不赖哟~
好,这五招教程就讲到这儿。希望对你们的学习有点儿用,顺便也请多支持我们!如果你们有什么牛人的方式或者其他问题,都可以在评论区说说看!别忘了点个赞分享给你们的朋友们今天我给大家分享了怎么给table表格加上斜线表头的五个小技巧。从直接找UI妹子设计背景图片开始,到用css3属性transform做出斜线,再到用不同颜色的border画出斜线表头,还能用canvas画出斜线,最后用js搞出更牛逼的造型。希望这些法子能让你们些许活跃脑筋。如果你们还有别的好玩的或者疑难杂症,记得在评论区跟我们聊聊!别忘了点赞和分享给你们的小伙伴们咯!
斜线表头
header
|
数学 | 英语 | C语言 | ||||
张三 | 55 | 66 | 77 | ||||
李四 | 99 | 68 | 71 | ||||
王五 | 33 | 44 | 55 |
评论0