table 能设圆角 css,table&css圆角边框效果

挺好用的 放在最下面比较好看 所以就一个下圆角的实例 上圆角按照代码很容易做。。。

图传不上来

head区

body{ font:

100.01% "Trebuchet MS",Verdana,Arial,sans-serif}

h1,h2,p{margin: 0 10px}

h1{font-size: 250%;color: #FFF}

h2{font-size: 200%;color: #f0f0f0}

p{padding-bottom:1em}

h2{padding-top: 0.3em}

div#nifty{ margin: 0 10%;background: #FFF}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;

overflow:

hidden; background: #61aec8}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

.STYLE2 {color: #3399CC}

body区

class="rbottom">

class="r4">

class="r3">

class="r2">

class="r1">

前面是css样式咯 后面r几对应上面的设置 简单~

table页 从别人那里粘贴过来的 我的中间东西太多了= =|||

td

{

font-size:

12px;

color:

#000000;

line-height:

150%;

}

.sec1 {

background-color: #EEEEEE;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid #FFFFFF

}

.sec2

{

background-color: #D4D0C8;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

font-weight: bold;

}

.main_tab

{

background-color: #D4D0C8;

color:

#000000;

border-left:1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid gray;

}

function secBoard(n)

{

for(i=0;i

secTable.cells[i].className="sec1";

secTable.cells[n].className="sec2";

for(i=0;i

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

cellspacing=0 cellpadding=0 width=549 id=secTable

onMouseOut="secBoard(0)">

//

应把onMoseOut删除掉 不删掉效果是鼠标离开选项卡

自动页secBoard(0)

onMouseLeave的意思是鼠标离开这个表格自动弹回某页 无必要可不加

align=center>

onMouseOver="secBoard(0)">menu_1

// 由于是默认选择的 所以这里选择了css sec2的样式

onMouseOver="secBoard(1)">menu_2

onMouseOver="secBoard(2)">menu_3

onMouseOver="secBoard(3)">menu_4

width=549 height=240

id=mainTable

class=main_tab >

style="display:block;">

第1列内容

style="display:none;" >

第二列内容

style="display:none;">

第三列内容

style="display:none;">

第四列内容