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
Detaillierte Einführung in die gespeicherten MySQL-Funktionen
Inhaltsverzeichnis 1. Erstellen Sie eine gespeich...
Docker-Speicherüberwachung und Stresstestmethoden
Der ausgeführte Docker-Container zeigt, dass der ...
Ein kurzes Verständnis der relevanten Sperren in MySQL
Dieser Artikel soll Ihnen vor allem dabei helfen,...
Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?
Inhaltsverzeichnis Vor MySQL 5.6 Nach MySQL 5.6 Z...
Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)
Beim letzten Mal fragte ein sehr fleißiger Fan, o...
Beschreiben Sie kurz die Replikation der MySQL-Überwachungsgruppe
Originaltext: https://dev.mysql.com/doc/refman/8....
Vergessen Sie nicht, den HTML-Tag zu schließen
Das Erstellen von Webseiten, die Webstandards ents...
Kurztipps für die Linux-Befehlszeile: So finden Sie eine Datei
Wir alle haben Dateien auf unseren Computern gesp...
Beispielcode zum Erzielen eines Aushöhlungseffekts mit reinem CSS
Ich habe kürzlich den Aushöhlungseffekt untersuch...
Vue implementiert die Countdown-Komponente für zweite Kills
In diesem Artikel wird der spezifische Code von V...
Grundlegende Verwendung von exists, in und any in MySQL
【1】existiert Verwenden Sie eine Schleife, um die ...
WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung
WeChat Mini-Programm - QR-Code-Generator Download...
Die HTML-Eingabedateisteuerung begrenzt den Typ der hochgeladenen Dateien
Fügen Sie der Webseite ein HTML-Steuerelement für...
Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)
Wenn ich Vue lerne und immer Webpack-Anweisungen ...
JavaScript zum Erreichen eines einfachen Tab-Leisten-Umschaltens
In diesem Artikel wird der spezifische Code für J...