仓酷云

标题: CSS教程之复杂有用的网页表格殊效 [打印本页]

作者: 冷月葬花魂 时间: 2015-1-15 23:20
标题: 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
标题: 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
可以使用CSS检查工具进行设计。

作者: 莫相离 时间: 2015-1-25 23:17
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 金色的骷髅 时间: 2015-2-4 13:38
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 活着的死人 时间: 2015-2-10 00:50
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 只想知道 时间: 2015-3-10 00:25
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 谁可相欹 时间: 2015-3-23 19:42
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

欢迎光临仓酷云 (http://www.ckuyun.com/)