Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Beispiel für das Zuschneiden einer Webseite von PSD in Div CSS

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Schritt 1: Setzen Sie zunächst die inneren und äußeren Ränder aller Tags auf 0. Tatsächlich gibt es eine andere Möglichkeit, sie gemäß den in BODY verwendeten HTML-Tags auf 0 zurückzusetzen. Sie können auch * verwenden, um zuerst auf 0 zurückzusetzen und dann gemäß den in BODY verwendeten Tags zurückzusetzen. Wenn wir beispielsweise div, p im BODY-Tag verwenden, kann unser Selektor body, div, p sein. Sie müssen kein * schreiben.

Code kopieren
Der Code lautet wie folgt:

*{
Rand: 0px;
Polsterung: 0px;
}

Schritt 2: Implementieren Sie den Gesamthintergrund unserer Webseite. Der gewünschte Inhalt wird zentriert und der Hintergrundverlauf füllt immer den Bildschirm aus.
In diesem Fall können wir dem Textkörper ein Hintergrundbild hinzufügen. Stellen Sie einfach sicher, dass es horizontal gekachelt ist.

Code kopieren
Der Code lautet wie folgt:

Körper{
Hintergrund:URL(Bild/bj.jpg) Wiederholung-x;
}

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Schritt 3: Durch Beobachtung können wir unsere Webseite zunächst in fünf Teile aufteilen und dann den entsprechenden HTML-Code für sie schreiben
HTML Quelltext:

Code kopieren
Der Code lautet wie folgt:

<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main"></div>
<div id="Fußzeile"></div>

Durch die PS-Messung wissen wir, dass diese fünf Teile eine Breite von 950 einnehmen und zentriert sind. Wir können den Gruppenselektor verwenden, um diese fünf DIVs zuerst zu zentrieren.

Code kopieren
Der Code lautet wie folgt:

#Kopfzeile,#Navigation,#Banner,#Haupt,#Fußzeile{
Rand: 0px automatisch;
Breite: 950px;
}

Schritt 4: Füllen Sie zuerst die Kopfzeile aus
LOGO: Im Allgemeinen gibt es für diesen Teil zwei Anforderungen. 1. Durch Klicken auf das LOGO gelangen Sie zur Homepage der Website zurück. 2. Auf SEO achten? Daher haben wir den folgenden HTML-Code verwendet:
<h1><a href="#">Beijing Jiefei CSS-Webseiten-Schnittkarte</a></h1>
Wie implementiert man also CSS-Codierung?
Jeder kann sich ja erstmal Gedanken machen. Schauen Sie sich dann den CSS-Code an, den ich unten geschrieben habe. Tatsächlich wird hier die CSS-Technik zum Ersetzen von Wörtern durch Bilder verwendet. Der CSS-Code lautet wie folgt

Code kopieren
Der Code lautet wie folgt:

#header h1 a{
Hintergrund:URL(Bild/Logo.jpg);
Breite: 476px;
Höhe: 102px;
Anzeige:Block;
Texteinzug: -9999px;
}

Gut. Lassen Sie uns nun die rechte Seite der Kopfzeile fertigstellen. Beginnen wir mit dem Schreiben des HTML-Codes.

Code kopieren
Der Code lautet wie folgt:

<ul>
<li><a href=" #">Schulung zum Zuschneiden von CSS-Bildern</a></li>
<li><a href=" #">Als Startseite festlegen</a></li>
<li><a href=" #">Zu Favoriten hinzufügen</a></li>
</ul>

CSS Code:

Code kopieren
Der Code lautet wie folgt:

#header h1{
schweben: links;
}

Wir beginnen, indem wir H1 nach links schweben lassen. Auf diese Weise kann der UL-Teil auf der rechten Seite in der gleichen Branche angezeigt werden.

Code kopieren
Der Code lautet wie folgt:

#header ul{
schweben: links;
Polsterung: 50px 0px 0px 200px;
Listenstil: keiner;
}

Um Probleme zu vermeiden, können Sie UL auch schweben lassen. Sie können versuchen, festzustellen, ob das Floating in jeder IE-Version nicht festgelegt ist und die Leistung in Firefox konsistent ist.

Code kopieren
Der Code lautet wie folgt:

#header ul li{
schweben: links;
Polsterung: 0px 10px;
}
Der obige Code funktioniert einwandfrei in Firefox und IE8, wird aber in IE6 Probleme bereiten. Wir werden dies später erklären.
#header ul li a{
Farbe: Nr. 555;
Textdekoration: keine;
Schriftgröße: 13px;
}
#header ul li a:hover{
Farbe: #000;
Textdekoration: Unterstreichen;
}

Das Ergebnis zu diesem Zeitpunkt wird wie folgt angezeigt:

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Schritt 5: Vervollständigen Sie den Navigationseffekt. Effektbeschreibung: Wenn Sie mit der Maus über den Hintergrund fahren, wird dieser hellblau und der Effekt der aktuellen Seite wird erzeugt.
HTML Quelltext:

Code kopieren
Der Code lautet wie folgt:

<ul>
<li><a href=" #">Startseite</a></li>
<li><a href=" #">Website-Design</a></li>
<li><a href="#>Website-Design</a></li>
<li><a href="#">Büroschulung</a></li>
<li><a href="#">Jobs im Bereich Grafikdesign</a></li>
<li><a href="#">Div-CSS-Schulung</a></li>
<li><a href="#">Kontaktieren Sie uns</a></li>
</ul>

Das direkte Schreiben des Navigationscodes verursacht jetzt ein Problem. Wenn Sie etwas über Boxmodelle und Floats gelernt haben, sollten Sie es wissen.
Der Navigationstext wurde auf die rechte Seite der Kopfzeile verschoben. Wie kann man das Problem lösen?
Tatsächlich ist es an der Zeit, dass unser universeller Clear Float funktioniert.
CSS Code

Code kopieren
Der Code lautet wie folgt:

.klar{
klar: beides;
}

Zu diesem Zeitpunkt für uns <div id="nav"></div>
Es wird <div id="nav" class="clear"></div>
Sehen wir uns nun an, ob das oben genannte Problem gelöst wurde. Tatsächlich tritt dieses Problem nicht auf, wenn Sie die Berechnung nach dem Standard-Boxmodell durchführen und die Berechnung ordnungsgemäß durchführen.
Vervollständigen Sie den CSS-Stil der Navigation

Code kopieren
Der Code lautet wie folgt:

#nav{
Polsterung oben: 3px;
}
#nav ul{
Listenstil: keiner;
}
#nav ul li{
schweben: links;
}

Standardmäßig nimmt li die gesamte Zeile ein und wird daher durch Schweben nach links in einer Zeile angezeigt. Stellen Sie dann den Zustand von A ein, um das gewünschte Ergebnis zu erzielen. Lassen Sie uns testen: Lassen Sie LI Breite und Höhe haben und stellen Sie dann den Hintergrund von A ein. Können wir unseren gewünschten Effekt erzielen und verhindern, dass A zu einem Block wird?

Code kopieren
Der Code lautet wie folgt:

#nav ul li a{
Anzeige:Block;
Breite: 135px;
Höhe: 56px;
Zeilenhöhe: 56px;
Farbe: #fff;
Textausrichtung: zentriert;
Textdekoration: keine;
Schriftgröße: 14px;
}

display:block; macht Element A blockförmig, sodass wir die Breite und Höhe des Hintergrunds dafür festlegen können. Ein weiterer wichtiger Punkt ist hier line-height:56px, was einer Höhe von 56px entspricht. Welcher Effekt kann erzielt werden? Studenten, denkt darüber nach?

Code kopieren
Der Code lautet wie folgt:

#nav ul li a:hover{
Hintergrund: #177cb7;
}

Nun ist unsere Navigation grundsätzlich fertig, allerdings fehlt uns noch ein Navigationseffekt für den aktuellen Stand. Was sollte ich tun?
Tatsächlich ist es sehr einfach, dem A-Link der aktuellen Seite ein Tag mit der ID „current“ hinzuzufügen. wie folgt:

Code kopieren
Der Code lautet wie folgt:

<a href="#" id="current">Startseite</a>

Dann stimmt dieser Status mit dem Mouseover-Status überein, es ist also sehr einfach. Fügen Sie einfach nach dem Mouseover-Status einen #nav ul li a#current-Selektor hinzu. Bist du fertig?
Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Schritt 6: Bannerbild zur Produktwerbung. Bei Unternehmenswebsites handelt es sich normalerweise um eine Animation oder um JS/JQuery-Spezialeffekte. Jetzt lass uns einfach ein Bild einfügen

Code kopieren
Der Code lautet wie folgt:

<img src="image/banner.jpg" height="184" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image005.jpg" width="127" />

HTML-Code für die rechte Navigation:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Untermenü">
<h5>Schulungskurse</h5>
<ul>
<li><a href=" #">Startseite</a></li>
<li><a href="# ">Website-Design</a></li>
<li><a href="# ">Website-Design</a></li>
<li><a href="# ">Website-Design</a></li>
<li><a href="# ">Website-Design</a></li>
<li><a href="# ">Div-CSS-Schulung</a></li>
<li><a href="# ">Div-CSS-Schulung</a></li>
<li><a href="#l">Kontaktieren Sie uns</a></li>
</ul>
</div>

CSS-Code: Die folgenden Codes wurden im obigen Produktionsprozess erwähnt. Ich gebe es also einfach direkt heraus, ohne es zu erklären.

Code kopieren
Der Code lautet wie folgt:

#hauptsächlich{
Polsterung: 10px 0px;
}
#main .container{
Breite: 674px;
Rand rechts: 50px;
schweben: links;
}
#main .subMenu{
Breite: 226px;
schweben: links;
Rand unten: 10px;
}
#main .subMenu h5{
Hintergrund: #19577c;
Höhe: 39px;
Textausrichtung: zentriert;
Farbe: #fff;
Schriftgröße: 15px;
Zeilenhöhe: 39px;
}
#main .subMenu ul li{
Rahmen unten: 1px durchgezogen #d4d4d4;
Hintergrund: #f1f1f1;
}
#main .subMenu ul li a{
Anzeige:Block;
Farbe: #000;
Höhe: 36px;
Zeilenhöhe: 36px;
Textdekoration: keine;
Polsterung links: 60px;
Hintergrund: URL (Bild/li.jpg) keine Wiederholung 40px 50 %;
}
#main .subMenu ul li a:hover{
Farbe: #177cb7;
Hintergrund: URL (Bild/li3.jpg) keine Wiederholung 40px 50 %;
}

Schritt 8: Codieren des Hauptinhaltsbereichs: Anhand des obigen Bildes können Sie sich zunächst Gedanken darüber machen, wie Sie HTML schreiben. Ich verwende die DLDD-Methode. Jeder muss lernen, wie man dieses Zeichen verwendet. Es ist sehr gebräuchlich und wird oft bei der Beschreibung von Produkten verwendet.
Schauen wir uns nun den HTML-Code an:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Neuigkeiten">
<dl Klasse="xuexiao">
<h5>Schulvorstellung<a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image006.jpg" width="488" />
<!--[wenn IE 6]>
<![endif]-->

Der obige Code bedeutet, dass nur IE6 ihn erkennen kann. Auf diese Weise können wir die Stile nur für IE6 bearbeiten.

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 6]>
<Stiltyp "Text/CSS">
#header ul li{
Breite: 80px;
schweben: links;
Polsterung: 0px 10px;
}

Breitenwert der rechten Kopfzeile

Code kopieren
Der Code lautet wie folgt:

#main .container dl dt img{
Rand: 1px durchgezogen #ccc;
}
#main .container dl.xuexiao dt{
schweben: links;
Breite: 110px;
}
#main .container dl.xuexiao dd{
Schriftgröße: 12px;
Rand links: 20px;
schweben: rechts;
Breite: 145px;
Texteinzug: 2em;
}
#Fußzeile{
Rand oben: -10px;
}
</Stil>
<![endif]-->

Es sind auch einige andere Kenntnisse damit verbunden. Dies wird in den nachfolgenden Kursen erläutert.

<<:  HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

>>:  Erfahren Sie, wie Sie den JVM-Speicher von Tomcat über JConsoler überwachen

Artikel empfehlen

Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen

Was sind Slots? Die Slot-Direktive ist v-slot, di...

Sind Sie immer noch Select *?

Es gibt viele Gründe, warum eine Anwendung langsa...

So legen Sie den Rahmen einer Webseitentabelle fest

<br />Zuvor haben wir gelernt, wie man Zelll...

So kopieren Sie schnell große Dateien unter Linux

Daten kopieren Beim Remote-Kopieren von Daten ver...

Detailliertes Tutorial zur Installation von Python 3.8.1 unter Linux

Dieses Beispiel nimmt die Installation von Python...

Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)

Wenn Sie CSS verwenden, vergessen Sie nicht, DOCTY...

So konfigurieren Sie die CDN-Planung mit dem Modul Nginx_geo

Einführung in das Geo-Modul von Nginx Die Geo-Dir...

Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten

Heute ist das Springboot-Projekt des Unternehmens...

Nginx-Lastausgleichskonfiguration, automatischer Umschaltmodus bei Ausfallzeiten

Streng genommen verfügt nginx nicht über eine Int...

Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal

Hier sind zwei Terminal-Split-Screen-Tools: scree...

jQuery implementiert das Ausblenden und Anzeigen von HTML-Elementen

Lassen Sie uns die Funktion von Taobao nachahmen,...

Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 8.0.24

Dieser Artikel zeichnet die Installations- und Ko...

iview implementiert dynamische Formulare und eine benutzerdefinierte Überlappung der Überprüfungszeiträume

Formularelemente dynamisch hinzufügen Das dynamis...

So verwenden Sie SHTML-Includes

Durch die Anwendung können einige öffentliche Bere...

So installieren Sie PostgreSQL11 auf CentOS7

Installieren Sie PostgreSQL 11 auf CentOS 7 Postg...