CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

1. Autoflow-Attribut: Wenn die Länge und Breite des Elementinhalts die Länge und Breite des Elements selbst überschreitet, wird eine Bildlaufleiste angezeigt

<HTML> 
<KOPF> 
<TITLE>Testen der Bildlaufleiste in der Tabelle</TITLE> 
</KOPF> 
<KÖRPER> 
<div id="gewinnt" 
        Stil = "Position: absolut; Höhe: 200; Breite: 200; Überlauf: automatisch; Hintergrund: #EEEEEE;"> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppp </p> 
      </div>
</BODY> 
</HTML>

Die Wirkung ist wie folgt

2. Sitzplatzauswahlseite

<html>
<Kopf>
 <meta charset="utf-8"> 
 <title>Sitze</title>
 <meta name="Ansichtsfenster"
 content="Breite=Gerätebreite,Mindestmaßstab=1,0,Maximalmaßstab=1,0,Benutzerskalierbar=nein">
 <link rel="stylesheet" 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>
 <style type="text/css">
      Tabelle tr td{
        Polsterung: 5px;
      }
     </Stil>
      </Kopf>
   <Skript>
  Funktion Tabelle erstellen(){
var DivW=600;
var DivH=400;
Varlänge=30;
var Höhe = $("#h").val()/1;
var Breite = $("#w").val()/1;
var TableW=Breite*(Länge+3);
var TableH=Höhe*(Länge+3);
$(".main").leer();
$(".main").Breite(TabelleW).Höhe(TabelleH);
für(var a=0;a<height+1;a++){
 var str="<tr>";
 für(var b=0;b<Breite+1;b++){
  wenn(a==0&&b>0){
   str+='<td height="30px" width="30px">'+b+'</td>';
  }
  wenn(b==0&&a>0){
     str+='<td height="30px" width="30px">'+a+'</td>';
  }
  wenn(b>0&&a>0){
   str+='<td height="30px" width="30px" ><img src="img/2.png" width="30px" height="30px" /></td>';
  }
  
  wenn(a==0&&b==0){
    str+='<td height="30px" width="30px"></td>';
  }
 }
 str+="</tr>";
 $(".main").anhängen(str);
}
  }
   </Skript>
<Text>
<!-- Button löst das modale Fenster aus-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="createTable()">
 Sitz</button>
<input type="text" id="h" />Reihe<input type="text" id="w" />Sitz<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div Klasse="modal-dialog">
        <div Klasse="modaler Inhalt">
   <div id="gewinnt" style="position:absolut;höhe:400;breite:600;überlauf:auto;hintergrund:#ffffff;"> 
    <table Klasse="main" Stil="text-align:center;">   
    </Tabelle>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Die Wirkung ist wie folgt

Zusammenfassen

Das Obige habe ich Ihnen vorgestellt. Ich verwende das Autoflow-Attribut von CSS, um den Sitzplatzauswahleffekt zu erzielen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Was ist Nginx-Lastausgleich und wie wird er konfiguriert?

>>: W3C Tutorial (10): W3C XQuery Aktivitäten

Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4

CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4

Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3

Erfahren Sie mehr über MySQL-Datenbanken

Über nginx zur Implementierung des Jira-Reverse-Proxys

Detaillierte Erläuterung der Nest.js-Parametervalidierung und des benutzerdefinierten Rückgabedatenformats

Tiefgreifendes Verständnis von Worker-Threads in Node.js

Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel

Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Erläuterung des Prinzips des MySQL-Replikationsmechanismus

Artikel empfehlen

js realisiert das dynamische Laden von Daten durch Wasserfallfluss

Analyse der Gründe, warum MySQL-Felddefinitionen nicht null verwenden sollten

Eine schnelle Lösung für den ersten Anmeldefehler in mysql5.7.20

Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

Zusammenfassung von 4 Lösungen zum Zurückgeben von Werten auf WeChat Mini-Programmseiten

Implementierung der mobilen Postcss-pxtorem-Anpassung

js realisiert 3D-Soundeffekte durch audioContext

js, um einfache Lupeneffekte zu erzielen

Prozess des Klassenlademechanismus von Tomcat und Quellcodeanalyse

Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview

Detaillierte Erläuterung des Implementierungsprinzips von MySQL-Transaktionen und Spring-Isolationsebenen

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

Lösung für das Problem, dass der Docker-Container nicht auf Jupyter zugreifen kann

Schritte zur Überprüfung der MySQL InnoDB-Row_ID-Grenzwertüberschreitung