Zusammenfassung der Erfahrungen mit statischen HTML5+CSS3-Seitenprojekten

Ich beschäftige mich schon seit einiger Zeit mit Frontend und lese theoretisches Wissen in Büchern, aber es gibt nur sehr wenige praktische Projekte. Der ältere Bruder sagt oft: Wenn Sie wissen möchten, wie viel Kraft Sie haben und wie viel Wissen Sie beherrschen, ist es am besten, durch Übung wahres Wissen zu erlangen. Deshalb beschloss ich, dass ich in diesen Ferien mein Programmierniveau hauptsächlich durch die Praxis von Projekten und die Unterstützung durch theoretisches Wissen verbessern würde. Der erste Schritt besteht darin, einige Übungen zum statischen HTML5+CSS3-Seitenlayout durchzuführen, nach fehlenden Wissenspunkten zu suchen und einige während der Übung aufgetretene Fehler zusammenzufassen. Der Designentwurf der Seite wurde hauptsächlich im Internet gefunden. Ich habe auch versucht, das Bild auszuschneiden, die Position zu messen, die Attribute des Inhalts usw. zu ermitteln und so zu tun, als würde ich wirklich ein Projekt abschließen.

Die erste Seite wurde von der Plattform Design Master gefunden. Das Seitendesign auf dieser Plattform empfiehlt hauptsächlich ausländische Designs und einige Webdesign-Tutorials sind relativ prägnant und großzügig. Im Vergleich zu Seiten im chinesischen Stil mit explosivem Inhalt schätze ich auch ausländische Designs.

Die Darstellungen des Designs sind wie folgt:

Design Die Seitenbreite des Manuskripts beträgt 1550 Pixel und der Hauptteil der Seite ist ein 12-spaltiges Rasterlayout mit 960 Pixeln. Die Gesamtbreite des Designs übersteigt die Breite des Darstellungsfensters des Browsers bei weitem. Da es sich also um eine statische Seite handelte und ich kein responsives Design verwendet habe, habe ich alle Breiten und Höhen in der statischen Größe festgelegt. Verwenden Sie das div-Element, um die Breite auf 960 Pixel und das Randattribut auf 0 Pixel automatisch festzulegen. Dadurch wird sichergestellt, dass der Hauptinhalt der Seite im Browserfenster zentriert ist und Sie sich nicht mehr um die Gesamtbreite kümmern müssen Seite.

Mein wiederhergestelltes Bild ist:

Siehe Beim Entwerfen Die PSD sieht ungefähr so ​​aus: Zuerst gibt es einen Navigationsleisten-Header, der zwei Navigationsleisten, eine Eingabeleiste und ein Logobild enthält Schaltflächenartige Verbindungen; der nächste Schritt ist der Hauptinhalt der Webseite, der drei Module mit demselben Layout enthält. Der Inhalt umfasst Bilder, Titel, Absätze und einen Link, außerdem gibt es unten eine Reihe von Navigationslinks ; und schließlich die Seite. Die Fußzeile enthält eine Zeile mit Navigationslinks und zwei Textabsätze.

Basierend auf dieser Idee begann ich auch mit dem Aufbau des Grundgerüsts der Seite, das in vier Teile unterteilt ist: Kopfzeile, Abschnitt, Hauptzeile und Fußzeile. Schreiben Sie die erforderlichen Tags entsprechend dem Inhalt jedes Teils und fügen Sie nach Bedarf Klassenattribute hinzu. Der nächste Schritt besteht darin, den Seiteninhalt nach und nach für jeden Teil zu vervollständigen und Stile mithilfe von CSS3 hinzuzufügen. Siehe meine ausführliche Erklärung unten.

---

1. Kopfzeilenteil

Das obige ist das fertige Bild von Die Kopfzeile ist zunächst in zwei Teile unterteilt. Die erste Zeile verwendet Navigations-Tags zum Einfügen von Links und zwei Eingabefelder. Die Eingabefelder werden mit abgerundeten Ecken versehen. Nicht besonders taktvoll. Die vertikalen Linien auf beiden Seiten des Links sind mit farbigen Rändern versehen. Die Navigation in der nächsten Zeile besteht darin, eine ungeordnete Liste zu verwenden und die Eigenschaft „float“ auf „left“ zu setzen, damit sie nach links schwebt. Das Logobild ist das Ergebnis des Ausschneidens der Designzeichnung. Der Fehler besteht darin, dass im Film nach der Verlinkung ein kleines Dreieck als Zeichen für einen sekundären Link zu sehen ist. Ich habe es nicht hinzugefügt, weil ich faul (schuldig) war . Der detaillierte HTML-Code lautet wie folgt:

<header>                 <nav class="firstnav"><div class="headerlimit"> <a href="#" class="firstnav1">Business</a><a href="#" class="firstnav2">Personal</a><input type="text" name="email" placeholder="  Leave your email" class="inputcase1" /><input type="text" name="omit" palaceholder="……" class="inputcase2" /></div><nav class="secondnav"> <div class="headerlimit"> <img src="images/Logo.png" /><div class="headnav"><ul><li><a href="#">Buy</a></li><li><a href="#">Sell</a></li><li><a href="#">Manage</a></li></ul></div></div></nav>    </header>

　　其中遇到了一个问题是，图片和无序列表在浏览器中显示时分为了两行，查找了资料以后是使用div元素包含无序列表，并且设值margin和padding的值才使得两个元素在同一行中。无序列表表示链接的CSS代码如下：

.headnav {width: 280px;padding-left: 170px;margin-top: -70px;
}.headerlimit ul {list-style-type: none;padding-left: 0px;
}.headerlimit li a{text-decoration: none;border-left: 1px solid #fff;border-right: 1px solid #ebebeb;width: 90px;text-align: center;line-height: 25px;color: #68676a;float: left;font-family: PTSans;font-size: 14px;
}

二、Banner部分

　　背景的大图是使用background-img实现的，而在这个banner部分的设置中使用了position的定位方法，将所有的文字内容模块相对于背景模块的绝对定位，使得在缩小视口的时候，两个模块可以保持位置的不变形、不一位，position属性值也是CSS中很重要的一点。HTML代码和两个模块的绝对定位CSS代码如下：

<section class="banner"><div class="backimg"><div class="bannercontent"> <div class="bannerintr"> <h1>Paul makes your payments easy</h1> <p>With over 1 Billion users, paypal is simply the best way to pay</p> </div> <div class="button1"> <a href="#">  <p>Check this awesome button right here</p> </a> </div> <div class="button2"> <p>Sign up for a paypaul account today</p> <button><a href="#">Click here to join</a></button></div></div></div></section>

.bannercontent {width: 960px;margin: 0px auto;position: absolute;left: 10px;top: 25px;
}.backimg {width: 1055px;height: 415px;margin-left: 195px;background-image: url(../images/banner.png);position: relative;
}

三、Main部分

　　因为三个模块的布局是一模一样的，所以只要使用同一个class属性就能保证样式相同。图片和文字都处理都比较简单，没有特别需要指出的了，因此代码也省略了。

四、Footer部分

　　在footer部分，导航栏的部分同样是使用无序列表的方式，要注意的是，在设置的时候发现，因为无序列表中设置了向左浮动，因此会影响后面的两个段落在浏览器中的显示，需要使用clear: both; 清除两个段落的浮动，才能使得两个段落在导航栏的下方。问题产生和清除浮动的部分CSS代码如下：

.footernav li a{color: #fff;font-size: 12px;margin-right: 15px;margin-top: 35px;float: left;
}.footercontent {width: 960px;margin: 0px auto;padding: 25px 0px;clear: both;
}

　

---

Natürlich werden Sie auch auf einige Probleme stoßen, wenn Sie diese statische Seite gemäß dem Designentwurf implementieren, z. B. die Kenntnis der Größe und Größe jeder Seite Element. Der Abstand zwischen Leerzeichen, die Größen- und Farbattribute von Schriftarten usw. sind sehr problematische Vorgänge (Beschwerden) . Das eigentliche Problem ist natürlich nicht das, sondern etwas, von dem Sie denken, dass es so aussehen sollte, aber wenn es im Browser angezeigt wird, ist das die Ursache für Kopfschmerzen. Daher haben wir während des Implementierungsprozesses auch einige aufgetretene Probleme erfasst und versucht, die Gründe und Lösungen herauszufinden.

1. Wenn Text und Bilder in derselben Zeile oder im selben div-Element angezeigt werden, wird der Browser in verschiedenen Zeilen ausgeführt.

Nach der Abfrage der Informationen wurden drei Lösungen angegeben:

①Setzen Sie in CSS die vertikale Ausrichtung für das div: middle; Dieses Div enthält Bilder und Text, sodass die Elemente im Div vertikal in der Mitte ausgerichtet werden können.

② Wenn es sich bei dem Bild um ein Hintergrundbild handelt, legen Sie das Bild mit „background-img“ fest und ändern Sie den Textabstand so, dass er sich in derselben Zeile befinden kann.

③Platzieren Sie das Bild und den Text in zwei Divs und legen Sie den Randwert fest. Dies ist die von mir verwendete Methode, die etwas umständlicher ist als die erste Methode.

2. Inline-Elemente unterstützen keine Rand- und Füllattributwerte in der oberen und unteren Richtung. Sie müssen die Zeilenhöhe verwenden, um sie zu ändern.

3. Elemente haben aus unerklärlichen Gründen oft zusätzliche Ränder. Dies ist eigentlich der Standardeffekt des Browsers. Diese Effekte müssen manuell gelöscht werden, bevor der CSS-Stil festgelegt wird. Beispielsweise verfügt die ungeordnete Liste ul über einen zusätzlichen linken Rand.

---

Zusammenfassung

Dabei habe ich vor langer Zeit auch das Projekt von Microsoft China nachgeahmt Zeit Wenn Sie Ihre Freizeit nutzen, um es fertigzustellen, haben Sie keinen Gesamtüberblick über die Struktur und das Layout und werden daher viel Energie aufwenden, um es fertigzustellen. Aber dies in den letzten zwei Tagen zu tun, wird nicht so anstrengend sein. Ich dachte, ich wäre sehr eingerostet, da ich das Codieren schon lange nicht mehr geübt habe, aber tatsächlich kenne ich immer noch die Wissenspunkte, die ich kenne und die mir immer noch fehlen Wissenspunkte, die ich nicht kenne, können das Verständnis und die Erinnerung an Wissenspunkte wirklich verbessern. Obwohl das Niveau immer noch nicht sehr hoch ist, bin ich sehr froh, dass ich Fortschritte gemacht habe und weiterhin hart arbeiten werde.

Ich werde die Implementierung statischer Seiten weiter üben, bis ich sehr kompetent bin, und dann werde ich anfangen, dynamische Seiten in JavaScript zu üben. Das war schon immer ein Tabu Trau dich, es zu versuchen! Machen Sie weiter so und bleiben Sie auf dem Laufenden!

Das gesamte Projekt, einschließlich der Designzeichnungs-PSD, des HTML-Codes und des CSS-Codes, ist auf Github. Ich hoffe, dass jemand, der bereit und fähig ist, auf meine Mängel hinweisen kann Ich hoffe, ich kann mit allen kommunizieren und gemeinsam Fortschritte machen!

Das obige ist der detaillierte Inhalt vonZusammenfassung der Erfahrungen mit statischen HTML5+CSS3-Seitenprojekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!