来一发HTML和CSS做网页实例教程:摹拟表格对角线

只看该作者 · 发表于 2015-1-15 23:11:04

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

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

x

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介：HTML和CSS做网页实例教程:摹拟表格对角线.
本贴代码完成的是“摹拟表格对角线”。
仅供老手参考进修，接待人人提出更多的完成办法。
<!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>摹拟表格对角线</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>
</p>
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

只看该作者 · 发表于 2015-1-17 20:19:40

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

只看该作者 · 发表于 2015-1-22 08:29:04

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-31 05:22:41

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-6 17:53:23

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-18 00:45:16

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

只看该作者 · 发表于 2015-3-6 00:48:12

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-12 18:09:41

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-20 01:26:30

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

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

[DIV+CSS] 来一发HTML和CSS做网页实例教程:摹拟表格对角线

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

相关帖子

浏览过的版块