html5 ul li标签制作表格css样式特效Demo源代码
2017-01-12 14:04:59  By: dwtedx

可能大家工作中也发现了一个问题、就是平时使用 table 标签制作表格代码繁琐、且不方便后期代码维护、如果使用 li 标签加上 css 的浮动样式可以制作多种样式的表格、话不多说来看一下最后的效果图吧

ul li 表格


HTML代码

<ul class="tableul">
    <li class="rowtitle">一年级一班</li>
    <li class="rowleftright">姓名</li>
    <li class="rowright">性别</li>
    <li class="rowright">年龄</li>
    <li class="rowright">身高</li>
    <li class="rowright">体重</li>
    <li class="rowleftright">小秦</li>
    <li class="rowright">男</li>
    <li class="rowright">7岁</li>
    <li class="rowright">120cm</li>
    <li class="rowright">30kg</li>
    <li class="rowleftright">小谭</li>
    <li class="rowright">男</li>
    <li class="rowright">7岁</li>
    <li class="rowright">120cm</li>
    <li class="rowright">30kg</li>
    <li class="rowleftright">小张</li>
    <li class="rowright">男</li>
    <li class="rowright">7岁</li>
    <li class="rowright">110cm</li>
    <li class="rowright">40kg</li>
    <li class="rowleftright">小明</li>
    <li class="rowright">男</li>
    <li class="rowright">7岁</li>
    <li class="rowright">120cm</li>
    <li class="rowright">30kg</li>
    <li class="rowleftright">小陈</li>
    <li class="rowright">男</li>
    <li class="rowright">7岁</li>
    <li class="rowright">120cm</li>
    <li class="rowright">30kg</li>
</ul>


CSS代码

<style>
.tableul{
    width:506px;
    text-align:center;
    line-height:30px;
    margin-left: 100px;
    padding:0px;
    border-top:1px solid #000;
}
.rowtitle{
    width:504px;
    height:30px;
    float:left;
    text-align:center;
    border-right:1px solid #000;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    list-style-type:none;
}
.rowright{
    width:100px;
    height:30px;
    float:left;
    text-align:center;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    list-style-type:none;
}
.rowleftright{
    width:100px;
    height:30px;
    float:left;
    text-align:center;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    list-style-type:none;
}
</style>


使用html的ul li制作表格以及css特效源代码下载链接: html5 ul li 表格 密码: pp6n

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+