IT技术问答
联系方式
您现在的位置:主页 > IT技术问答 > 内容

css 模拟表格斜线

发布时间:2018-09-12 编辑:admin
一般情况下,border都是同样的颜色,很少会注意到这个问题,但偏偏反向思考,或者是偶然的机会才会发现这个现象。下面是一个小例子,从中可以看出原理来。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .div{ border-left:#023060 10px solid; border-right:#366AA1 10px solid; border-top:#0F2E4E 10px solid; border-bottom:#548CC7 10px solid; width:120px; margin:0px auto; text-align:center; font-size:12px; line-height:22px; color:#bbdcff; background-color:#194D83; } </style> <title>运用css模拟表格</title> </head> <body> <div >测试内容</div> </body> </html> 提示:您可以先修改部分代码再运行原理就在这里:复制代码代码如下:border-left:#023060 10px solid; /*相邻的边框粗细大于1,并且颜色不相同*/ border-right:#366AA1 10px solid; border-top:#0F2E4E 10px solid; border-bottom:#548CC7 10px solid; 这样满足这样的条件,就会看到相接处有斜线产生。 对这个现象进一步拓展,利用绝对定位,便可制作出表格对角线。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用div+css模拟表格对角线</title> <style type="text/css"> *{padding:0;margin:0;} caption{font-size:14px;font-weight:bold;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /*模拟对角线*/ .out{ border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/ width:0px;/*让容器宽度为0*/ height:0px;/*让容器高度为0*/ border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/ position:relative;/*让里面的两个子容器绝对定位*/ } b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;} .t1{background:#BDBABD;} </style> </head> <body> <table> <caption>用div+css模拟表格对角线</caption> <tr> <th > <div > <b>类别</b> <em>姓名</em> </div> </th> <th>年级</th> <th>班级</th> <th>成绩</th> <th>班级均分</th> </tr> <tr> <td >张三</td> <td>三</td> <td>2</td> <td>62</td> <td>61</td> </tr> <tr> <td >李四</td> <td>三</td> <td>1</td> <td>48</td> <td>67</td> </tr> <tr> <td >王五</td> <td>三</td> <td>5</td> <td>79</td> <td>63</td> </tr> <tr> <td >赵六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr> </table> </body> </html> 提示:您可以先修改部分代码再运行

本文源自: 揭秘环亚娱乐骗局_揭秘环亚娱乐黑钱_环亚娱乐安全_网易新闻

上一篇:网页设计中文本输入框的一些参数说明

下一篇:Web网页对话框可拖动、关闭(自动)文字循环变化

Copyright © 2005-2016 http://www.chickagoan.com 揭秘环亚娱乐骗局_揭秘环亚娱乐黑钱_环亚娱乐安全_网易新闻版权所有 揭秘环亚娱乐骗局_揭秘环亚娱乐黑钱_环亚娱乐安全_网易新闻