Règles de création d'un cadre CSS pour les sites Web de portail_Échange d'expériences

Partie 1 : Ce que nous voulons réaliser lors de la création d'un framework CSS :

1. Mettre en œuvre la standardisation et la mise en œuvre du front-end avec une adaptabilité aux plates-formes grand public
2. Une fois le style du site déterminé, le front-end ne doit pas devenir le goulot d'étranglement de l'ensemble du projet ; 3. Exigences de refactorisation, rendre les classes et les styles de blocs réutilisables autant que possible ;
4. Exigences de structure et de performances séparées, respecter les conventions de la structure sémantique
5. du réseau financier.
6. Effectuez l’optimisation nécessaire des moteurs de recherche sur le code.

Partie 2 : Quelques conventions sur la dénomination CSS :

1. N'utilisez pas de noms de classe et de noms d'identifiant en majuscules

2 Essayez d'utiliser une combinaison de mots anglais descriptifs comme noms de classe et noms d'identifiant
3. Utilisez des tirets "_" pour séparer les mots ;
4. Décrivez par zone Exemple de numérotation : main01_div01_ul01 (peut être compris comme le premier UL sous le premier DIV de la première zone du corps)

Ensuite, nous devons analyser l'ensemble du site Web et l'ébauche de conception pour créer un cadre CSS qui correspond aux caractéristiques de notre propre structure de portail

Nous avons pris Sina.com comme exemple :

Effectuer une analyse de la structure du site :

La page entière est divisée en : page d'accueil, plus de pages, page de contenu, page thématique, centre de données, centre d'actualités, page de chaîne, publicité...

Nous organisons ces pages pour trouver leurs parties communes. Celles-ci se trouvent dans : les styles CSS, les régions et les fragments de module. Ce que nous devons faire est d'extraire ces parties communes.

Après observation, nous pouvons diviser les CSS dans les catégories suivantes :

Feuille de style principale : sjweb.css

font (une collection de styles de police, de tailles de police et de couleurs)
layout (une collection de structures de cadre)
global (une collection de styles globaux par défaut)
composant (page de composant Feuilles de style partielles, collections de fragments de module)
Ceux-ci sont tous importés dans la feuille de style principale sjweb.css La feuille de style principale sert de chargeur pour charger de nouveaux styles externes,
tels que. feuilles de style publicitaires.
De cette façon, ces pages n'ont besoin que d'écrire un petit code de style CSS qui répond à leurs propres exigences particulières.

Lors de la construction de ce framework CSS, de nombreux détails doivent être unifiés, tels que l'espacement des lignes, l'espacement entre les modules, etc.

Voici le schéma de structure de la page d'accueil d'un portail :

Règles :

1. L'espacement entre toutes les zones, modules, haut, bas, gauche et droite est de : 8 pixels
2. Couleur #333 de la liste d'actualités ; 20 pixels ;
…Attendez

Ajuster l'environnement : IE7, ff, IE6, IE5.x, Opera.

PS : En fait, c'est plus une question de détails quand on le construit, donc je n'entrerai pas dans les détails. Haha