ul+li标签制作表格

Posted 夏日的微笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ul+li标签制作表格相关的知识,希望对你有一定的参考价值。

table标签制作表格代码繁琐,且不方便后期代码维护。

li标签加上css的浮动样式可以制作多种样式的表格。

代码如下:

 <ul id="ttttt" style="width:404px;text-align:center;line-height:30px;border-left:1px solid #000;border-top:1px solid #000;">
 <li style="width:403px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">这是表格</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
 </ul>

效果如下:

技术分享

 

以上是关于ul+li标签制作表格的主要内容,如果未能解决你的问题,请参考以下文章

如何通过html和css完成下拉菜单的制作

css3制作炫酷导航栏效果

页面制作

列表 表格与媒体元素

制作首页的显示列表。

制作首页的显示列表。