人人做人人澡人人爽欧美,国产主播一区二区,久久久精品五月天,羞羞视频在线观看免费

當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

HTML 表格特效整理

HTML 表格特效整理

更新時間:2020-12-07 文章作者:未知 信息來源:網絡 閱讀次數:


兩種細線表格做法

<table width="100%" border="1" bordercolor="#000000"> <tr bordercolor="#FFFFFF"> <td>表格邊線為1,線色為黑,行線色為白。</td> </tr></table><p><table width="100%" border="0" cellspacing="1" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF">表格邊線為0,間距為1,背景色為黑,行背景色為白。</td> </tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]立體表格

<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef><tr bgcolor=#cccccc><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td></tr><tr bgcolor=#cccccc><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td></tr></table><center>表格邊線為1,間隔為0,左上為#333333,右下為#efefef,行背景色為#cccccc
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]表格的邊框不斷在閃

<table border="0" width="280" id="myexample" style="border:1px solid red"> <tr> <td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</td> </tr> </table> <script language="JavaScript1.2"><!-- function flashit(){ if (!document.all) return if (myexample.style.borderColor=="blue") myexample.style.borderColor="red" else myexample.style.borderColor="blue" } setInterval("flashit()", 500) //--> </script>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]不用嵌套制作同一行放兩個表格<table border=1 align=left><tr><td>-1</td></tr></table><table border=1 align="right"><tr><td>1</td></tr></table> <br><br><br><table border=1 align=left><tr><td>-1</td></tr></table><table border=1 align="center"><tr><td>1</td></tr></table><br><br><br><table border="1" align="left" width="50%" height="100px"><tr><td>hhh</td></tr></table><table border="1" align="right" width="50%"><tr><td>nnn</td></tr></table> <br><br><br><br><br><br><table border=1 align=left><tr><td>-1</td></tr></table><table border=1><td>1</td></tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]另類圓角表格制作

原圖:<table cellpadding=0 cellspacing=0 border=0 width=282 align=center> <tr height=1> <td rowspan=4 width=1></td> <td rowspan=3 width=1></td> <td rowspan=2 width=1></td> <td width=2></td> <td bgcolor=#43B5C9></td> <td width=2></td> <td rowspan=2 width=1></td> <td rowspan=3 width=1></td> <td rowspan=4 width=1></td> </tr> <tr height=1> <td bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr> <tr height=1> <td bgcolor=#43B5C9></td> <td colspan=3 bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr> <tr height=2> <td bgcolor=#43B5C9></td> <td colspan=5 bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr></table><p>放大<table cellpadding=0 cellspacing=0 border=1 width=282 align=center> <tr height=10> <td rowspan=4 width=10></td> <td rowspan=3 width=10></td> <td rowspan=2 width=10></td> <td width=20></td> <td bgcolor=#43B5C9></td> <td width=20></td> <td rowspan=2 width=10></td> <td rowspan=3 width=10></td> <td rowspan=4 width=10></td> </tr> <tr height=10> <td bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr> <tr height=10> <td bgcolor=#43B5C9></td> <td colspan=3 bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr> <tr height=20> <td bgcolor=#43B5C9></td> <td colspan=5 bgcolor=#43B5C9></td> <td bgcolor=#43B5C9></td> </tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]虛線邊框表格

<style type="text/css">.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT: #000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}</style><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="tb"><center>www.cnbruce.com</td> </tr></table><p>虛線直線1<hr size=1 style="border:1px dotted #001403;">虛線直線2<p size=1 style="border:1px dotted #001403;">
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]分類型表格

<fieldset><legend>item</legend>content</fieldset>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]變色的單元格1,通過a:hover做.

<style>a:link,a:visited,a:hover{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}a:hover{background:#0099ff;color:black}td{background:#3366cc;color:white;padding:0px}</style><TABLE width=100% cellspacing=1 bgcolor=black ><TR><TD><a href="#">CNBruce<TD><a href="#">.com<TR><TD><a href="#">CNBruce<TD><a href="#">.com
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]變色的單元格2,已經做成了CSS,注意還有透明效果。

<style type="text/css">.aa{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}.bb{ background-color:#3366cc; color:#ffffff}</style><table width="100%"> <tr> <td onmouseover="this.className='aa'" onmouseout="this.className='bb'" class="bb"><center><b>cnbruce</td> </tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]變色的單元格3,通過mouse事件做.有點微軟的味道。

<table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#efefef" bgcolor="#efefef"> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">cnbruce</div></td> </tr> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">cnbruce</td> </tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]透明表格

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0><tr><td><center>cnbruce</td></tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]表格邊框顯示外陰影

<table align=center width=200 height=100 bgcolor=#f3f3f3 style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)"><tr><td><center>www.cnbruce.com</td></tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]限制表格的大小。
style="table-layout:fixed;word-break:break-all"
無論大圖還是文字,一律限制。

<table align=center width=200 height=100 bgcolor=#f3f3f3 style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)" style="table-layout:fixed;word-break:break-all" ><tr><td><center><img src="/article/UploadPic/200671913479341.jpg"></td></tr><tr><td> cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce</td></tr></table>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]根據單元格內容加亮

<table border="1" cellspacing="0" width="400" cellpadding="0" id="table1"> <tr> <td width="80">12</td> <td width="80">34</td> <td width="80">56</td> <td width="80">78</td> <td width="80">90</td> </tr> <tr> <td width="80">abc</td> <td width="80">def</td> <td width="80">ghj</td> <td width="80">lop</td> <td width="80">dry</td> </tr> <tr> <td width="80">!@#</td> <td width="80">_(*</td> <td width="80">#$%</td> <td width="80">^$#</td> <td width="80">WWW</td> </tr> </table><SCRIPT>var ids;var idstext;function hightlight_td(){var text=txt.value;TDs=document.all.table1.all.tags("TD")//使用iframe時://TDs=iframe的name.document.all.table1.all.tags("TD")if (text!=""){for (var i = 0; i < TDs.length; i++){obj=TDs[i];idstext=obj.innerText;idnum=idstext.indexOf(text);if (idnum!=-1){obj.style.background="red";}else{obj.style.background="#FFFFFF";}}}else{alert("沒有輸入");}}</SCRIPT><p align="center"><input type="text" name="txt" value=""><input type="button" value="請輸入要查的字符串." onClick="hightlight_td();"></p>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]VML做圓腳表格運行代碼框
<html xmlns:v><style>v\:*{behavior:url(#default#VML)}</style><body> <v:RoundRect style="position:relative;width:150;height:240px"> <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/> <v:TextBox style="font-size:10.2pt;">VML</v:TextBox> </v:RoundRect> </body></html>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]運行代碼框
<html xmlns:v><style>v\:*{behavior:url(#default#VML)}</style><body> <v:RoundRect style="position:relative;width:150;height:240px"><v:path textpathok="true" /> <v:textpath on="true" string="cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce" /> <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/> <v:TextBox style="font-size:10.2pt;">VML</v:TextBox> </v:RoundRect> </body></html>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]運行代碼框
<html xmlns:v><style>v\:*{behavior:url(#default#VML)}</style><body> <v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5> <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/> <v:TextBox style="font-size:10.2pt;">VML</v:TextBox> </v:RoundRect> </body></html>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行] 最后,還請關注另篇《表格邊框魔鬼教程》(出處:藍色理想)

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
主站蜘蛛池模板: 嘉定区| 介休市| 淮南市| 西昌市| 都匀市| 逊克县| 界首市| 廉江市| 永定县| 讷河市| 大同县| 体育| 慈利县| 云梦县| 双鸭山市| 洛川县| 彭州市| 霍山县| 鄂州市| 湟中县| 浪卡子县| 东平县| 独山县| 五台县| 明水县| 太原市| 深州市| 胶州市| 东明县| 临泉县| 固安县| 石柱| 怀柔区| 连云港市| 永顺县| 寿宁县| 侯马市| 原平市| 弥勒县| 叙永县| 司法|