search

Home >Web Front-end >HTML Tutorial >如图所示的时间表，一般是怎么实现的？_html/css_WEB-ITnose

如图所示的时间表，一般是怎么实现的？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:28:371214browse

假设有 “教室表” 和 “教室使用情况表”，如何做出类似下图所示的表格？或者有什么现成的工具可以快速生成？


回复讨论(解决方案)

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><meta http-equiv="Pragma" content="no-cache"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){	$(".bg0").click(function(){		var y_idx = $(this).parents(".t-body").index()-1;		var x_idx = $(this).index();		alert("x="+x_idx+",     y="+y_idx);//x和y是第几行、第几列	});});</script><style type="text/css">html,body,dl,dd,dt{padding:0;margin:0;}.container{font-size:14px;line-height:30px;}dl{clear:both;position:relative;}dt{float:left;box-sizing:border-box;height:40px;width:120px;}dd{float:left;box-sizing:border-box;height:40px;width:40px;}.container{}.t-head1 dt {height:22px;}.t-head1 dd {height:22px;font-size:12px;margin-left:-1px;}.t-head2 dt {height:22px;border-right:1px solid #333;}.t-head2 dd {height:22px;border-right:1px solid #333;border-bottom:1px solid #333;}.t-body dt {text-align:center;border-right:1px solid #333;}.t-body dd{border-bottom:1px solid #333;background:#c6e1ff;}.bg1{background:#ff6462!important;}.bg2{background:#ffff9d!important;}.bg0{background:#c6e1ff;cursor:pointer;}.bg0:hover{background:#3300ff;}</style></head><body><div class="container"><dl class="t-head1"><dt></dt><dd>8点</dd><dd>9点</dd><dd>10点</dd><dd>11点</dd><dd>12点</dd><dd>13点</dd><dd>14点</dd><dd>15点</dd><dd>16点</dd><dd>17点</dd><dd>18点</dd><dd>19点</dd><dd>20点</dd><dd>21点</dd></dl><dl class="t-head2"><dt></dt><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd></dl><dl class="t-body"><dt>接待室</dt><dd class="bg0"></dd><dd class="bg1"></dd><dd class="bg1"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd></dl><dl class="t-body"><dt>报告厅</dt><dd  class="bg1"></dd><dd class="bg2"></dd><dd class="bg2"></dd><dd class="bg2"></dd><dd class="bg1"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd></dl><dl class="t-body"><dt>会议厅</dt><dd  class="bg0"></dd><dd class="bg2"></dd><dd class="bg1"></dd><dd class="bg1"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd></dl><dl class="t-body"><dt>活动中心</dt><dd  class="bg0"></dd><dd  class="bg0"></dd><dd class="bg1"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd class="bg1"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd><dd  class="bg0"></dd></dl></div></body></html>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS那些事儿-阅读随笔1（CSS简介与选择符）_html/css_WEB-ITnoseNext article：W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose

Related articles

See more