Layout planen, Gesamtstruktur aufteilen
Inhaltsbereich, vom Ganzen zum Teil, dem gemeinsamen Teil im Teil, je nach Kontext Stile anwenden
Öffentlicher Header (public-header), Tail (public-footer)
Public Container (public-container /inner-center)
CSS-Datei, HTML-Struktur, denken Sie mehr über
Don Lassen Sie nicht zu, dass Inline-Elemente und Blöcke Level-Elemente auf der gleichen Ebene sind
reset.css, common.css, index.css
Elemente die schweben müssen, die übergeordneten Elemente sind alle sauber, geben Sie einheitliche Klassen klar, beheben Sie
Breite und Höhe: Verwenden Sie gerade Einheiten.
Gute Codierungsstandards und Benennung
Nicht mehr als drei Benennungsebenen
Geniale Kombination von Attributen und Elementen, gibt es eine bessere Lösung?
Verwenden Sie Überlauf, um mit der Situation umzugehen, in der einige Bilder und Texte nicht ausgeblendet werden können .
Textüberlauf, der überschüssige Textteil wird mit Ellipsen angezeigt.
Ein Tag kann in beliebige p-, h-, div- und andere Tags verschachtelt werden (gemäß den neuen Spezifikationen wird es im Allgemeinen in derselben Gruppe von Titel-, Bild- und Textkombinationen angezeigt). usw., die auf denselben Ort verweisen. Daher sind große Link-Stile erforderlich, um zu Orten zu springen, was praktischer ist.
<a href="#" class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a>
Kompatibilität und Detailverarbeitung (vergrößern Sie mehr als 100 %, um die Hinweise zu sehen)
Reflexion Ob die HTML-Struktur angemessen ist
CSS-Hack-Verarbeitung
Bevor Sie beginnen
Wenn Sie noch nicht bereit sind, empfehlen wir Ihnen, den ersten Teil dieser Tutorial-Reihe zu Ende zu lesen
:
Verwenden Sie
Photoshop
, um eine kleine, moderne
Produkthomepage zu gestalten
,
weil der zweite Teil wird benötigt. Der erste Teil ist die fertige
psd
-Datei.
Wenn Sie den ersten Teil überspringen möchten, können Sie die Quelldatei direkt im ersten Teil herunterladen, Sie benötigen sie dazu Weiter unten.
Erstellen Sie die Dateistruktur und bereiten Sie die Datei vor
1
Erstellen Sie ein neues leeres Verzeichnis auf dem Desktop und nennen Sie es
Portfolio
.
2
in
Erstellen Sie weiterhin das Verzeichnis
Bilder
unter dem Verzeichnis Portfolio
zum Speichern von Bildern.
3
Als nächstes erstellen Sie zwei leere Dateien
styles.css
und
index.html
Seiteninhalt
Kopfzeile
Abschnittsmerkmal (kann hinzugefügt/gelöscht werden)
section-main
section-postscript (kann hinzugefügt/gelöscht werden)
footer
Öffentlicher Teil
Innenzentrum
Seiteninhalt
Kopfzeile
Abschnittsmerkmal (kann hinzugefügt/gelöscht werden)
Abschnittsname-1
Abschnittsname-2
...
Fußzeile
Öffentlicher Teil
inner-center/public-container
section.section-main>.inner-center
section.section-main>.inner-center aside.aside-left main.main>.content
section.section-main>.inner-center aside.aside-left main.main>.content aside.aside-right
Responsives Design
Prozent-Design
Design mit fester Breite
HTML(fex-team)
CSS(fex-team)
Layoutklassen: Kopfzeile, Fußzeile, Container, Hauptzeile, Inhalt, Seite, Seite, Abschnitt
Wrap-Klasse: Wrap, Inner
Blockklasse: Region, Block, Box
Strukturklasse: hd, bd, ft, oben, unten, links, rechts, Mitte, Spalte, Zeile, Raster, Spanne
Listenklasse: Liste, Element, Feld
Primäre und sekundäre Kategorien: primär, sekundär, untergeordnet, untergeordnet
Größenkategorien: s, m, l, xl, groß, klein
Statusklasse: aktiv, aktuell, geprüft, schweben, fehlgeschlagen, Erfolg, Warnung, Fehler, ein, aus
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, --scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
图片命名与图标命名，index-header-logo,index-footer-logo.
iconfont平台
关键词间以中划线-连接 以中划线连接，如.item-img
使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词，参考上面的关键词，如.active, .checked
图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。
模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
js操作的类统一加上js-前缀
不要超过四个class组合使用，如.a.b.c.d
一个类名，不要超过三个单词的连接。
主体结构命名前加上该页的命名，如index-banner，index-main。
通过添加前缀修饰关键词
public-header,article-header，index-banner,index-panel
通过层级关系特殊化类，一般子元素接着父元素的最后一个单词（继承式）
ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text <ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>
什么鬼，又不知道怎么命名class了
HTML整站结构设计
慕课网《从psd到html》
Das obige ist der detaillierte Inhalt vonVon der PSD-Datei bis zum Teilen von HTML-Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
