写真に示されているスケジュールは一般的にどのように実行されますか? _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 までご連絡ください。

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。