使用ul和li标签做出来表格的代码分享

2015-10-16 17:26 阅读 405 views 次 评论 0 条

table标签可以做出来表格,但是对于搜索引擎不友好,相信很多朋友在发布文章的时候需要列出一个表格,但是又不会除了table以外的方法。今天跟大家分享的是用ul和li标签作出表格。当然,这个中的文字肯定不是大家想要的,自己进入dw中编辑一下。
  效果图如下: 

ul和li标签所建立的表格示例图

  代码如下:

<html>
<style type="text/css">
ul {
padding:1px;
margin:0px;
width:800px;
height:20px;
line-height:100px;
font-size:16px;
text-align: center;
list-style-image: none;
list-style-type: none;
}
ul li {
display:block;
width:48%;
float:left;
text-indent:2em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: dashed;
border-left-style: dashed;
line-height: 110px;
position: relative;
border-right-style: dashed;
border-top-style: dashed;
border-top-color: #C93;
border-right-color: #C93;
border-bottom-color: #C93;
border-left-color: #C93;
}
.th {
background:#F1FADE;
font-weight:bold;
border-top-width: 1px;
}
</style>
<body>
<ul>
<li>姓名</li>
<li>班级</li>
</ul>
<ul>
<li>阿三</li>
<li>3-1</li>
</ul>
<ul>
<li>小龙</li>
<li>2-4</li>
</ul>
<ul>
<li>大马</li>
<li>5-3</li>
</ul>
</body>
</html>
以上代码可以自己拿到dw里面去试一试,看看哪里控制的是那个地方。一点基础都没有的同学,我这里有HTML和css的电子书籍,适合新手学习,如有需要,大家可以留言,我会发到你们的邮箱。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:使用ul和li标签做出来表格的代码分享 | 山西SEO
分类:SEO技术分享 标签:,

发表评论


表情