简单实用的网页表格特效 (1)
在我们制作主页的过程中，用到表格的地方非常多，灵活运用表格技巧可以为我们的网页增色不少，这里我就详细介绍几中特效表格的制作方法。 <P></P><P> <STRONG>一、彩色虚线表格</STRONG></P><P>＜style type="text/css"＞<BR>＜!--<BR>.tab1 {<BR>border-top-width: thin;<BR>border-right-width: thin;<BR>border-bottom-width: thin;<BR>border-left-width: thin;<BR>border-top-style: dotted;<BR>border-right-style: dotted;<BR>border-bottom-style: dotted;<BR>border-left-style: dotted;<BR>border-top-color: #00CC66;<BR>border-right-color: #0099CC;<BR>border-bottom-color: #FF0000;<BR>border-left-color: #6699FF;<BR>}<BR>--＞<BR>＜/style＞<BR>＜table width="200" border="0" cellpadding="2" cellspacing="2" <FONT color=#ff0000>class="tab1"</FONT>＞<BR>＜tr＞ <BR>＜td＞＜div align="center"＞虚＜/div＞＜/td＞<BR>＜td＞＜div align="center"＞线＜/div＞＜/td＞<BR>＜/tr＞<BR>＜tr＞ <BR>＜td＞＜div align="center"＞表＜/div＞＜/td＞<BR>＜td＞＜div align="center"＞格＜/div＞＜/td＞<BR>＜/tr＞<BR>＜/table＞</P><P class=unnamed1> <STRONG>二、鼠标指向单元格变色</STRONG><BR><BR>onmouseout="this.style.backgroundColor=''" 鼠标离开效果onmouseover="this.style.backgroundColor='#FFcccc'"鼠标放上去的效果，<BR>可以修改#FFcccc的值来改变颜色<BR><BR>＜table width="200" border="1" cellspacing="0" cellpadding="0"＞<BR>＜tr＞ <BR>＜td <FONT color=#ff0000>onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"</FONT>＞ ＜/td＞<BR>＜/tr＞<BR>＜tr＞ <BR>＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"＞ ＜/td＞<BR>＜/tr＞<BR>＜/table＞<BR><STYLE type=text/css>在我们制作主页的过程中，用到表格的地方非常多，灵活运用表格技巧可以为我们的网页增色不少，这里我就详细介绍几中特效表格的制作方法。 <P></P><P> <STRONG>一、彩色虚线表格</STRONG></P><P>＜style type="text/css"＞<BR>＜!--<BR>.tab1 {<BR>border-top-width: thin;<BR>border-right-width: thin;<BR>border-bottom-width: thin;<BR>border-left-width: thin;<BR>border-top-style: dotted;<BR>border-right-style: dotted;<BR>border-bottom-style: dotted;<BR>border-left-style: dotted;<BR>border-top-color: #00CC66;<BR>border-right-color: #0099CC;<BR>border-bottom-color: #FF0000;<BR>border-left-color: #6699FF;<BR>}<BR>--＞<BR>＜/style＞<BR>＜table width="200" border="0" cellpadding="2" cellspacing="2" <FONT color=#ff0000>class="tab1"</FONT>＞<BR>＜tr＞ <BR>＜td＞＜div align="center"＞虚＜/div＞＜/td＞<BR>＜td＞＜div align="center"＞线＜/div＞＜/td＞<BR>＜/tr＞<BR>＜tr＞ <BR>＜td＞＜div align="center"＞表＜/div＞＜/td＞<BR>＜td＞＜div align="center"＞格＜/div＞＜/td＞<BR>＜/tr＞<BR>＜/table＞</P><P class=unnamed1> <STRONG>二、鼠标指向单元格变色</STRONG><BR><BR>onmouseout="this.style.backgroundColor=''" 鼠标离开效果onmouseover="this.style.backgroundColor='#FFcccc'"鼠标放上去的效果，<BR>可以修改#FFcccc的值来改变颜色<BR><BR>＜table width="200" border="1" cellspacing="0" cellpadding="0"＞<BR>＜tr＞ <BR>＜td <FONT color=#ff0000>onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"</FONT>＞ ＜/td＞<BR>＜/tr＞<BR>＜tr＞ <BR>＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"＞ ＜/td＞<BR>＜/tr＞<BR>＜/table＞<BR><STYLE type=text/css>
<p></p></p><p align='center'><b><a href='/news/news001/dreamweaver/200510/20051016192821.html'></a><a href='/news/news001/dreamweaver/200510/20051016192821.html'></a> <font color='red'></font> </b></p>
页:
[1]