Comment construire une base css layout
Concevoir sans l'aide de tableaux de mises en page CSS est en passe de devenir la nouvelle norme sur le Web en raison des avantages mentionnés dans mon précédent article. Navigateurs Web utilisé ces jours-ci sont maintenant en mesure de rendre les pages Web efficacement. Dans cet article, je vais tenter de créer une mise en page CSS 2 colonne, vous pouvez l'utiliser pour la conception future projects.Web Page: http://www.isitebuild.com/css/css-layout.html Style Sheet: http://www.isitebuild.com/css/stylesheet.htm1. Divisez votre page en sections - la div id tags vous permet de créer des divisions distinctes sur votre page web. Ils sont identifiés par un identifiant unique. Vous pouvez ensuite ajouter un style (sélecteur de css), qui s'applique expressément à l'id de ce div. N'oubliez pas d'inclure les DOCTYPE (pour rendre votre page précise dans les navigateurs) et les balises META (permet aux moteurs de recherche pour vos pages d'araignée). Wrapper: est la div qui entoure toutes les autres divs comme un conteneur pour les éléments de la page. header: définit la bannière de la page principale: définit le contenu principal de la page nav: définit la navigation du bas de page: définit le pied de page et sous-navigation de la page 2. Créer le code CSS - le code CSS styles à une page dans la colonne 2 centrée CSS mise en page avec une barre de navigation et d'un pied de page. Le style div # wrapper crée le centré boîte qui sert de conteneur pour le reste du contenu de la page. La largeur: 80% des jeux de règles de la largeur de la div. Le background-color: # FFFFFF crée un fond blanc pour la div. La margin-top: 50px et margin-bottom: 50px règles de créer un espace de 50 pixels pour les marges supérieure et inférieure de la bonne façon div itself.The au centre d'un bloc de niveau élément avec CSS est de mettre margin-left: auto et margin-right: auto. Cet charge le navigateur pour calculer automatiquement les marges pour l'égalité des deux côtés, ainsi le centrage div. La frontière: thin solid # 000000 règle ajoute une bordure autour de l'extérieur div. Le reste du code CSS styles les divs pour l'en-tête, pied de page, nav, et les principaux content.The div # header et div # footer styles ensemble des marges et de rembourrage pour les divs. En outre, div # header comprend le text-align: center center règle à l'en-tête du texte, et div # footer comprend le border-top: thin solid # 000000 règle pour créer une frontière le long du bord supérieur de la div pour remplacer la règle horizontale au-dessus du pied de page dans la base de tables layout.The div # nav et div # main styles de créer les deux colonnes au milieu de la zone centré. Dans le style div # nav, le float: left règle pousse le div vers le côté gauche de son élément parent (le wrapper div), et la largeur: 25% des jeux de règles de la largeur de la div à 25 pour cent de l'élément parent. Avec la nav div flottant à gauche et limité à un ensemble de largeur, il laisse de la place pour les principaux div pour passer à la droite de la nav div, créant ainsi un effet à deux colonnes. Le div # principal comprend le style margin-left: 30% État de garder le corps du texte aligné dans un pur lieu de propagation de la colonne ci-après, la colonne de nav. Le principal div la marge de gauche est réglé à une valeur légèrement plus grand que les largeur de la feuille de nav div.Style http://www.isitebuild.com/css/stylesheet.htmIf liens sont placés ailleurs sur la page, ils vont hériter les mêmes propriétés que ci-dessus .. un lien bleu qui plane au rouge. Que faire si vous souhaitez créer une autre série de liens qui sont une couleur différente, et en passant votre souris sur eux, ils sont underlined.4. Création de la navigation en bas - de l'inclure dans la section de la page, je l'utilise div # footer et le code chaque lien en conséquence. Pour faire passer la liste horizontalement que j'utilise: display: inline; Maintenant que j'ai fini de créer ma feuille de style je veux raccourcir le code sur la page en l'associant à ma feuille de style externe. Voici comment: 4. Créer une feuille de style externe - Copiez et collez tout le code CSS (sans ces balises:) dans le bloc-notes et de l'étiquette, il quelque chose comme "feuille de style". Placez cette feuille de style entre les balises head de votre site seront page.This de réduire le code sur votre page de sorte qu'il se charge rapidement, plus les moteurs de recherche peuvent plus facilement votre site Web spider PAGE RÉGLEMENTAIRE.4. Ajoutez du contenu à votre page - après avoir reçu votre page de recherche, vous pouvez ajouter plus de contenu à il. Des ajustements peuvent être faits facilement à tout style de la page (ou l'ensemble de votre site), simplement en éditant un style sheet.5. Téléchargez vos fichiers - assurez-vous de télécharger vos pages Web et la feuille de style dans le répertoire racine de votre server.6. Validez votre code - veillez à valider votre code xhtml: http://validator.w3.org/ et css code: http://jigsaw.w3.org/css-validator/ et d'apporter des corrections là où necessary.7. Vérifiez la compatibilité du navigateur et résolution d'écran - vérifiez que votre page rend très bien dans le navigateur (IE6, NN7, Firefox) Si vous êtes à partir de mises en page CSS, mettre en œuvre ensuite lentement par de petits changements à vos pages c'est-à-dire la création d'un style fiche de votre tête et de polices de caractères seulement. Comme vous devenez plus familiers avec CSS, vous avez finalement mai construire votre avenir tous les sites avec des CSS layouts.Resources: Basic CSS layout http://www.isitebuild.com/css/css-layout.htmlCSS http://www.isitebuild.com/css/stylesheet.htmBenefits de feuille de style CSS http://www.isitebuild.com/css/index. Drost htmHerman is the Certified Internet Webmaster (CIW) propriétaire et l'auteur de http://www.iSiteBuild.com Affordable Web Site Design et Web Hosting. Abonnez-vous à ses "Conseils Marketing" newsletter pour plus d'articles originaux. mailto: subscribe@isitebuild.com. Vous pouvez lire
Source D'Article: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster obtenir le code html
Ajouter cet article sur votre site Web dès maintenant!
Webmaster envoyer vos articles
Aucune inscription requise! Remplissez le formulaire et votre article est dans le Messaggiamo.Com répertoire!
