Maison > Article > interface Web > Collection nommée standard DIV+CSS
Lorsque nous développons des pages Web CSS+p (Xhtml), la chose la plus déroutante et la plus complexe est la dénomination CSS. Surtout les débutants ne savent pas comment nommer les lieux et quelle est la meilleure façon de les nommer.
1) Tous les noms doivent être en minuscules
2) La valeur de l'attribut doit être placée entre guillemets ("") et doit avoir une valeur telle que class="pcss5", id="pcss5"
3) Chaque balise doit avoir un début et une fin, et doit avoir le bon niveau, et la mise en page doit être régulière et soignée
4) Les éléments vides doivent avoir une balise de fin ou ajouter "/"
après la balise de début 5) Les performances et la structure sont complètement séparées. Le code n'implique aucun élément de performance, tel que le style, la police, le bgColor, la bordure, etc.
6) La définition doit suivre le principe du plus grand au plus petit, refléter la structure du document et faciliter les requêtes des moteurs de recherche.
7) Ajoutez un identifiant de balise de structure unique
à chaque table et formulaire 8) Ajoutez des balises alt aux images
9) Essayez d'utiliser les principes de dénomination anglais
10) Essayez de ne pas abréger les mots à moins qu'ils ne soient faciles à comprendre d'un seul coup d'œil
Enveloppement de manteau-----------------utilisé pour l'en-tête le plus à l'extérieur----------------utilisé pour le contenu principal de l'en-tête principal ------------utilisé pour le contenu principal (milieu) gauche principal-gauche-------------disposition gauche droite principal-droite---- ---- ---Barre de navigation de mise en page droite-----------------Contenu de la barre de navigation du menu de la page Web-------------- -Utilisé pour le bas pied de page du corps central de la page Web-----------------Utilisé pour le bas
Ce qui suit est un tableau de référence pour la dénomination des styles CSS et la dénomination des fichiers CSS, p collection de dénomination CSS :
Nommage des styles CSS |
Descriptif |
Nom public des pages Web |
|
#wrapper |
La périphérie de la page contrôle la largeur globale de la mise en page |
#conteneur ou #content |
Conteneur, utilisé pour la couche la plus externe |
#mise en page |
Mise en page |
#tête,#en-tête |
Partie en-tête |
#foot,#footer |
Section pied de page |
#nav |
Navigation principale |
#subnav |
Navigation secondaire |
#menu |
Menu |
#sous-menu |
Sous-menu |
#sideBar |
Barre latérale |
#sidebar_a,#sidebar_b |
Colonne de gauche ou colonne de droite |
#main |
Corps de la page |
#tag |
étiquette |
#msg #message |
Message rapide |
#conseils |
Conseils |
#votez |
Votez |
#friendlink |
Connexion amicale |
#titre |
Titre |
#résumé |
Résumé |
#barre de connexion |
Barre de connexion |
#searchInput |
Zone de saisie de recherche |
#chaud |
Points d'accès populaires |
#recherche |
Rechercher |
#search_output |
Le résultat de la recherche est similaire aux résultats de la recherche |
#searchBar |
Barre de recherche |
#search_results |
Résultats de la recherche |
#droit d'auteur |
Informations sur les droits d'auteur |
#image de marque |
Marque déposée |
#logo |
LOGO du site Web |
#infosite |
Informations sur le site |
#siteinfoLégal |
Mentions légales |
#siteinfoCrédits |
Réputation |
#rejoindre |
Rejoignez-nous |
#partenaire |
Partenaires |
#service |
Service |
#regsiter |
Inscrivez-vous |
arr/flèche |
Flèche |
#guilde |
Guide |
#plan du site |
Plan du site |
#liste |
Liste |
#page d'accueil |
Accueil |
#sous-page |
Sous-page de la page secondaire |
#outil,#barre d'outils |
Barre d'outils |
#drop |
Déroulez |
#dorpmenu |
Menu déroulant |
#statut |
Statut |
#défilement |
Faites défiler |
.tab |
Page de balises |
.gauche.droite.centre |
Gauche, centre, droite |
.nouvelles |
Actualités |
.télécharger |
Télécharger |
.bannière |
Bannière publicitaire (bannière publicitaire supérieure) |
Lié au commerce électronique |
|
.produits |
Produits |
.products_prices |
Prix du produit |
.products_description |
Description du produit |
.products_review |
Avis sur les produits |
.editor_review |
Modifier le commentaire |
.news_release |
Derniers produits |
.éditeur |
Fabricant |
.capture d'écran |
Vignette |
.faqs |
Foire aux questions |
.mot-clé |
Mots-clés |
.blog |
Blogue |
.forum |
Forum |
Utilisation du CSS |
明 |
||||||||||||||||||||||
|
主要的 | ||||||||||||||||||||||
module.css | 模块 | ||||||||||||||||||||||
base.css | 基本共用 | ||||||||||||||||||||||
layout.css | 布局,版面 | ||||||||||||||||||||||
themes.css | 主题 | ||||||||||||||||||||||
colonnes.css | 专栏 | ||||||||||||||||||||||
font.css | 文字、字体 | ||||||||||||||||||||||
forms.css | 表单 | ||||||||||||||||||||||
mend.css | 补丁 | ||||||||||||||||||||||
print.css | 打印 |
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!