diese Seite EkaSunucu Es dient zum Testen der zentralen CSS-Datei, die von erstellt wurde. Alle wichtigen Komponenten werden auf der Seite angezeigt.
In diesem Beispiel Heldenbereich, Inhalte, Inhaltskarten und häufig gestellte Fragen Zu sehen sind Komponenten wie z.
Verwalten Sie alle Designelemente in einer einzigen Datei
Sorgt für ein makelloses Erscheinungsbild auf allen Geräten
Schnelle Seitenentwicklung mit vorgefertigten Komponenten
Aktualisieren Sie die gesamte Site mit der Aktualisierung einer einzelnen Datei
Mit Inhaltskarten können Sie Informationen auf organisierte und ästhetische Weise präsentieren. Jede Karte kann sich auf ein bestimmtes Thema konzentrieren und wichtige Informationen hervorheben.
Inhaltskarten verfügen über die folgenden Funktionen:
Benachrichtigungsboxen sollen Ihren Benutzern wichtige Informationen übermitteln. Sie können für verschiedene Arten von Benachrichtigungen unterschiedliche Farben verwenden.
Um komplexe Abläufe verständlicher zu machen, werden Schritt-für-Schritt-Anleitungen eingesetzt. Jeder Schritt ist nummeriert und optisch hervorgehoben.
Fügen Sie den folgenden Code zum Header-Bereich Ihrer Seite hinzu:
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css">
Dieser Code bindet die zentrale CSS-Datei in Ihre Seite ein.
Verwenden Sie beim Erstellen der Struktur Ihrer Seite die in dieser CSS-Datei definierten Klassen:
.hero-section Klasse verwenden.contents-card Klasse verwenden.content-section Klasse verwenden.content-card Klasse verwendenFür alle Icons wird Font Awesome verwendet. Beispielverwendung:
<i class="fas fa-info-circle"></i>
Suchen Sie in der Dokumentation zu Font Awesome nach den richtigen Symbolklassen.
Sie können CSS-Variablen für benutzerdefinierte Farbschemata oder Stile verwenden. Beispiel:
<body style="--primary-color: #FF5500; --secondary-color: #FF8844;">
Auf diese Weise können Sie das Farbschema Ihrer Seite ganz einfach ändern.
Die CSS-Datei definiert eine Reihe von Variablen für eine konsistente Farbverwendung auf der gesamten Website. Die grundlegenden Farbvariablen sind:
--primary-color: Ana renk--secondary-color: Sekundärfarbe--accent-color: Farbe hervorheben--text-color: Haupttextfarbe--text-secondary: Sekundäre Textfarbe--light-bg: Helle Hintergrundfarbe--card-bg: Hintergrundfarbe der KarteMithilfe dieser Variablen können Sie das Farbschema Ihrer gesamten Website von einem Ort aus ändern.
Die CSS-Datei definiert Schriftfamilien und -größen für eine konsistente Typografie:
--font-primary: Hauptschriftart (Inter)--font-secondary: Sekundärschriftart (Poppins)Für Titel font-family: var(--font-secondary) Für Text bei Verwendung font-family: var(--font-primary) verwendet wird.
Die CSS-Datei enthält umfassende Medienabfragen für verschiedene Bildschirmgrößen. Auf diese Weise sieht Ihre Website auf allen Geräten perfekt aus.
Optimiert für Geräte mit einer Bildschirmbreite von 1200 Pixel und mehr.
Optimiert für Geräte mit Bildschirmbreiten zwischen 768px und 1199px.
Optimiert für Geräte mit einer Bildschirmbreite von 767 Pixel und weniger.
Die am häufigsten gestellten Fragen und Antworten zur Verwendung von CSS-Dateien
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css"> Sie können die CSS-Datei einbinden, indem Sie den Code hinzufügen. Dadurch werden alle Stildefinitionen auf Ihre Seite angewendet. <body style="--primary-color: #FF0000; --secondary-color: #FF5555;">
<body style="--font-primary: 'Roboto', sans-serif; --font-secondary: 'Montserrat', sans-serif;"> Bedenken Sie jedoch, dass diese Schriftarten auf Ihrer Seite installiert sein müssen.