今后输出表格之范例div表格

最新推荐文章于 2022-10-24 20:22:30 发布

bonlog

最新推荐文章于 2022-10-24 20:22:30 发布

阅读量913

点赞数

分类专栏： css2与3 javascript+html5+前台美工

本文链接：https://blog.csdn.net/bonlog/article/details/8203388

版权

javascript+html5+前台美工同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css2与3

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIV+CSS表格效果</title> 
<style type="text/css"> 
/**div 表格*/
.divTb{
	margin:10px;
	width:501px;/*100*5+1*/
	list-style: none;

}
.divTb ul,.divTb li{
	margin:0;
	padding:0;
}
.divTb li{
	float:left;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	width: 99px;/*99px内空+1px外框*/
	height: 33px;
	line-height: 33px;
	text-align: center;
}
.divTb li.r{
	border-right:1px solid #ccc;
}
.divTb li.b{
	border-bottom:1px solid #ccc;
}
/**E div 表格*/
</style> 
</head> 

<body> 

<ul class="divTb">
	<li>111</li>
	<li>112</li>	
	<li>113</li>	
	<li>114</li>
	<li class="r">11r</li>
	<li>111</li>
	<li>112</li>
	<li>113</li>
	<li>112</li>
	<li class="r">11r</li>

	<li class="b">生活更美好</li> 
<li class="b"></li> 
<li class="b"></li> 
<li class="b"></li> 
<li class="b r">11</li> 
</ul>
</body> 
</html>

bonlog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今后输出表格之范例div表格

DIV+CSS表格效果 /**div 表格*/.divTb{ margin:10px; width:501px;/*100*5+1*/ list-style: none;}.divTb ul,.divTb li{ margin:0; padding:0;}.divTb li{ float:left; border-left:1px solid #ccc; bord
复制链接

扫一扫