10 sites avec grand exemple mises en page CSS

Une des meilleures façons d'apprendre comment utiliser les CSS pour effectuer diverses tâches est de voir comment d'autres personnes configurent leurs sites. La liste suivante présente différents aménagements que vous pouvez utiliser pour créer votre propre site. Il aborde également le type de modèle et les caractéristiques spéciales de chaque site que vous devriez noter.

  • Astronomy Picture of the Day: Le Astronomy Picture of the Day (APOD) est un exemple exceptionnel d'un design fluide. Essayez de redimensionner la page et vous serez étonné de la façon dont le contenu de la page répond. (Le graphique dans le centre ne fonctionne pas bien sur un téléphone portable, mais le texte ne fait certainement.) Il présente une bonne combinaison de styles de police et montre comment utiliser les liens et pour améliorer le contenu.

  • USA Today: Ceci est un bon exemple d'une conception adaptative deux ou trois colonne. Notez que lorsque vous redimensionnez la page, la troisième colonne sur la droite tend à disparaître lorsque la page est trop petite. Remarquez les flèches de chaque côté de la présentation. Vous pouvez les utiliser pour se déplacer entre les rubriques des journaux, ce qui est une excellente utilisation de cet effet spécial.

  • Yahoo! Maps: Sites cartographiques peuvent être notoirement difficile à utiliser car ils reposent sur une interface complexe ou de l'information ne sont pas dans une forme qui est facile pour les utilisateurs à l'entrée. Yahoo! Maps permet de contourner ce problème en fournissant trois champs simples. La majorité de l'interface est effectivement consacré à l'affichage de la carte. Le système de contrôle de la carte est facile à comprendre et ne nécessite pas de formulation. Ceci est un excellent exemple d'une application orientée graphiques. Ceci est également l'un des rares exemples d'une conception adaptée que vous trouverez correctement mis en œuvre.




  • Thesaurus.com: Ce fixe avec d'aménagement du site fournit un bon exemple de la façon d'utiliser les onglets d'une manière unique. Il ya effectivement plusieurs sites liés à ce site unique. En cliquant sur un des onglets en haut, vous êtes transportés vers d'autres sites tels que Dictionary.com Dictionary.com et traducteur. Notez l'utilisation d'une mise en page complexe pour ce site. La disposition de trois colonnes est divisé en sous-sections que nécessaire pour transmettre de l'information supplémentaire.

  • Aller Autre: Ceci est un bon exemple d'une conception élastique à trois colonnes. La mise en œuvre est pas parfait, mais remarquez comment le contenu consomme toute la page, peu importe la taille que vous faites. Vous pouvez également faire la page relativement faible avant que vous voyez aucun signe d'une barre de défilement parce que le contenu se rétrécit en fonction de l'espace disponible. Cette page dispose également d'un système à deux de menu (celui de gauche utilisé pour accéder à des fonctions de conversion et un sur le droit d'accéder aux fonctionnalités du site).

  • JC Penney: De nombreux sites de vente fournissent des couches de contenu. Dans ce cas, vous voyez un titre de fournisseur au sommet, un menu interactif belle prochain, les dernières ventes prochain, le chemin du site actuel, et enfin l'information des ventes à deux colonnes. Ceci est une présentation de largeur fixe, de sorte qu'il ne se classe pas bien quand la taille des changements de navigateur. L'accent est mis sur la présentation des images sur la page de la meilleure façon possible.

  • Petter Hesselberg.com: Contrairement à la plupart des sites aujourd'hui, celui-ci utilise le positionnement absolu efficace (il rompt également les règles en utilisant des tables de tenir le contenu - le site serait mieux si elle utilisait uniquement CSS). Présentation des données tabulaires peut être difficile. Ce site représente un moyen efficace pour afficher les données sous forme de tableau qui ne sont pas trop occupés ou difficiles à voir. Il est pas toujours nécessaire d'utiliser des frontières lors de l'affichage des données tabulaires - coloration subtile est parfois tout ce que vous avez vraiment besoin.

  • Sourceforge: Dans certains cas, vous devez créer une configuration de distribution de l'information dans un autre format, tels que les fichiers .zip. Ceci est un exemple d'une stratégie de diffusion de l'information qui utilise des techniques et des fonctionnalités HTML5 tels que les listes à puces pour les menus. La mise en page à largeur fixe ne redimensionne pas très bien, mais le site lui-même est assez souple. Remarquez comment ce site utilise efficacement une mise en page de deux colonnes avec en-tête et pied de page.

  • GetHuman: Les bases de données sont recherchées le plus souvent ils sont modifiés. Lorsque la base de données est grande, en essayant de trouver un élément d'information spécifique devient incroyablement difficile et frustrant. Ce site largeur fixe démontre une technique de recherche d'annuaire téléphonique qui pourrait être appliquée à d'autres types de sites qui ont tendance à compter sur seulement une ou deux touches pour afficher une gamme de renseignements. Notez l'utilisation d'effets spéciaux pour montrer la ligne sélectionnée. Le site présente également un aspect de tableau sans utiliser effectivement tableaux (voir le code source pour voir par vous-même).

  • John Réflexions et discussions au hasard: Ce site vous présente un exemple parfait de la mise en page de deux colonnes utilisé dans un environnement de blog. Vous voyez comment les entrées de la colonne de barre latérale sur la gauche permettent d'accéder aux entrées de contenu dans le volet de droite avec plus de facilité. En outre, ce site vous aide à comprendre les avantages et les inconvénients de la mise en page à largeur fixe classique.


» » » » 10 sites avec grand exemple mises en page CSS