Du fichier psd au partage de tutoriel HTML

Aperçu

• Planifier la disposition, diviser la structure globale

• Zone de contenu, du tout à la partie, la partie commune dans le partie, selon le contexte Appliquer les styles

• En-tête public (public-header), tail (public-footer)

• Public conteneur (public-container /inner-center)

• fichier css, structure html, pensez davantage à

• Don ne laissez pas les éléments et les blocs en ligne Les éléments de niveau sont au même niveau

• reset.css, common.css, index.css

• elements qui doivent flotter, les éléments parents sont tous propres, donnent des classes uniformes clearfix

• width et height : utilisez des unités paires.

• Bonnes normes de codage et de dénomination

• Pas plus de trois niveaux de dénomination

• Combinaison ingénieuse d'attributs et d'éléments, existe-t-il une meilleure solution

• Utiliser le débordement pour gérer la situation où certaines images et certains textes ne peuvent pas être masqués ? .

• text-overflow, la partie de texte en excès sera affichée avec des points de suspension.

• une balise peut être imbriquée dans n'importe quelle balise p, h, div et autres (selon les nouvelles spécifications). Elle est généralement vue dans le même groupe de combinaisons de titres, d'images et de textes). , etc. qui renvoient au même endroit, de gros styles de lien sont donc nécessaires pour accéder à des endroits, ce qui est plus pratique.

  <a href="#" class="title">
      <h4>Voluptate cillum fugiat.</h4>
      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
  </a>

• Compatibilité et traitement des détails (zoomez à plus de 100% pour voir les indices)

• Réflexion Si la structure HTML est raisonnable

• Traitement CSS Hack

• Avant de commencer

• Si vous n'êtes pas encore prêt, nous vous recommandons de terminer la lecture de la première partie de cette série de tutoriels

•  :

• Utilisez

• photoshop

• pour concevoir une petite page d'accueil de produit

• moderne

• ,

• parce que la deuxième partie est nécessaire. La première partie est le fichier

• psd

• complété.

• Si vous souhaitez sauter la première partie, vous pouvez directement télécharger le fichier source dans la première partie, vous en aurez besoin pour continuez ci-dessous.

• Créer la structure du fichier et préparer le fichier

• 1

• Créez un nouveau répertoire vide sur le bureau et nommez-le

• portfolio

• .

• 2

• à

• Continuez à créer le répertoire

• images

• sous le répertoire portfolio

• pour stocker les images.

• 3

• Créez ensuite deux fichiers vides

• styles.css

• et

• index.html

Structure générale

• page -contenu

• en-tête

• section-fonctionnalité (peut être ajoutée/supprimée)

• section-main

• section-postscript (peut être ajoutée/supprimée)

• footer

• Partie publique

• centre-intérieur

ou

• contenu de la page

• en-tête

• fonctionnalité de section (peut être ajoutée/supprimée)

• nom-de-section-1

• nom-de-section-2

• ...

• pied de page

• Partie publique

• centre-intérieur/conteneur-public

section-main

Aucune conception de barre latérale

section.section-main>.inner-center

Conception de la barre latérale gauche

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

Conception à double barre latérale

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

Besoins spécifiques

• Conception réactive

• Conception en pourcentage

• Conception à largeur fixe

Spécifications du code

• HTML (fex-team)

• CSS (fex-team)

Conventions de dénomination et applications

Mots-clés de classe courants

• Classes de mise en page : en-tête, pied de page, conteneur, principal, contenu, de côté, page, section

• Classe Wrap : wrap, intérieur

• Classe Block : région, bloc, boîte

• Classe de structure : hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

• Classe de liste : liste, élément, champ

• Catégories primaires et secondaires : primaire, secondaire, sub, mineur

• Catégories de tailles : s, m, l, xl, grand, petit

• Classe d'état : actif, actuel, vérifié, survol, échec, succès, avertissement, erreur, activé, désactivé

• 导航类：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》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!