Heim > Artikel > Web-Frontend > Welche Techniken gibt es für das CSS-Layout?

Welche Techniken gibt es für das CSS-Layout?

php中世界最好的语言Original: 2017-11-23 14:07:171938Durchsuche

Wie sollte CSS gestaltet sein? Auf welche Aspekte sollte bei der Gestaltung des CSS-Layouts geachtet werden? Welche Techniken gibt es für das CSS-Layout? Heute fassen wir sie einzeln für Sie zusammen. So erhalten Sie ein gutes CSS-Layout.

Jeder weiß, dass bei der Rekonstruktion der PS (Bilder) von Grafikdesignern durch CSS-Rekonstruktoren die Webseiten-Kunstbilder analysiert werden müssen. Nur durch eine gute Analyse kann ein CSS-Layout erreicht werden.

Daher spielt das DIV-CSS-Layout eine große Rolle bei der Analyse. Wenn wir Webseiten-Kunstbilder analysieren, analysieren wir nicht, ob die Bilder gut aussehen, sondern analysieren die Kunstbilder der Webseite Auf dem CSS-Layout wirkt sich die CSS-Layout-Analyse direkt auf zukünftiges CSS aus. Ein Schritt zur Rekonstruktion, ob die HTML-Seite einfach zu schreiben ist.

Layout-Kenntnisse:

DIV+CSS-Layout, CSS-Layout ist der Sammelbegriff für Webseiten (HTML), die mit div-Tags + CSS-Stylesheet-Code entwickelt und erstellt werden.

Vorteile des div+css-Layouts: einfach zu pflegen, vorteilhaft für SEO (Google nutzt die Geschwindigkeit beim Öffnen von Webseiten als Rankingfaktor und SEO-Faktor), die Geschwindigkeit beim Öffnen von Webseiten ist schneller und es entspricht Webstandards usw.

Denken Sie über das Layout nach, bevor Sie eine Div+CSS-Webseite erstellen:

Zuerst erhalten wir ein Webseiten-Kunstbild und gestalten es von oben nach unten, von oben nach Mitte und unten, von links und rechts Denken Sie über den Rahmen von oben bis in die Mitte (einschließlich links und rechts) nach.

Das Folgende ist ein Beispiel zur Erläuterung der CSS-Layout-Analyse. Wir analysieren das CSS-Layout mit einer Listenseite:

Zuerst können wir unser DIV-CSS-Layout analysieren und das rekonstruieren Seitenstruktur Wir können sehen, dass der Rahmen obere, mittlere und untere Strukturen hat, einschließlich linker und rechter Strukturen.

Daher sollten wir beim Schreiben des CSS und HTML dieser Seite zuerst CSS und HTML von oben nach unten und von außen nach innen schreiben.

Wir erstellen zunächst einen Webordner und erstellen in diesem Ordner eine neue HTML-Seite mit dem Namen index.html und eine CSS-Datei mit dem Namen index.css. Der Trick hier besteht darin, die Vorlage zu importieren, um die CSS- und HTML-Startseite zu erstellen, und dann die CSS-Datei auf den HTML-Code zu verweisen, der die CSS-Vorlage ist, die ich in der Vorlage eingeführt habe, und dann CSS basierend auf der CSS-Vorlage zu schreiben und hinzuzufügen.

Das Folgende ist der HTML-Code von index.html:

Das Folgende ist der zitierte Inhalt:

<!DOCTYPE "> 
<html "> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面</title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="header">我是头部（上）</div> 
<div id="centers"> 
<div class="c_left">我是中的左</div> 
<div class="c_right">我是中的右</div> 
<div class="clear"> </div> 
</div> 
<div id="footer">我是底部（下）</div> 
</body> 
</html>

Der CSS-Code von index.css lautet wie folgt:

Das Folgende ist der zitierte Inhalt:

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} 
ol, ul ,li{list-style: none;} 
img {border: 0;} 
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} 
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} 
.clear{clear:both;height:1px; margin-top:-1px; width:100%;} 
.dis{display:block;} 
.undis{display:none;} 
/*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/ 
#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} 
#header{ height:68px; border:1px solid #CCCCCC; } 
#centers{ padding:8px 0;} 
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} 
#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } 
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}

Sie können diese beiden Codeteile ausprobieren und einen neuen erstellen. Wir werden das CSS- und HTML-Framework der oben genannten Kunst entwerfen Seite, und fügen Sie dann CSS- und HTML-Quellen entsprechend jedem Inhalt hinzu.

Ich glaube, jeder versteht bereits die Bedeutung und Erklärung des CSS-Layouts. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

HTML-Tabellenstil

So verwenden Sie Min-Height und Max-Height in CSS

So zeigen Sie kreisförmige Bilder in CSS3 an

Das obige ist der detaillierte Inhalt vonWelche Techniken gibt es für das CSS-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So legen Sie das Hintergrundbild einer Webseite in HTML festNächster Artikel：So legen Sie das Hintergrundbild einer Webseite in HTML fest

In Verbindung stehende Artikel

Mehr sehen