冷月葬花魂 发表于 2015-1-15 23:20:22

CSS教程之复杂有用的网页表格殊效

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
1、黑色虚线表格

虚线
表格

<styletype="text/css">
<!--
.tab1{
border-top-width:thin;
border-right-width:thin;
border-bottom-width:thin;
border-left-width:thin;
border-top-style:dotted;
border-right-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-top-color:#00CC66;
border-right-color:#0099CC;
border-bottom-color:#FF0000;
border-left-color:#6699FF;
}
-->
</style>
<tablewidth="200"border="0"cellpadding="2"cellspacing="2"class="tab1">
<tr>
<td><divalign="center">虚</div></td>
<td><divalign="center">线</div></td>
</tr>
<tr>
<td><divalign="center">表</div></td>
<td><divalign="center">格</div></td>
</tr>
</table>

2、鼠标指向单位格变色
onmou搜索引擎优化ut="this.style.backgroundColor=’’"鼠标分开效果onmou搜索引擎优化ver="this.style.backgroundColor=’#FFcccc’"鼠标放上往的效果,
能够修正#FFcccc的值来改动色彩

<tablewidth="200"border="1"cellspacing="0"cellpadding="0">
<tr>
<tdonmou搜索引擎优化ut="this.style.backgroundColor=’’"onmou搜索引擎优化ver="this.style.backgroundColor=’#FFcccc’"></td>
</tr>
<tr>
<tdonmou搜索引擎优化ut="this.style.backgroundColor=’’"onmou搜索引擎优化ver="this.style.backgroundColor=’#FFccaa’"></td>
</tr>
</table>
3、平面表格
平面表格

<tableborder="1"bordercolorlight="#ffffff"bordercolordark="#ffffff"width="200"cellpadding="0"cellspacing="0">
<tralign="center">
<tdwidth="86"
bordercolorlight="#000000"bordercolordark="#eeeeee"bgcolor="#B7B7B7">平面</td>
<tdwidth="108"
bordercolorlight="#000000"bordercolordark="#eeeeee"bgcolor="#B7B7B7">表格</td>
</tr>
</table>

4、表格嵌套

1、使用表格的间距来做嵌套

<tablewidth="200"border="1"cellspacing="4"cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
次要是用到间距cellspacing="4"

2、充实使用依据表格对齐的体例

  这里次要是将第一个表格居左,第二个表格居右,第三个表格居中。如许当你随便调剂内里三个表格巨细的时分,他们的间距将坚持稳定,十分便利。

<tablewidth="200"border="1"cellpadding="0"cellspacing="0"bordercolor="#FF0000">
<tr>
<td><tablewidth="60"border="1"align="left"cellpadding="0"cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<tablewidth="60"border="1"align="right"cellpadding="0"cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<tablewidth="80"border="1"align="center"cellpadding="0"cellspacing="0">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
5、半通明表格

半通明
表格

  这里次要是用到了CSS滤镜filter:Alpha(Opacity=20)。

<styletype="text/css">
<!--
.bg{
background-color:#66CCFF;
filter:Alpha(Opacity=20);
}
-->
<tablewidth="200"border="0"cellpadding="0"cellspacing="0"class="bg">
<tr>
<td><divalign="center">半</div></td>
<td><divalign="center">通明</div></td>
</tr>
<tr>
<td><divalign="center">表</div></td>
<td><divalign="center">格</div></td>
</tr>
</table>

6、暗影表格


111222333

  这里次要用到了CSS滤镜style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"

<divstyle="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10">
<tablewidth=300border=1bgcolor=#EAEAEA>
<tr><tdwidth="93">111</td><tdwidth="91">222</td><tdwidth="94">333</td></tr>
</table>
</div>

  附:拔出CSS款式的办法(我们这里用半通明表格来做申明)
  第一种办法是界说一个CSS称号。
  好比
<styletype="text/css">
<!--
.bg{
background-color:#66CCFF;
filter:Alpha(Opacity=20);
}
-->
  元素必要用到CSS的时分,好比表格,界说一个CLASS就能够了,如
<tablewidth="200"border="0"cellpadding="0"cellspacing="0"class="bg">

  第二种是间接在你必要用到CSS元素的中央拔出相干代码,style="&quo</p>12下一页


如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

冷月葬花魂 发表于 2015-1-16 00:22:56

CSS教程之复杂有用的网页表格殊效

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
t;如:
<tablewidth="201"border="1"style="filter:Alpha(Opacity=20);background-color:#66CCFF;"></p>上一页12


不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。

乐观 发表于 2015-1-18 06:33:49

可以使用CSS检查工具进行设计。

莫相离 发表于 2015-1-25 23:17:55

经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.

金色的骷髅 发表于 2015-2-4 13:38:53

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

活着的死人 发表于 2015-2-10 00:50:53

布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。

只想知道 发表于 2015-3-10 00:25:58

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

谁可相欹 发表于 2015-3-23 19:42:24

技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
页: [1]
查看完整版本: CSS教程之复杂有用的网页表格殊效