En HTML, faire un encadré - comment il fonctionne avec CSS

FONTE ZOOM:

Si vous envisagez une nouvelle mise en page pour votre site Web et il souhaitez créer une barre latérale pour la navigation, vous pouvez le faire assez facilement avec quelques lignes de code HTML et CSS quelque chose. Comment cela fonctionne étape par étape, se il vous plaît cliquez ici.

Le guide suivant est une mise en page avec quatre parties à créer: un en-tête, la barre latérale, une zone principale et un pied de page. Dans cet exemple, seules les couleurs sont utilisées et ont créé aucun autre formatage de sorte que vous par exemple de définir ou même avoir à changer la police ou les couleurs.

Backbone pour la page HTML

Pour créer une mise en page avec une barre latérale pour votre site, vous avez besoin d'écrire quelques lignes de code HTML dans son principe et le personnaliser avec des CSS:

  1. Tout d'abord, créer une section de DIV qui comprend les quatre domaines, puis la diviser en différentes zones. Que ce soit dans la région de corps, par exemple:

  2. Maintenant vous avez seulement besoin de se inquiéter à propos de la conception des zones de DIV. Soyez dans ce tête-gamme «style>
  3. Prenez soin d'eux autour de votre récipient en attribuant qu'une certaine largeur et ce - si vous voulez - et encore centrée sur le site représentent. Cela vous pourrait, par exemple, avec "#container {width: 960px; margin: 20px auto;}« faire.
  4. Après cela, vous pouvez personnaliser l'en-tête et pied de page. Par exemple, vous pourriez définir ce avec une certaine couleur de fond et couleur de caractères et le texte est le centre peut être représenté par une certaine distance. Vous avez la possibilité de formater les deux domaines simultanément en les séparant par une virgule: #header, #footer {text-align: center; background: # 777; couleur: #fff; hauteur: 75px; padding: 5px }
  5. L'avant-dernière étape, ce est que vous quittez la barre latérale et la zone principale posez côté de l'autre. Pour cela il vous faudra deux champs d'attribuer une largeur spécifique et définir avec le "float" qu'une zone est présenté et est ensuite enveloppé dans le champ suivant. Soyez #sidebar pour la barre latérale, par exemple {float: left; largeur: 250px; min-height: 100px; fond: #EEE;} et pour le contenu principal #content {float: left; largeur: 690px; text-align: left ; padding-left: 5px;}.
  6. Enfin, vous avez juste besoin de formater le pied de page de sorte qu'il ne se écoule pas dans la région des deux éléments précédents, mais se affiche uniquement après cela. Vous pouvez le faire avec "clear: both;", vous permettant de forcer une poursuite de l'élément précédent ci-dessous. Maintenant, écrivez donc: #footer {clear: both;}

Personnaliser le contenu sidebar

Une fois que vous avez déterminé l'esquisse de votre page HTML, vous pouvez en quelques étapes pour créer une navigation simple pour la barre latérale.

  1. Vous pourriez, par exemple, faire une liste, que vous pouvez ensuite simplement cacher les points de balle. Créez d'abord créer une liste simple DIV-région "sidebar" dans lequel vous fournissez des liens vers une section de votre site web. Cela pourrait ressembler à ceci:
    • Lien 1
    • Lien 2
    • Link 3
    • Maintenant, vous avez besoin de faire cette liste uniquement avec CSS. Vous pouvez régler, par exemple, que la liste n'a pas de distance et les balles ne sont pas visibles. Par conséquent si la zone Style, par exemple, écrire: #sidebar ul {margin :. 0px; padding: 0px; list-style: none;}
    • En conséquence, les liens seraient seulement entre eux. Maintenant, vous pouvez faire chaque point de la balle encore, donc, par exemple, définir un cadre inférieur et un fond qui va changer lorsque le pointeur de la souris survole la balle. Cela vous pourrait, par exemple, avec quelques lignes de code CSS pour rendre .:
      #sidebar ul li {border-bottom: 1px pointillés noirs; background-color: #bbb;}
      #sidebar ul li: hover {background-color: #ccc;}
    • Prenez soin de les derniers liens. Cette vous pouvez assigner une couleur et hover couleur et laisser le texte représente une certaine distance:
      #sidebar ul li a {padding: 10px; # 000;:;: Sélectionner un colorblock text-decoration: none;}
      #sidebar ul li a: hover {color: blue;}

Maintenant que vous avez créé une barre latérale dans chaque autres liens apparaissent qui sont conçus dans des couleurs différentes et de modifier les couleurs lors du survol avec la souris. Vous pouvez voir le HTML fini et code CSS dans Sourcepod.

VOIR AUSSI:
  1.  
  2.  
  3.  
Sans commentaires

Laisser un commentaire

Code De Sécurité