区区小爱 2020-12-10 22:29 采纳率: 66.7%
浏览 26
已采纳

ASP语言如何与div ul li dt dl dd等标签做一个类似表格的网站

这是标题：排序，商品名称，同行价，状态，额定功率，显卡供电，备注

然后从数据库里面显示数据到前端，这张图里的内容我之前是用表格做的

<table width="200">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

现在想换标签div ul li dt dl dd 之类主流内容来重新写我的网站。

目前我只会用ASP语言。

请大家帮帮我。

给我个实例代码，我自己参考一下。

  • 写回答

17条回答 默认 最新

  • 天际的海浪 2020-12-13 19:39
    关注
    <!doctype html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="UTF-8">
	<title></title>
<style type="text/css">
.table {
	display: table;
	border-collapse: collapse;
	width: 900px;
	margin: 0 auto;
}
.table > ul {
	display: table-row;
	background-color: #fff;
}
.table > ul > li{
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
	border: 1px solid #099;
}
ul.thead > li {
	background-color: #0CC;
	text-align: center;
}
ul.tbody:nth-child(2n+1) {
	background-color: #f6f6f6;
}
ul.tbody:hover {
	background-color: #0ff;
}
ul.tbody > li:nth-child(1) {
	width: 50px;
	text-align: center;
}
ul.tbody > li:nth-child(4) {
	text-align: center;
}
ul.tbody > li:nth-child(5) {
	text-align: center;
}
ul.tbody > li:nth-child(7) {
	width: 30%;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function table_rowspan(id, cols) {
	var ama = [];
	cols.forEach(function(colnum, i){
		obj = $(id + " > .tbody > li:nth-child(" + colnum + ")");
		var p, t, up;
		obj.each(function(i) {
			if (t && $(this).html()==t.html()) {
				$(this).html("").css("background-color",t.parent().css("background-color"));
				if (p) {
					p.tail = $(this);
				} else {
					p = {head:t, tail:$(this)};
					ama.push(p)
				}
				up.css("border-bottom-color","transparent");
			} else {
				t = $(this);
				p = null;
			}
			up = $(this);
		});
	});
	ama.forEach(function(v){
		var t1 = v.head[0].getBoundingClientRect();
		var t2 = v.tail[0].getBoundingClientRect();
		var y = (t2.bottom-t1.bottom)/2;
		v.head.css("transform","translatey("+y+"px)");
	});
}

$(document).ready(function() {
	table_rowspan("#tab",[4,5]); //[]中是需要合并的列号
});
</script>
</head>
<body>
<div class="table" id="tab">
	<ul class="thead">
		<li>排序</li>
		<li>商品名称</li>
		<li>同行价</li>
		<li>状态</li>
		<li>额定功率</li>
		<li>显卡供电</li>
		<li>备注</li>
	</ul>
	<ul class="tbody">
		<li>1</li>
		<li>AAAA</li>
		<li></li>
		<li>111</li>
		<li>aaaaaa</li>
		<li></li>
		<li>多行 <br /> 文字</li>
	</ul>
	<ul class="tbody">
		<li>2</li>
		<li>BBBB</li>
		<li></li>
		<li>111</li>
		<li>bbbbb</li>
		<li></li>
		<li>文字</li>
	</ul>
	<ul class="tbody">
		<li>3</li>
		<li>CCCC</li>
		<li></li>
		<li>111</li>
		<li>bbbbb</li>
		<li></li>
		<li></li>
	</ul>
	<ul class="tbody">
		<li>4</li>
		<li>DDDD</li>
		<li></li>
		<li>111</li>
		<li>bbbbb</li>
		<li></li>
		<li></li>
	</ul>
	<ul class="tbody">
		<li>5</li>
		<li>EEEE</li>
		<li></li>
		<li>222</li>
		<li>bbbbb</li>
		<li></li>
		<li>多行 <br /> 文字</li>
	</ul>
	<ul class="tbody">
		<li>6</li>
		<li>FFFF</li>
		<li></li>
		<li>333</li>
		<li>cccc</li>
		<li></li>
		<li></li>
	</ul>
	<ul class="tbody">
		<li>7</li>
		<li>GGGG</li>
		<li></li>
		<li>333</li>
		<li>cccc</li>
		<li></li>
		<li>文字</li>
	</ul>
</div>
 
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(16条)

报告相同问题？

悬赏问题

  • ¥15 删除虚拟显示器驱动 删除所有 Xorg 配置文件 删除显示器缓存文件 重启系统 可是依旧无法退出虚拟显示器
  • ¥15 vscode程序一直报同样的错，如何解决?
  • ¥15 关于使用unity中遇到的问题
  • ¥15 开放世界如何写线性关卡的用例(类似原神）
  • ¥15 关于并联谐振电磁感应加热
  • ¥60 请查询全国几个煤炭大省近十年的煤炭铁路及公路的货物周转量
  • ¥15 请帮我看看我这道c语言题到底漏了哪种情况吧！
  • ¥66 如何制作支付宝扫码跳转到发红包界面
  • ¥15 pnpm 下载element-plus
  • ¥15 解决编写PyDracula时遇到的问题