ul和li制作细线表格效果
分类:实例代码
ul和li制作细线表格效果属于前端实例代码,有关更多实例代码大家可以查看。
网页中的表格可以很好的组织数据,使用<table>标签可以比较轻松的实现表格效果,例如下图所示效果:
下面是使用ul和li实现的表格效果的代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> ul{ height:25px; width:310px; line-height:25px; border:1px solid green; border-top:0px; font-size:12px; text-align:center; list-style:none; padding:0px; margin:0px; } ul li{ display:block; width:100px; float:left; color:#999; } .thead{ background:#F1FADE; color:#F90; font-weight:bold; border-top:1px solid green; } .leftborder{border-left:1px solid green;} </style> <body> <ul class="thead"> <li>前台专区</li> <li class="leftborder">后台专区</li> <li class="leftborder">交流专区</li> </ul> <ul> <li>div+css专区</li> <li class="leftborder">ASP专区</li> <li class="leftborder">搜索优化</li> </ul> <ul> <li>HTML专区</li> <li class="leftborder">ASP.NET专区</li> <li class="leftborder">如何建站</li> </ul> <ul> <li>jQuery专区</li> <li class="leftborder">PHP专区</li> <li class="leftborder">站长交流</li> </ul> </body> </html>
ul和li制作细线表格效果,这样的场景在实际项目中还是用的比较多的,关于ul和li制作细线表格效果就介绍到这了。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu