Introduction
Par le youve temps de mettre ce tutoriel:
1) Vous devez savoir comment créer des pages Web HTML de base.
2) Vous devez connaître la balise DIV (<div>).
3) Vous devez savoir comment ajouter une image comme arrière-plan.
Ce que ce tutoriel vous apprendra:
1) Comment faire une boîte de contenu avec un fond blanc (ou toute autre couleur).
2) Comment faire pour rendre la zone de contenu apparaît en face de l'image de fond.
3) Comment ajouter une bordure CSS.
Etape 1
Arrivez à la section <head>. Si vous n'avez pas une section <head>, s'il vous plaît en faire un.
Note: Le <head> section se poursuit entre la <html> et <body>.
Étape 2
Alors que dans la section <head>, collez ce code:
<style type="text/css">
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
</style>
-
- <style type="text/css">
-
- #container{border-style:your-border-style;border-width:your-border-width;background-color:white}
-
- </style>
-
Vous pouvez changer "votre-border-style" avec l'un des noms de style ci-dessous:
"Pointillé"
"Pointillés"
"Double"
"Groove"
"Ridge"
"Médaillon"
«Départ»
* Elles doivent toutes être en minuscules lorsque vous les entrées sur votre code source! Vous pouvez changer "votre-border-width" avec n'importe quel numéro se termine par "px".
Étape 3
Maintenant, vous avez tous les intrants dans le <style>, non? Si non, s'il vous plaît vérifiez que vous faites. Maintenant, nous allons ajouter le <div> autour du contenu avec lequel nous voulons que la zone autour. Voici un exemple:
<div id="container">
<h>My first container!</h>
<p>My first container paragraph!</p>
</div>
-
- <div id="container">
- <h>My first container!</h>
- <p>My first container paragraph!</p>
- </div>
-
OK, maintenant vous devez savoir comment ajouter le <div>, non? Thats tous là est à lui!
Avis:
Pour ajouter plus de conteneurs, de changer le codage à ceci:
<style type="text/css">
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
#container2{border-style:your-border-style;border-width:your-border-width;background-color:white}
</style>
-
- <style type="text/css">
-
- #container{border-style:your-border-style;border-width:your-border-width;background-color:white}
- #container2{border-style:your-border-style;border-width:your-border-width;background-color:white}
-
- </style>
-
...et d'ajouter plus #contianer endroits.
Septembre 2nd, 2009, 7:09 am
