table版css无图片圆角

最新推荐文章于 2024-04-20 18:15:46 发布

brock

最新推荐文章于 2024-04-20 18:15:46 发布

阅读量2k

点赞数

分类专栏： css样式控制文章标签： table css class html

本文链接：https://blog.csdn.net/zhdd1234/article/details/4190505

版权

css样式控制专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<html>
<herd>
    <title></title>
</herd>
<body>
<style>
td{font-size:9pt;word-break: break-all}
#corner{font-size:1px}
#tit{height:20px;color:white;}
#txt{font-size:9pt;line-height:150%;background:white;border-width:1px;border-style:solid}
.l,.r,.tl,.tr,.bl,.br{width:3px}
.t,.b,.tl,.tr,.bl,.br{height:3px}
</style>
<table cellpadding=2 cellspacing=0>
<tr><td>
<table id=corner class=black cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。Codefans.net整理<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr><tr><td>
<table id=corner class=blue cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。Codefans.net整理<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr><tr><td>
<table id=corner class=red cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr><tr><td>
<table id=corner class=green cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr><tr><td>
<table id=corner class=yellow cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr><tr><td>
<table id=corner class=pink cellpadding=0 cellspacing=0 width=400>
<tr>
<td class=tl><a id=corner class=tl></a></td>
<td class=t><a id=corner class=t></a></td>
<td class=tr><a id=corner class=tr></a></td>
</tr>
<tr>
<td class=l><a id=corner class=l></a></td>
<td>
<table id=box cellpadding=3 cellspacing=0 width=100%>
<tr id=tit><td>
<b>逍遥狼无图片智能圆角</b>
</td></tr>
<tr corner_style="display:"><td id=txt>
特点：<br>
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>
3：兼容性好。<Br>
</td></tr></table>
</td>
<td class=r><a id=corner class=r></a></td>
</tr>
<tr>
<td class=bl><a id=corner class=bl></a></td>
<td class=b><a id=corner class=b></a></td>
<td class=br><a id=corner class=br></a></td>
</tr>
</table>
</td></tr></table>
<script>
function setcorner()
{
corner_table=document.all.tags("table")
for(i=0;i<corner_table.length;i++)
{
if(corner_table[i].id=="corner")
{
mycorner=corner_table[i].getElementsByTagName("A")
  corner_style=corner_table[i].className
  if(corner_style=="black"){bo="#666666";bg="#999999"}
  if(corner_style=="blue"){bo="#0000ff";bg="#9999ff"}
  if(corner_style=="red"){bo="#FF3333";bg="#ff9999"}
  if(corner_style=="green"){bo="#009900";bg="#66cc33"}
  if(corner_style=="yellow"){bo="#cc9900";bg="#ff9966"}
  if(corner_style=="pink"){bo="#cc33cc";bg="#ff99ff"}
corner_box=corner_table[i].getElementsByTagName("TABLE")
for(ii=0;ii<corner_box.length;ii++)
{if(corner_box[ii].id=="box"){corner_box=corner_box[ii];break}}
corner_tit=corner_box.getElementsByTagName("TR")
for(ii=0;ii<corner_tit.length;ii++)
{if(corner_tit[ii].id=="tit"){corner_tit=corner_tit[ii];break}}
corner_tit.style.background=bg
corner_txt=corner_box.getElementsByTagName("TD")
for(ii=0;ii<corner_txt.length;ii++)
{if(corner_txt[ii].id=="txt"){corner_txt=corner_txt[ii];break}}
corner_txt.style.borderColor=bo
  for(ii=0;ii<mycorner.length;ii++)
  {
  if(mycorner[ii].id=="corner")
  {
  postion=mycorner[ii]
   id=mycorner[ii].className
   if(id=="tl"){w=3,h=3}
   if(id=="tr"){w=3,h=3}
   if(id=="bl"){w=3,h=3}
   if(id=="br"){w=3,h=3}
   if(id=="t"){w=corner_box.offsetWidth,h=3}
   if(id=="b"){w=corner_box.offsetWidth,h=3}
   if(id=="l"){w=3,h=corner_box.offsetHeight}
   if(id=="r"){w=3,h=corner_box.offsetHeight}
  corner_="<td bgcolor=white></td>"
  corner_bo="<td bgcolor="+bo+"></td>"
  corner_bg="<td bgcolor="+bg+"></td>"
  corner_array=[corner_,corner_bo,corner_bg]
   if(id=="t"){col=3;row=1;html_array=[1,2,2]}   //上边
   if(id=="b"){col=3;row=1;html_array=[2,2,1]}   //下边
   if(id=="l"){col=1;row=3;html_array=[1,2,2]}   //左边
   if(id=="r"){col=1;row=3;html_array=[2,2,1]}   //右边
   if(id=="tl"){col=3;row=3;html_array=[0,0,1,0,1,2,1,2,2]}  //左上角
   if(id=="tr"){col=3;row=3;html_array=[1,0,0,2,1,0,2,2,1]}  //右上角
   if(id=="bl"){col=3;row=3;html_array=[1,2,2,0,1,2,0,0,1]}  //左下角
   if(id=="br"){col=3;row=3;html_array=[2,2,1,2,1,0,1,0,0]}  //右下角
  html="<table style=/"font-size:0/" cellpadding=0 cellspacing=0 width="+w+"px height="+h+"px><tr>"
  for(iii=0;iii<html_array.length;iii++)
  {
  html+=corner_array[html_array[iii]]
  if((iii+1)%row==0&&(iii+1)!=html_array.length){html+="</tr><tr>"}
  }
  html+="</tr></table>"
  postion.innerHTML=html
  }
  }
}
}
}
setcorner()
</script>
</body>
</html>

brock

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table版css无图片圆角

td{font-size:9pt;word-break: break-all}#corner{font-size:1px}#tit{height:20px;color:white;}#txt{font-size:9pt;line-height:150%;background:white;border-width:1px;border-style:solid}.l,.r,.tl,.tr
复制链接

扫一扫