CSSは座席選択効果を実現するためにautoflow属性を使用する

1. 自動フロー属性、要素コンテンツの長さと幅が要素自体の長さと幅を超える場合、スクロールバーが表示されます。

<HTML> 
<ヘッド> 
<TITLE>テーブル内のスクロールバーのテスト</TITLE> 
</HEAD> 
<本文> 
<div id="勝つ" 
        スタイル="位置:絶対;高さ:200;幅:200;オーバーフロー:自動;背景:#EEEEEE;"> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppp </p> 
      </div>
</本文> 
</HTML>

効果は以下のとおりです

2. 座席選択ページ

<html>
<ヘッド>
 <メタ文字セット="utf-8"> 
 <title>座席</title>
 <meta name="ビューポート"
 コンテンツ="幅=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
 <link rel="スタイルシート" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <スタイル タイプ="text/css">
      テーブル tr td{
        パディング: 5px;
      }
     </スタイル>
      </head>
   <スクリプト>
  関数createTable(){
var DivW = 600;
var DivH = 400;
var 長さ=30;
var 高さ=$("#h").val()/1;
var 幅=$("#w").val()/1;
var TableW=幅*(長さ+3);
var TableH=高さ*(長さ+3);
$(".main").empty();
$(".main").width(テーブルW).height(テーブルH);
(var a=0;a<高さ+1;a++){
 var str="<tr>";
 (var b=0;b<width+1;b++){
  もしa==0&&b>0であれば
   str+='<td height="30px" width="30px">'+b+'</td>';
  }
  b==0&a>0の場合{
     str+='<td height="30px" width="30px">'+a+'</td>';
  }
  b>0&&a>0の場合{
   str+='<td height="30px" width="30px" ><img src="img/2.png" width="30px" height="30px" /></td>';
  }
  
  a==0&&b==0の場合{
    str+='<td 高さ="30px" 幅="30px"></td>';
  }
 }
 str+="</tr>";
 $(".main").append(str);
}
  }
   </スクリプト>
<本文>
<!-- ボタンはモーダル ボックスをトリガーします -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="createTable()">
 座席</button>
<input type="text" id="h" />行<input type="text" id="w" />座席<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
        <div class="modal-content">
   <div id="wins" style="position:absolute;height:400;width:600;overflow:auto;background:#ffffff;"> 
    <テーブルクラス="main" スタイル="text-align:center;">   
    </テーブル>
   </div>
  </div>
 </div>
</div>
</本文>
</html>

効果は以下のとおりです

要約する

以上が私がご紹介した内容です。座席選択効果を実現するために、CSS の autoflow 属性を使用しています。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: サブセットかどうかを判断するためのMySQLメソッドの手順

>>: W3C チュートリアル (10): W3C XQuery アクティビティ