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
Artikel empfehlen
Vergleich verschiedener Möglichkeiten zur Messung der Leistung von JavaScript-Funktionen
Inhaltsverzeichnis Überblick Leistung.jetzt Konso...
Verwendung des Linux-Befehls „userdel“
1. Befehlseinführung Der Befehl userdel (User Del...
Detaillierter Installationsprozess von Jenkins unter Linux
Inhaltsverzeichnis 1. Installieren Sie JDK 2. Jen...
So verwenden Sie Docker zum Erstellen einer einheitlichen OpenLDAP+phpLDAPadmin-Benutzerauthentifizierung
1. Hintergrund Verwenden Sie LDAP, um betriebs- u...
Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus
Lebenszyklusklassifizierung Jede Komponente von V...
Implementierung der Funktion der kreisförmigen prozentualen Fortschrittsbalkenkomponente von Vue
Jeder, der es braucht, kann darauf zurückgreifen....
Auszeichnungssprache - Liste
Standardisierte Designlösungen – Auszeichnungsspr...
So erstellen Sie mit Squid einen Proxyserver für http und https
Als wir nginx eingeführt haben, haben wir nginx a...
Eine Methode zum Erstellen von Karussellbildern mit CSS3
Diashows sieht man häufig auf Webseiten. Sie enth...
Docker-Bereitstellung - Nginx-Implementierungsprozess - Grafik und Text - detaillierte Erläuterung
1. Laden Sie nginx herunter [root@localhost my.Sh...
Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)
Vorwort Bei einer datenzentrierten Anwendung wirk...
Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts
Inhaltsverzeichnis Was ist eine Multiumgebungskon...
Detaillierte Erläuterung der Installation des Nginx-Servers und der Lastausgleichskonfiguration auf einem Linux-System
nginx (Engine x) ist ein leistungsstarker HTTP- u...
Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...
Vue implementiert den Beispielcode zum Hinzufügen, Löschen, Ändern und Überprüfen der Baumstruktur
Tatsächlich haben viele Unternehmen ähnliche Funk...