CnBlogs - Teilen im benutzerdefinierten Blogstil

CnBlogs - Teilen im benutzerdefinierten Blogstil

Nachdem ich die halbe Nacht daran gearbeitet hatte, gelang es mir endlich, den Stil des Blogs grob fertigzustellen.

Der gesamte Blog ist in der Farbe Blau gehalten, was ziemlich leidenschaftlich ist und mir gefällt.

Noch frustrierender ist, dass sich sowohl das rechte Menü als auch das Hauptmenü im Layout „position:absolute“ befinden. Das Hinzufügen einer Fußzeile ist wirklich ekelhaft. Obwohl sie jetzt position:fixiert ist, wird sie definitiv einige Inhalte abdecken, wenn die Anzahl der Tags und Aufsätze zunimmt. Ich habe keine JS-Berechtigung, also lassen Sie es vorerst so.

1. Fußzeilencode: Der MyFooter-Teil fügt den Inline-CSS-Stil direkt ein. Ich bin zu faul, ihn zu ändern. Ich werde die Fußzeile nach einer Weile definitiv entfernen.


Code kopieren
Der Code lautet wie folgt:

<div id="myFooter" style="Position: fest; unten: 0px; Breite: 100 %; Höhe: 85px; Hintergrund: keiner, Scrollen wiederholen 0px 0px rgb(0, 120, 216);">
<p id="myFootText">Wissen verändert das Schicksal, Programmierer retten Leben</p>
<p id="myFootCopy">ohmygirl@2014</p>
</div>

2. Gleichzeitig werden die störenden Werbelinks und Werbebanner am Ende des Artikels entfernt. Es sieht viel sauberer aus. Der CSS-Code lautet:


Code kopieren
Der Code lautet wie folgt:

/* werben */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
Breite: 0;
Höhe: 0;
Anzeige: keine;
Überlauf: versteckt;
}

3. Der Kommentar-Button am unteren Ende des Artikels ist in seiner Position und Größe ungünstig platziert, er steht zu weit links und die anklickbare Fläche ist zu klein. Hier sind zusammen gepostet:


Code kopieren
Der Code lautet wie folgt:

#RecentCommentsBlock li {
Rand: 0;
Breite: 275px;
}
#RecentCommentsBlock li.recent_comment_body {
Randradius: 0;
Rand: 0;
}
#RecentCommentsBlock li.recent_comment_title {
Rahmenradius: 5px 5px 0 0;
Rand: 3px 0 0;
}
#RecentCommentsBlock li.recent_comment_author {
Rahmenradius: 0 0 5px 5px;
Rand: 0;
}
.desc_img{
Breite: 75px;
maximale Breite: 75px;
}

#Blog-Kalender{
Hintergrund: weiß;
}

/* Kommentar */
div.Kommentarformular{
Rand unten: 100px;
}
#Kommentarformulartitel {
Hintergrund: URL("<a href="http://static.cnblogs.com/images/icon_addcomment.gif">http://static.cnblogs.com/images/icon_addcomment.gif</a>") kein wiederholtes Scrollen 0 2px;
Farbe: #0078d8;
Schriftgröße: 14px;
}
div.Kommentarform p{
Rand unten: 10px;
}
.comment_btn {
Höhe: 35px;
Breite: 90px;
Hintergrund: keine Wiederholung, Scrollen 0 0 #0078d8;
Rand: 0 keine;
Rahmenradius: 5px;
Farbe: weiß;
Cursor:Zeiger;
}
.comment_btn:hover{
Hintergrund: #317ef3;
}
#commentbox_opt,#commentbox_opt + p {
Textausrichtung: zentriert;
}
#tbCommentBody{
Breite: 100 %;
Größenänderung: keine;
}
#tbCommentAuthor,#tbCommentBody{
Rand: 1px durchgezogen #0078d8;
}
#tbCommentBody:hover{
Rand: 1px durchgezogen #fca021;
}
#Kommentare > h3 {
Hintergrund: keine Wiederholung, Scrollen 0 0 #0078d8;
Rahmenradius: 3px;
Farbe: weiß;
Polsterung: 8px;
Grenze:0 keine;
Schriftgröße: 14px;
}
#Kommentare{
Schriftgröße: 13px;
}
#Kommentare h4{
Rand oben: 10px;
}
#Kommentare h4 span {
Farbe: #6c6351;
Schriftgröße: 12px;
}
.Kommentaraktionen {
Rahmen unten: 1px gestrichelt #0078d8;
Anzeige: Block;
Polsterung unten: 10px;
}
.blog_comment_body {
Farbe: #111;
Schriftgröße: 13px;
Rand unten: 10px;
Rand oben: 10px;
}
#Kommentarnavigation {
Schriftgröße: 14px;
Rand oben: 10px;
Textausrichtung: rechts;
}

Abschließend lautet der CSS-Code für das Blog-Thema:


Code kopieren
Der Code lautet wie folgt:

/* Kopfzeile */
#header{
Rand: 1px durchgezogen #044e97;
Hintergrund: #0078d8 wiederholen;
Kastenschatten: 0 0 5px;
}
h1{
Hintergrund: keiner;
Rahmen unten: 0 keine;
}
#hauptsächlich{
Rand oben: 5px;
Rand rechts: 0 keine;
Mindesthöhe: 1040px;
}
#Header1_HeaderTitle{
Farbe: weiß;
Schriftstärke: fett;
Schriftgröße: 24px;
Textschatten: 1px 5px 1px #000;
}
#Header1_HeaderTitle:hover{
Farbe: #fca021;
}
#Slogan{
Farbe: weiß;
}
p.Datum{
Hintergrund: keine Wiederholung, Scrollen 0 0 #0078d8;
Rahmen unten: 1px durchgezogen #aaa;
Rahmenradius: 5px;
Farbe: weiß;
Schriftgröße: 14px;
Schriftstärke: fett;
Rand: 10px 10px 0 50px;
Polsterung: 10px;
}
.postFoot, p.postFoot{
Polsterung unten: 2px;
Rahmen unten: 1px durchgezogen #0078d8;
}
.postTitle{
Polsterung: 5px 0;
}
.postTitle a{
Schriftgröße: 15px;
Polsterung: 2px 0;
}
.post h2{
Rahmen unten: 1px gestrichelt #0078d8;
Schriftgröße: 1em;
Rand oben: 10px;
Polsterung: 0 0 10px;
}
.c_b_p_desc_readmore:hover{
Farbe: #faa123;
}
#cb_post_title_url{
Schriftgröße: 18px;
}
#MeineSignatur{
Rand: 1px gestrichelt #0078d8;
Anzeige: Block;
Polsterung: 5px;
}
#grüner_kanal{
Rand: 1px gestrichelt #0078d8;
}

/* rechtes Menü */
#rechtesMenü{
Rand: 1px durchgezogen #0078d8;
Hintergrund: #0078d8;
Rahmenradius: 10px;
}
#rechtesMenü ul{
Hintergrund: weiß;
}
#rechtesMenü li{
Hintergrund: keine Wiederholung, Scrollen 0 0 #3385ff;
Rand: 1px durchgezogen #3385ff;
Rahmenradius: 5px;
Farbe: weiß;
Rand: 10px;
Polsterung: 5px;
Breite: 150px;
}
#rechtesMenü li a{
Farbe: weiß;
Polsterung links: 10px;
}
#rechtesMenü li:hover{
Hintergrund: #317ef3;
}
#rechtesMenü h3{
Farbe: weiß;
Polsterung: 2px 0 5px 10px;
Schriftgröße: 18px;
Grenze:0 keine;
}

#Blog-Kalender{
Hintergrund: weiß;
}
div.Kommentarformular{
Rand unten: 100px;
}
/* werben */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
Breite: 0;
Höhe: 0;
Anzeige: keine;
Überlauf: versteckt;
}

/* Kalender */
.Cal{
Grenze:0 keine;
Breite: 100 %;
Höhe: 200px;
Schriftgröße: 14px;
}
.CalTitle{
Schriftgröße: 15px;
}
.CalTodayDay{
Hintergrund: #0078d8;
}
.CalTodayDay au{
Farbe: #fc6700;
Textdekoration: keine;
}

<<:  Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

>>:  Linux-Systemreparaturmodus (Einzelbenutzermodus)

Artikel empfehlen

Eine kurze Diskussion zum CSS-Höhenkollapsproblem

Leistung Zum Beispiel: HTML: <div Klasse="...

So ändern Sie die Ali-Quelle in Ubuntu 20.04

Beachten Sie, dass dieser Artikel Ihnen nicht ein...

Informationen zur Installation des Python3.8-Images im Docker

Offizielle Docker Hub-Website 1. Suchen Sie nach ...

SQL GROUP BY ausführliche Erklärung und einfaches Beispiel

Die GROUP BY-Anweisung wird in Verbindung mit der...

CSS-Tutorial: CSS-Attribut-Medientyp

Eines der wichtigsten Merkmale eines Stylesheets ...

Zusammenfassung der allgemeinen Bedienungskenntnisse der MySQL-Datenbank

Dieser Artikel fasst gängige Betriebstechniken fü...

Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue

Inhaltsverzeichnis 1. Was ist eine benutzerdefini...

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

1. Erstellen Sie eine neue virtuelle Maschine in ...

Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers

Inhaltsverzeichnis Containerhierarchie Der Prozes...

Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Inhaltsverzeichnis Projekterstellung Projektstruk...

Ausführliches Tutorial zur Installation von mysql 5.6.23 winx64.zip

Eine ausführliche Dokumentation zur Installation ...

MySQL-Speicherung räumlicher Daten und Funktionen

Inhaltsverzeichnis 1. Datentyp 1. Was sind MySQL-...

Zusammenfassung der Vue3-Slot-Nutzung

Inhaltsverzeichnis 1. Einführung in den V-Slot 2....