5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen
|
Jeder muss mit Tabellen vertraut sein. Wir stoßen häufig im Code darauf. Dann ist es manchmal notwendig, der Tabelle einen Schrägstrich als Überschrift hinzuzufügen, aber wie erreicht man diesen Effekt? Ich habe die folgenden Methoden zusammengefasst: 1. Die einfachste Methode Gehen Sie direkt zur Benutzeroberfläche des Unternehmens und bitten Sie sie, ein Bild zu erstellen, es hier als Hintergrundbild einzufügen und es dann auszufüllen. Ist das nicht einfach? ! ! 2. Ein ziemlich einfacher Ansatz Tatsächlich fällt Freunden, die mit CSS3 vertraut sind, bei diesem Effekt sofort das Transform-Attribut ein. Ja, das ist tatsächlich möglich und es ist auch sehr einfach. Das einzige Problem ist, dass Sie auf das Problem der Browserkompatibilität achten müssen. Jeder sollte immer ein Gefühl der Krise im Herzen behalten (IE existiert immer noch). Wenn Ihr Unternehmen nur Kompatibilität mit Chrome erfordert, ist diese Methode für Sie geeignet. 3. Sehr einfache Methode
.biaoTou {
border-top: 200px #199fff solid; /*Die Breite des oberen Rahmens entspricht der Höhe der ersten Zeile der Tabelle*/
border-left: 200px #ff8838 solid; /*Die linke Rahmenbreite entspricht der Breite der ersten Zelle der ersten Zeile der Tabelle*/
}
<td Breite="200">
<div Klasse="biaoTou">
</div>
</td>
Auch diese Methode ist sehr einfach: Schreiben Sie es einfach entsprechend dem obigen Format auf. Diese Schreibmethode hat jedoch ein offensichtliches Problem: Sie verwendet tatsächlich zwei verschiedene Rahmenfarben, um die diagonale Linie der Tabellenüberschrift zu unterteilen. Die Farben auf beiden Seiten der diagonalen Linie können nicht gleich sein. Diese Methode kann verwendet werden, wenn Sie Werbeaktivitäten oder andere Formen durchführen. Wenn die Farben auf beiden Seiten der Diagonale jedoch gleich sein müssen, ist dieser Ansatz nicht anwendbar. Mit Vorsicht verwenden. 4. Ein sehr einfacher Ansatz Dieser Effekt kann tatsächlich mit einem weiteren neuen Tag in CSS3 erzielt werden: Canvas. Es als Leinwand zu verwenden, um eine diagonale Linie zu zeichnen, ist ein sehr einfacher Ansatz, daher werde ich ihn nicht im Detail erklären. Es gibt jedoch auch ein Problem, nämlich das alte Kompatibilitätsproblem. Wenn es nur mit Chrome kompatibel ist, können Sie tun, was Sie wollen (warum muss unser Unternehmen immer den verdammten IE berücksichtigen? Ich möchte auch nur Projekte durchführen, die mit Google kompatibel sind). 5. Kein einfacher Ansatz Das ist der js-Ansatz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<KOPF>
<TITLE>Schrägstrich-Überschrift</TITLE>
<meta http-equiv="Inhaltstyp" Inhalt="Zeichensatz=gbk">
</KOPF>
<body linker Rand=0 oberer Rand=0>
<br>
<div Höhe="300">Kopfzeile</div>
<hr>
<Tabelle Rahmen=0 bgcolor="000000" cellspacing="1" width=400
Stil="Rand links: 100px;">
<TR bgcolor="FFFFFF">
<TD Breite="111" Höhe="52"><Tabelle Breite="100%" Höhe="100%"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td1"></td>
<td>Ergebnisse</td>
</tr>
<tr>
<td>Name</td>
<td id="td2"></td>
</tr>
</table></TD>
<TD width="81">Mathematik</TD>
<TD width="96">Englisch</TD>
<TD width="99">C-Sprache</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Zhang San</TD>
<TD>55</TD>
<TD>66</TD>
<TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Li Si</TD>
<TD>99</TD>
<TD>68</TD>
<TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>Wang Wu</TD>
<TD>33</TD>
<TD>44</TD>
<TD>55</TD>
</TR>
</TABLE>
<Skripttyp="text/javascript">
Funktion a(x, y, Farbe) {
dokumentieren
.write("<img border='0' style='position: absolute; left: "
+ (x)
+ "; oben: "
+ (j)
+ ";Hintergrundfarbe: "
+ Farbe
+ "' src='px.gif' Breite=1 Höhe=1>")
}
Funktion getTop(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetTop;
während (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetTop;
vParentvParent = vParent.offsetParent;
}
Rückkehr t;
}
Funktion getLeft(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetLeft;
während (vParent.tagName.toUpperCase() != "BODY") {
t += vParent.offsetLeft;
vParentvParent = vParent.offsetParent;
}
Rückkehr t;
}
Funktion Linie(x1, y1, x2, y2, Farbe) {
var tmp
wenn (x1 >= x2) {
tmp = x1;
x1 = x2;
x2 = zeitweilig;
tmp = y1;
y1 = y2;
y2 = zeitweilig;
}
für (var i = x1; i <= x2; i++) {
x = ich;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
a(x, y, Farbe);
}
}
//Zeile(1,1,100,100,"000000");
Zeile(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,
getTop(td1) + td1.offsetHeight, '#000000');
Zeile(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,
getTop(td2) + td2.offsetHeight, '#000000');
</Skript>
</BODY>
</HTML>Okay, ich habe die fünf Methoden erklärt. Ich hoffe, sie werden Ihnen beim Lernen helfen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. |
<<: Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL
>>: CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion
Artikel empfehlen
Detaillierte Erklärung der Funktionsweise von Nginx
So funktioniert Nginx Nginx besteht aus einem Ker...
HTML+CSS3-Code zur Realisierung des Animationseffekts der Planeten des Sonnensystems
Erstellen Sie eine Animation der acht Planeten de...
MySQL-Abfrage-Cache und Pufferpool
1. Caches - Abfrage-Cache Die folgende Abbildung ...
Lösen Sie das Problem, dass Bilder und andere Ressourcen nach der erneuten Bereitstellung von Tomcat automatisch gelöscht werden
Gestern, als ich die Funktion zum Hochladen von B...
Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse
Standardmäßig unterstützt Nginx nur ein SSL-Zerti...
Empfehlen Sie 60 Paging-Fälle und bewährte Vorgehensweisen
<br />Struktur und Hierarchie reduzieren die...
Detaillierte Erläuterung zur Konfiguration des Beispielcodes für den Nginx-Webserver
Überblick Heute werden wir hauptsächlich erläuter...
Detaillierte Erläuterung der Ein- und Ausgabeverwaltung des Linux-Systems und der allgemeinen Funktionen von vim
####Verwaltung der Ein- und Ausgaben im System###...
Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers
In diesem Artikelbeispiel wird der spezifische Co...
Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung
Hintergrund Kürzlich habe ich während eines Onlin...
Einführung in die Verwendung gängiger XHTML-Tags
Es gibt viele Tags in XHTML, aber nur wenige werd...
MariaDB-Serverinstallation der MySQL-Reihe
Inhaltsverzeichnis Tutorial-Reihe 1. Installieren...
Eine detaillierte Einführung in die drei Installationsmethoden von RPM, Yum und Quellcode unter Linux
Kapitel 1 Installation des Quellcodes Die Install...
Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache
Einführung in die dynamische und statische Trennu...
Grundsätze für die Bereitstellung und Konfiguration mehrerer Tomcat-Instanzen
1. Schalten Sie die Firewall aus und übertragen S...