Heim > Artikel > Web-Frontend > Beim CSS-Layout sind einige Punkte zu beachten

Beim CSS-Layout sind einige Punkte zu beachten

php中世界最好的语言Original: 2017-11-20 17:07:181720Durchsuche

Das Layout einer Webseite hat einen erheblichen Einfluss auf die Benutzererfahrung und das Baidu-Ranking. Egal wie gut der Inhalt Ihrer Website ist, er ist nutzlos, solange das Layout schlecht ist Sie können Ihrer Webseite nicht einfach nebenbei Bilder hinzufügen. Erst nach der Analyse der Bilder können Sie ein gutes CSS-Layout erstellen.

Das Layout macht einen großen Teil der Analyse aus. Wenn wir Webseiten-Kunstbilder analysieren, analysieren wir nicht, ob die Bilder gut aussehen, sondern analysieren die Kunstbilder der Webseite basierend auf dem CSS-Layout Die CSS-Layoutanalyse wirkt sich direkt auf die zukünftige CSS-Rekonstruktion von HTML aus. Ob die Seite einfach zu schreiben ist, ist ein Schritt.

Layout-Kenntnisse:

DIV+CSS-Layout, CSS-Layout ist die Sammelbezeichnung für Webseiten (HTML), die durch div-Tags + CSS-Stylesheet-Code entwickelt und produziert 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 verwenden die DIVCSS5-Listenseite, um das CSS-Layout zu analysieren:

Zuerst können wir unser DIV-CSS-Layout analysieren und rekonstruieren Sie diese Seite. Der strukturelle Rahmen besteht, wie wir sehen können, aus der oberen, mittleren und unteren Struktur, einschließlich der linken und rechten Struktur.

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面-www.divcss5.com.cn</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>
index .css的CSS代码如下：

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 Kunstseite entwerfen und dann entsprechend jedem Inhalt weiterhin CSS- und HTML-Quellcode hinzufügen.

Über CSS-Layout_div CSS-Layout ist so wichtig, ich hoffe, es wird Ihnen hilfreich sein. Die oben genannten Fälle werden nicht im Detail erklärt. Ich hoffe, dass Sie Ihre Fähigkeiten nur durch Üben verbessern können.

Verwandte Lektüre:

Ultraleichtes Web-Flow-Layout-JS-Plug-in Macy.js

Detaillierte Erläuterung des Flex-Layouts in CSS3

Detaillierte grafische Erklärung von Layout-Tags und Listen-Tags in HTML

Das obige ist der detaillierte Inhalt vonBeim CSS-Layout sind einige Punkte zu beachten. 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：Tutorial zur Verwendung von CSS zur Implementierung der Pause- und Wiedergabefunktionen von CSS-AnimationenNächster Artikel：Tutorial zur Verwendung von CSS zur Implementierung der Pause- und Wiedergabefunktionen von CSS-Animationen

In Verbindung stehende Artikel

Mehr sehen