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
Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container
Wenn Sie Docker verwenden, suchen Sie in Docker n...
Der einfachste Weg, das MySQL-Root-Passwort zurückzusetzen
Meine MySQL-Version ist MySQL V5.7.9, bitte verwe...
Vue implementiert dynamische Routingdetails
Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...
So verwenden Sie Web-Frontend-Vektorsymbole
Vorwort Beim Schreiben von Frontend-Seiten verwen...
So erstellen Sie eine lnmp-Umgebung im Docker
Erstellen eines Projektverzeichnisses mkdir php E...
Einführung in neue ECMAscript-Objektfunktionen
Inhaltsverzeichnis 1. Objekteigenschaften 1.1 Att...
So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)
Konfigurationsanweisungen Linux-System: CentOS-7....
MySQL-Abfrage-Cache und Pufferpool
1. Caches - Abfrage-Cache Die folgende Abbildung ...
Lösung für MySQL-Replikationsfehler aufgrund voller Festplatte
Inhaltsverzeichnis Fallbeispiel Lösung des Proble...
So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL
Das MySQL-Protokoll für langsame Abfragen ist seh...
Lösung für das Problem mit sicheren Dateiprivilegien beim Exportieren von MySQL-Daten
FEHLER 1290 (HY000) : Der MySQL-Server wird mit d...
So verwenden Sie das Realip-Modul im Nginx-Grundlagenlernen
Vorwort Es gibt zwei Arten von Nginx-Modulen: off...
React implementiert die Erweiterungs- und Reduzierfunktion komplexer Suchformulare
Geben Sie der Zeit Zeit und lassen Sie die Vergan...
Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite
Der Originalcode lautet: <div Klasse = "K...
Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes
Da das Distributionspaket von MySQL Community Ser...