来讲讲：用div+css摹拟表格对角线

只看该作者 · 发表于 2015-1-16 00:05:11

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
起首声明：
这只是切磋一种CSS摹拟表格对角线的用法，实践在事情中大概以为如许做有点借题发挥，这不是本主题会商的重点。假如对此深觉得然的伴侣，请一笑过之。。。
偶然在拔出文档时，要用到表格对角线，罕见的作法是用图片的体例来处置，另有就是用vml来画对角线，能不克不及用html+css体例来完成呢？谜底是一定的，上面我们来摸拟一个表格对角线。
道理：
用边框线来摸拟斜线，我们晓得，假如将一个DIV的边框线设置得充足宽并界说了分歧的色彩时，其相邻的两条边框线交壤处就是斜线。晓得了这个道理，我们就能够用border-left和border-top来摹拟出斜线的效果。
我们先创立一个布局：
<divclass="out">
<b>种别</b>
<em>姓名</em>
</div>
我们用<divclass="out">作为对角线的容器，我们来设置斜线款式，关头代码以下：
.out{
border-top:40px#D6D3D6solid;/*上边框宽度即是表格第一行行高*/
width:0px;/*让容器宽度为0*/
height:0px;/*让容器高度为0*/
border-left:80px#BDBABDsolid;/*右边框宽度即是表格第一行第一格宽度*/
position:relative;/*让内里的两个子容器相对定位*/
}
<b>和<em>两个标签来设置两个分类，分离将它们设置为块状布局display:block;扫除其默许的字体款式font-style:normal；因其父容器设置了绝对定位，以是设置其为相对定位，如许能够将它偏移到你想指定的地位了。
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;}
如许一个斜线对角线就摹拟出来了。晓得了道理，你能够酿成良多风趣的器材出来，祝你好运！
这类对角线摹拟法也出缺点：

宽高度必需是已知的
宽高的长度不克不及差得太年夜，你能够尝尝将宽度拉得比高度长好几倍，看看效果。（给你们留点功课实习实习）
另有就是斜线条不克不及设置色彩。

另：以上代码只测试了ie6和ff3，别的扫瞄器未做测试，请伴侣们测试一下。
上面是完全的代码：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用div+css摹拟表格对角线</title><styletype="text/css">*{padding:0;margin:0;}caption{font-size:14px;font-weight:bold;}table{border-collapse:collapse;border:1px#525152solid;width:50%;margin:0auto;margin-top:100px;}th,td{border:1px#525152solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}th{background:#D6D3D6;}/*摹拟对角线*/.out{border-top:40px#D6D3D6solid;/*上边框宽度即是表格第一行行高*/width:0px;/*让容器宽度为0*/height:0px;/*让容器高度为0*/border-left:80px#BDBABDsolid;/*右边框宽度即是表格第一行第一格宽度*/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><thstyle="width:80px;"><divclass="out"><b>种别</b><em>姓名</em></div></th><th>年级</th><th>班级</th><th>成就</th><th>班级均分</th></tr><tr><tdclass="t1">张三</td><td>三</td><td>2</td><td>62</td><td>61</td></tr><tr><tdclass="t1">李四</td><td>三</td><td>1</td><td>48</td><td>67</td></tr><tr><tdclass="t1">王五</td><td>三</td><td>5</td><td>79</td><td>63</td></tr><tr><tdclass="t1">赵六</td><td>三</td><td>4</td><td>89</td><td>66</td></tr></table></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

只看该作者 · 发表于 2015-1-18 05:05:55

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

只看该作者 · 发表于 2015-2-1 16:20:00

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-7 09:54:11

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-21 21:58:28

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-6 22:48:45

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-13 23:07:35

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-20 22:37:00

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：用div+css摹拟表格对角线

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块