0顶

无图片圆角制作方法

稿源：互联网 2022-04-02 21:42:19 点击： 1252 撤稿纠错

无图片的圆角表格，通过js+css来实现这个效果。

以下讨论的是和圆角相关的无图片圆角制作方法教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 无图片的圆角效果 站长特效网</title>
<style type="text/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,.bl,.br{width:3px}
.t,.b,.tl,.tr,.bl,.br{height:3px}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<table cellpadding="2" cellspacing="0">
  <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种样式(black/blue/red/green/yellow/pink)，只需要在需要圆角的地方用"class=样式"定义即可；<br>
                2、重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<br>
                3、兼容性好。</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 language="javascript">
function setcorner()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
corner_table=document.all.tags("table")
 for(i=0;i<corner_table.length;i++)
 {
 if(corner_table[i].id=="corner")
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很 好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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
  }
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量 高质量js代码，还有许多广告代码下载。
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本 站收集大量高质量js代码，还有许多广告代码下载。
setcorner()
</script>
</body>
</html>

关于无图片圆角制作方法的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092765087.shtml方便下次再访问哦。

·上一篇： 定位在网页底部的图层
·下一篇： css设计柱状数据表

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

无图片圆角制作方法

文章分类LIST >>返回首页

最新游戏

最新新闻