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

回复

我来回复
  • 暂无回复内容