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

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

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

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

So verwenden Sie vite zum Erstellen einer Vue3-Anwendung

Zusammenfassung der unbekannten Verwendung von "!" in Linux

Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5

Upgrade von MySQL 5.1 auf 5.5.36 in CentOS

Vue: Detaillierte Erklärung von Speicherlecks

So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4

Vue ElementUI Form-Formularvalidierung

Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

Erstellen Sie einen benutzerdefinierten Taskleistenindikator für Ihre Aufgaben unter Linux

Artikel empfehlen

Detaillierte Erklärung der Methoden und Eigenschaften von Vue

Detaillierte Erläuterung der Leistungsoptimierung für MySQL-Batch-SQL-Einfügungen

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren

So fügen Sie MySQL Indizes hinzu

HTML-Code für Multiheader-Tabellen

CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

So zeigen Sie die Zeitzone in MySQL an und ändern sie

Analyse des HTML-Schreibstils und Gründe erfahrener Leute

Lösen Sie das Problem der Selbstinkrementierung des int-Primärschlüssels von MySQL

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Vue imitiert den Formularbeispielcode von ElementUI

Meta Viewport ermöglicht die Vollbildanzeige von Webseiten auf dem iPhone

Greifen Sie auf die MySQL-Datenbank zu, indem Sie unter Windows über cmd das DOS-Fenster aufrufen