写真に示されているスケジュールは一般的にどのように実行されますか? _html/css

ディスカッションへの返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

写真に示されているスケジュールは一般的にどのように実行されますか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

「教室表」と「教室利用表」があるとして、以下のような表を作るにはどうすればよいでしょうか？それとも、すぐに生成できる既製のツールはありますか?

ディスカッションへの返信 (解決策)

<!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>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。