Reiner CSS-Header, korrigierter Implementierungscode
|
Es gibt zwei Hauptgründe, warum es schwierig ist, feste Header mit reinem CSS zu implementieren. Erstens unterstützt IE6, der den größten Marktanteil hat, position:fixed nicht. Ein weiterer Grund besteht darin, dass die Leute sich große Mühe geben, diesen Effekt in einer Tabellenkalkulation zu erzielen. Allerdings haben einige Ausländer diesen Effekt tatsächlich mit reinem CSS erzielt, wobei sie eine erstaunliche Anzahl von CSS-Hacks verwendet haben ... Ich denke, wenn der Code so schwer zu verstehen und zu erweitern ist, wäre es besser, JavaScript zu verwenden. Es ist passiert, dass ich heute auf ein solches Bedürfnis gestoßen bin. Ich habe aus einer anderen Perspektive darüber nachgedacht und es tatsächlich herausgefunden. Wir wissen, dass CSS für die Präsentation und HTML für die Struktur verantwortlich ist. Dieselbe Struktur, mit einem anderen Stil, kann bei Menschen ein völlig anderes Gefühl hervorrufen. Dies zeigt auch, dass das menschliche Auge leicht getäuscht werden kann. Daher wollten die Leute in den Tagen, als DIV+CSS enthusiastisch beworben wurde, immer Tabellen von der Seite entfernen und mit div+span nacheinander „Tabellen“ erstellen. Dies ist zwar nicht ratsam, zeigt uns aber auch, dass wir durch bestimmte Kombinationen dasselbe tun können wie die Tabelle. Anders ausgedrückt: Wenn eine Tabelle es nicht schafft, verwenden Sie zwei. Die obige Tabelle simuliert die Tabellenüberschrift und die folgende Tabelle simuliert den Teil mit der Bildlaufleiste. Bevor wir fortfahren, klären wir unsere Anforderungen, sonst ist es zu abstrakt. Erstens ist die Tabelle 4 x 9 groß, jede Spalte ist 170 Pixel breit, insgesamt also 680 Pixel, und die Bildlaufleiste ist in jedem Browser standardmäßig 16 Pixel groß. Vergessen Sie nicht, dass die Breite keine Ränder umfasst. Es gibt 5 vertikale Ränder für vier Spalten und die Gesamtbreite beträgt 701 Pixel.
<Tabelle>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</Tabelle>Dann teilen wir diese Tabelle in zwei Teile. Die erste Tabelle ist die Kopfzeile und die zweite Tabelle muss eine Bildlaufleiste haben, was bedeutet, dass der Overflow-Stil auf das übergeordnete Element angewendet werden muss, sodass es in ein Div eingeschlossen werden muss. Dieses Div sollte die gleiche Länge wie die erste Tabelle haben. Aber machen Sie sich darüber keine Sorgen. Wir setzen einfach ein Div außerhalb davon, setzen seine Breite auf 701px und setzen dann die Breite dieser beiden untergeordneten Elemente auf 100 %. Beachten Sie, dass wir tbody explizit zur Tabelle hinzufügen, um die Tabellendarstellung effizienter zu gestalten.
<div id="scrollTabelle">
<Tabelle Klasse="thead">
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Beschreibung</th>
<th>Beispiel</th>
</tr>
</tbody>
</Tabelle>
<div>
<Tabellenklasse="tbody">
<tbody>
<tr>
<td>Einfacher Attributselektor</td>
<td>[attr] </td>
<td>Elemente mit diesem Attribut auswählen</td>
<td>blockquote[Titel] { <br/>Farbe: rot }</td>
</tr>
<tr>
<td>Attributwert-Selektor</td>
<td>[attr="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert genau dem angegebenen Wert entspricht.</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Beginnt-mit"-Attributwertselektor</td>
<td>[attr^="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwerte mit dem angegebenen Wert beginnen</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>Wertauswahl für das Attribut „Endet mit“</td>
<td>[attr$="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Wert endet</td>
<td>div[class$="vml"]{<br/>Cursor: Hand} </td>
</tr>
<tr>
<td>Werteauswahl für Teilstring-Match-Attribute</td>
<td>[attr*="Wert"] </td>
<td>Wählen Sie das Element aus, dessen Attributwert den angegebenen Wert enthält.</td>
<td>div[Klasse*="Raster"]{<br/> float:left} </td>
</tr>
<tr>
<td>Einer-aus-vielen-Attributwert-Selektor</td>
<td>[attr~="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements besteht aus mehreren Wörtern und der angegebene Wert ist eines davon. </td>
<td>li[Klasse~="letzte"]{<br/> padding-left:2em} </td>
</tr>
<tr>
<td>Bindestrich-Attributwert-Selektor</td>
<td>[attr|="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements ist gleich dem angegebenen Wert oder beginnt mit dem angegebenen Wert plus "-"</td>
<td>span[lang|="de"]{ <br/>Farbe:grün}</td>
</tr>
<tr>
<td>Attributwert-Selektor invertieren</td>
<td>[attr!="Wert"] </td>
<td>Nicht standardmäßig, erscheint in jQuery</td>
<td>span[Klasse!="rot"]{<br/>Farbe:grün}</td>
</tr>
</tbody>
</Tabelle>
</div>
</div>Präsentationsschicht:
#scrollTabelle {
Breite: 701px;
Rahmen: 1px durchgehend #EB8;/*Tabelle hat keinen äußeren Rahmen, nur das innere td oder th hat einen Rahmen*/
Hintergrund: #FF8C00;
}
#scrollTable Tabelle {
border-collapse:collapse; /*Legen Sie die beiden Tabellen als Tabellen mit dünnen Linien fest*/
}
#scrollTable table.thead{ /*Tabellenüberschrift*/
/*Das erste untergeordnete Element von div*/
Breite: 100 %;
}
#scrollTable table.thead th{/*Tabellenüberschrift*/
Rand: 1px durchgezogen #EB8;
Rand rechts: #C96;
Farbe: #fff;
Hintergrund: #FF8C00;/*hellorange*/
}
#scrollTable div{/*Tabellenkörper mit Bildlaufleiste*/
/*Das zweite untergeordnete Element von div*/
Breite: 100 %;
Höhe: 200px;
Überlauf:auto;/*Erforderlich*/
}
#scrollTable table.tbody{/*Der Hauptteil der Tabelle mit Bildlaufleiste*/
Breite: 100 %;
Rand: 1px durchgezogen #C96;
Rand rechts: #B74;
Farbe: #666666;
Hintergrund: #ECE9D8;
}
#scrollTable table.tbody td{/*Das Raster des Tabellenkörpers mit Bildlaufleiste*/
Rand: 1px durchgezogen #C96;
}Führen Sie den Code aus:
<!doctype html>
<html dir="ltr" lang="zh-CN">
<Kopf>
<meta charset="utf-8"/>
<title>Reines CSS zur Erzielung eines festen Headers</title>
<style type="text/css">
#scrollTabelle {
Breite: 701px;
Rahmen: 1px durchgehend #EB8;/*Tabelle hat keinen äußeren Rahmen, nur das innere td oder th hat einen Rahmen*/
Hintergrund: #FF8C00;
}
#scrollTable Tabelle {
border-collapse:collapse; /*Legen Sie die beiden Tabellen als Tabellen mit dünnen Linien fest*/
}
#scrollTable table.thead{ /*Tabellenüberschrift*/
/*Das erste untergeordnete Element von div*/
Breite: 100 %;
}
#scrollTable table.thead th{/*Tabellenüberschrift*/
Rand: 1px durchgezogen #EB8;
Rand rechts: #C96;
Farbe: #fff;
Hintergrund: #FF8C00;/*hellorange*/
}
#scrollTable div{/*Tabellenkörper mit Bildlaufleiste*/
/*Das zweite untergeordnete Element von div*/
Breite: 100 %;
Höhe: 200px;
Überlauf:auto;/*Erforderlich*/
}
#scrollTable table.tbody{/*Der Hauptteil der Tabelle mit Bildlaufleiste*/
Breite: 100 %;
Rand: 1px durchgezogen #C96;
Rand rechts: #B74;
Farbe: #666666;
Hintergrund: #ECE9D8;
}
#scrollTable table.tbody td{/*Das Raster des Tabellenkörpers mit Bildlaufleiste*/
Rand: 1px durchgezogen #C96;
}
</Stil>
</Kopf>
<Text>
<div id="scrollTabelle">
<Tabelle Klasse="thead">
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Beschreibung</th>
<th>Beispiel</th>
</tr>
</tbody>
</Tabelle>
<div>
<Tabellenklasse="tbody">
<tbody>
<tr>
<td>Einfacher Attributselektor</td>
<td>[attr] </td>
<td>Elemente mit diesem Attribut auswählen</td>
<td>blockquote[Titel] { <br/>Farbe: rot }</td>
</tr>
<tr>
<td>Attributwert-Selektor</td>
<td>[attr="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert genau dem angegebenen Wert entspricht.</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Beginnt-mit"-Attributwertselektor</td>
<td>[attr^="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwerte mit dem angegebenen Wert beginnen</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>Wertauswahl für das Attribut „Endet mit“</td>
<td>[attr$="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Wert endet</td>
<td>div[class$="vml"]{<br/>Cursor: Hand} </td>
</tr>
<tr>
<td>Werteauswahl für Teilstring-Match-Attribute</td>
<td>[attr*="Wert"] </td>
<td>Wählen Sie das Element aus, dessen Attributwert den angegebenen Wert enthält.</td>
<td>div[Klasse*="Raster"]{<br/> float:left} </td>
</tr>
<tr>
<td>Einer-aus-vielen-Attributwert-Selektor</td>
<td>[attr~="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements besteht aus mehreren Wörtern und der angegebene Wert ist eines davon. </td>
<td>li[Klasse~="letzte"]{<br/> padding-left:2em} </td>
</tr>
<tr>
<td>Bindestrich-Attributwert-Selektor</td>
<td>[attr|="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements ist gleich dem angegebenen Wert oder beginnt mit dem angegebenen Wert plus "-"</td>
<td>span[lang|="de"]{ <br/>Farbe:grün}</td>
</tr>
<tr>
<td>Attributwert-Selektor invertieren</td>
<td>[attr!="Wert"] </td>
<td>Nicht standardmäßig, erscheint in jQuery</td>
<td>span[Klasse!="rot"]{<br/>Farbe:grün}</td>
</tr>
</tbody>
</Tabelle>
</div>
</div>
</body>
</html>
Es wurde festgestellt, dass das Raster auf dem Uhrenkopf nicht mit dem Raster auf dem Uhrengehäuse übereinstimmte. Zu diesem Zeitpunkt müssen wir das Tag „col“ verwenden. Mit „col“ können wir die Hintergrundfarbe, Textausrichtung und Breite von td oder th mit demselben Indexwert in tbody einheitlich festlegen. Obwohl die angrenzenden Selektoren von CSS2.1 und die Pseudoklassen zum Filtern untergeordneter Elemente von CSS3 es uns ermöglichen, diese auf eine rationalere Weise festzulegen und Stil von Struktur zu trennen, ist es schade, dass die IE-Familie immer hinterherhinkt. Schauen wir uns noch einmal ihre Längen an. Da die letzte Tabelle durch die Bildlaufleiste möglicherweise verkürzt wird, müssen wir nur sicherstellen, dass die ersten drei Spalten gleich lang sind und der Rest der letzten zugewiesen wird. Mit anderen Worten, die letzte muss nicht festgelegt werden. Darüber hinaus kann der Bildlaufleistenstil im IE festgelegt werden. Probieren wir es aus.
<Tabelle Klasse="thead">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
//********************leicht*****************
</tbody>
</Tabelle>
<div>
<Tabellenklasse="tbody">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
//********************leicht*****************
</tbody>
</Tabelle>
</div>Präsentationsschicht:
#scrollTabelle {
Breite: 701px;
Rahmen: 1px durchgehend #EB8;/*Tabelle hat keinen äußeren Rahmen, nur das innere td oder th hat einen Rahmen*/
Hintergrund: #FF8C00;
}
#scrollTable Tabelle {
border-collapse:collapse; /*Legen Sie die beiden Tabellen als Tabellen mit dünnen Linien fest*/
}
/*Das erste untergeordnete Element des Header-Div**/
#scrollTable Tabelle.thead{
Breite: 100 %;
}
/*Kopfzeile*/
#scrollTable table.thead th{
Rand: 1px durchgezogen #EB8;
Rand rechts: #C96;
Farbe: #fff;
Hintergrund: #FF8C00;/*hellorange*/
}
/*Tabellenkörper mit Bildlaufleiste*/
/*Das zweite untergeordnete Element von div*/
#scrollTable div{
Breite: 100 %;
Höhe: 200px;
Überlauf:auto;/*Erforderlich*/
scrollbar-face-color:#EB8;/*Die Hintergrundfarbe der drei kleinen Rechtecke*/
scrollbar-base-color:#ece9d8;/*Die Vordergrundfarbe der drei kleinen Rechtecke*/
scrollbar-arrow-color:#FF8C00;/*Die Farbe des dreieckigen Pfeils in den Auf- und Ab-Schaltflächen*/
scrollbar-track-color:#ece9d8;/*Die Hintergrundfarbe des Rechtecks, in dem sich der aktive Block der Bildlaufleiste befindet*/
scrollbar-highlight-color:#800040;/*Die Farbe der oberen linken Polsterung der drei kleinen Rechtecke*/
scrollbar-shadow-color:#800040;/*Die Farbe der Polsterung unten rechts der drei kleinen Rechtecke*/
scrollbar-3dlight-color: #EB8;/*Die Farbe des oberen linken Randes der drei kleinen Rechtecke*/
scrollbar-darkshadow-Color:#EB8;/*Die Farbe des unteren rechten Randes der drei kleinen Rechtecke*/
}
/*Der Hauptteil der Uhr mit Bildlaufleiste*/
#scrollTable Tabelle.tbody{
Breite: 100 %;
Rand: 1px durchgezogen #C96;
Rand rechts: #B74;
Farbe: #666666;
Hintergrund: #ECE9D8;
}
/*Raster mit Bildlaufleiste*/
#scrollTable table.tbody td{
Rand: 1px durchgezogen #C96;
}Führen Sie den Code aus:
<!doctype html>
<html dir="ltr" lang="zh-CN">
<Kopf>
<meta charset="utf-8"/>
<title>Reines CSS zur Erzielung eines festen Headers</title>
<style type="text/css">
#scrollTabelle {
Breite: 701px;
Rahmen: 1px durchgehend #EB8;/*Tabelle hat keinen äußeren Rahmen, nur das innere td oder th hat einen Rahmen*/
Hintergrund: #FF8C00;
}
#scrollTable Tabelle {
border-collapse:collapse; /*Legen Sie die beiden Tabellen als Tabellen mit dünnen Linien fest*/
}
/*Das erste untergeordnete Element des Header-Div**/
#scrollTable Tabelle.thead{
Breite: 100 %;
}
/*Kopfzeile*/
#scrollTable table.thead th{
Rand: 1px durchgezogen #EB8;
Rand rechts: #C96;
Farbe: #fff;
Hintergrund: #FF8C00;/*hellorange*/
}
/*Tabellenkörper mit Bildlaufleiste*/
/*Das zweite untergeordnete Element von div*/
#scrollTable div{
Breite: 100 %;
Höhe: 200px;
Überlauf:auto;/*Erforderlich*/
scrollbar-face-color:#EB8;/*Die Hintergrundfarbe der drei kleinen Rechtecke*/
scrollbar-base-color:#ece9d8;/*Die Vordergrundfarbe der drei kleinen Rechtecke*/
scrollbar-arrow-color:#FF8C00;/*Die Farbe des dreieckigen Pfeils in den Auf- und Ab-Schaltflächen*/
scrollbar-track-color:#ece9d8;/*Die Hintergrundfarbe des Rechtecks, in dem sich der aktive Block der Bildlaufleiste befindet*/
scrollbar-highlight-color:#800040;/*Die Farbe der oberen linken Polsterung der drei kleinen Rechtecke*/
scrollbar-shadow-color:#800040;/*Die Farbe der Polsterung unten rechts der drei kleinen Rechtecke*/
scrollbar-3dlight-color: #EB8;/*Die Farbe des oberen linken Randes der drei kleinen Rechtecke*/
scrollbar-darkshadow-Color:#EB8;/*Die Farbe des unteren rechten Randes der drei kleinen Rechtecke*/
}
/*Der Hauptteil der Uhr mit Bildlaufleiste*/
#scrollTable Tabelle.tbody{
Breite: 100 %;
Rand: 1px durchgezogen #C96;
Rand rechts: #B74;
Farbe: #666666;
Hintergrund: #ECE9D8;
}
/*Raster mit Bildlaufleiste*/
#scrollTable table.tbody td{
Rand: 1px durchgezogen #C96;
}
</Stil>
</Kopf>
<Text>
<div id="scrollTabelle">
<Tabelle Klasse="thead">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Beschreibung</th>
<th>Beispiel</th>
</tr>
</tbody>
</Tabelle>
<div>
<Tabellenklasse="tbody">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
<tr>
<td>Einfacher Attributselektor</td>
<td>[attr] </td>
<td>Elemente mit diesem Attribut auswählen</td>
<td>blockquote[Titel] { <br/>Farbe: rot }</td>
</tr>
<tr>
<td>Attributwert-Selektor</td>
<td>[attr="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert genau dem angegebenen Wert entspricht.</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Beginnt-mit"-Attributwertselektor</td>
<td>[attr^="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwerte mit dem angegebenen Wert beginnen</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>Wertauswahl für das Attribut „Endet mit“</td>
<td>[attr$="Wert"] </td>
<td>Wählen Sie Elemente aus, deren Attributwert mit dem angegebenen Wert endet</td>
<td>div[class$="vml"]{<br/>Cursor: Hand} </td>
</tr>
<tr>
<td>Werteauswahl für Teilstring-Match-Attribute</td>
<td>[attr*="Wert"] </td>
<td>Wählen Sie das Element aus, dessen Attributwert den angegebenen Wert enthält.</td>
<td>div[Klasse*="Raster"]{<br/> float:left} </td>
</tr>
<tr>
<td>Einer-aus-vielen-Attributwert-Selektor</td>
<td>[attr~="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements besteht aus mehreren Wörtern und der angegebene Wert ist eines davon. </td>
<td>li[Klasse~="letzte"]{<br/> padding-left:2em} </td>
</tr>
<tr>
<td>Bindestrich-Attributwert-Selektor</td>
<td>[attr|="Wert"] </td>
<td>Der Attributwert des ursprünglichen Elements ist gleich dem angegebenen Wert oder beginnt mit dem angegebenen Wert plus "-"</td>
<td>span[lang|="de"]{ <br/>Farbe:grün}</td>
</tr>
<tr>
<td>Attributwert-Selektor invertieren</td>
<td>[attr!="Wert"] </td>
<td>Nicht standardmäßig, erscheint in jQuery</td>
<td>span[Klasse!="rot"]{<br/>Farbe:grün}</td>
</tr>
</tbody>
</Tabelle>
</div>
</div>
</body>
</html>
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL
Artikel empfehlen
Detaillierte Erklärung der Concat-bezogenen Funktionen in MySQL
1. concat()-Funktion Funktion: Mehrere Zeichenfol...
Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()
Lernziele: Die beiden Funktionen parseInt() und N...
Schritte für den Exit-Fehlercode des Docker-Containers
Manchmal werden einige Docker-Container nach eine...
Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...
Tutorial zur Installation des Nvidia-Grafikkartentreibers in Ubuntu 18.04 (mit Bildern und Text)
0. Vorbereitende Maßnahmen Deaktivieren Sie den s...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...
css3-Animation, Ballrollen, js-Steuerung, Animationspause
Mit CSS3 können Animationen erstellt werden, die ...
So umgehen Sie unbekannte Feldnamen in MySQL
Vorwort Dieser Artikel stellt die fünfte Frage vo...
Detaillierte Analyse von MySQL-Deadlock-Problemen
Vorwort Wenn sich unser Geschäft in einem sehr fr...
Autotrash-Tool für Linux zum automatischen Löschen alter Junk-Dateien zu einem festgelegten Zeitpunkt
Autotrash ist ein Befehlszeilenprogramm, das den ...
MySQL-Anmelde- und Beendigungsbefehlsformat
Das Befehlsformat für die MySQL-Anmeldung ist: my...
Detaillierte Erklärung der Single-Choice- und Multiple-Choice-Auswahl im HTML-Select-Tag
Das Auswahlelement erstellt ein Einzelauswahl- ode...
Sammlung einer Zusammenfassung der HTML-Iframe-Nutzung
Detaillierte Analyse der Iframe-Nutzung <iframe...
Vue realisiert die Funktion zum Hochladen von Fotos auf den PC
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zur Installation und Bereitstellung des automatischen Mount-Dienstes Autofs unter Linux
Inhaltsverzeichnis 1. Einführung in den Autofs-Di...