用CSS样式定义的圆角表格

2007-03-08　源自:IT粉丝网　网友评论 0 条　进入视频教程

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>IT粉丝网|itFensi.com|---用CSS样式定义的圆角表格</title></head><style type="text/css">body{padding: 20px;background-color: #FFF;    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: #9BD1FA}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px;    overflow: hidden; background: #9BD1FA}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}</style></head><body><div id="nifty"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><h1>Nifty Corners</h1><p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p><h2>Rounded corners without images</h2><p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiauueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p><p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoiauuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p><p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuueauo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiuuaeuueuu eeue ieu.</p><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></body></html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：用css制作的星级评分效果三
下一篇：CSS仿淘宝首页导航条按钮布局效果

内容评论文章纠错发送朋友收藏本文

复制本文链接(URL)发送给朋友：

用CSS样式定义的圆角表格

相关内容

开发频道推荐

开发热点文章