用div+css制作圆角风格表格的方法,这个圆角表格还挺漂亮的,可直接套用或者您也可以自定义样式。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div{ font-size:12px;} .one { display:block; overflow:hidden; height:1px; margin:0 4px; border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; background:#B2D0EA; } .two { display:block; overflow:hidden; height:1px;/*线的高度为1px*/ margin:0 3px;/*距离外层DIV的左右边距各3px*/ border-left:1px solid #B2D0EA;/*只显示线的左边的1px*/ border-right:1px solid #B2D0EA;/*只显示线的右边的1px*/ background:#B2D0EA;/*配合内层Div的颜色变化,*/ } .three { display:block; overflow:hidden; height:1px; margin:0 2px; border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; background:#EDF7FF; } .four { display:block; overflow:hidden; height:1px; margin:0 1px; border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; background:#EDF7FF; } .rou/*DIV只显示左右的边框,颜色和p标签的一致*/ { border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; } .www_wuming_ren { border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; background:#EDF7FF; } </style> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div><!--<p class="one"></p>--> <p class="two"> </p> <p class="three"> </p> <p class="four"> </p> <div class="www_wuming_ren">武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢!</div> <div class="rou">欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。</div> <p class="four"> </p> <p class="three"> </p> <p class="two"> </p> <!--<p class="one"></p>--></div>
本文来自武鸣人网站,转载请注明出处