| maison  | Hardware  | réseaux  | programmation  | Logiciel  | Dépannage  | systèmes |  
programmation  
  • C /C + + Programming

  • Computer Programming Languages

  • Delphi Programming

  • Programmation Java

  • Programmation JavaScript

  • PHP /MySQL Programmation

  • programmation Perl

  • Programmation Python

  • Ruby Programming

  • Visual Basics programmation
  •  
    Connaissances Informatiques >> programmation >> Computer Programming Languages >> Content
    Comment insérer un Div dans un Div
    Un élément
    est un élément de balisage hypertexte ( HTML) de l'élément qui contient du contenu . Les développeurs Web utilisent souvent des éléments
    , avec cascade valeurs de feuille de style (CSS) pour définir la manière dont le contenu est structuré et affiché sur la page Web. Vous pouvez éléments
    d' imbriquer les uns les autres pour créer des formats complexes sans utiliser de tables. Dans ce tutoriel, vous allez créer un élément
    extérieur et trois éléments
    intérieures , avec trois styles CSS différents . Choses que vous devez
    ordinateur exécutant Windows 7 Photos Bloc-notes ou un autre éditeur de texte
    Internet Explorer ou un autre navigateur
    Afficher plus Instructions
    Créer une page Web
    1

    Cliquez sur le bouton "Démarrer" , pointez sur le menu " Tous les programmes" , cliquez sur le menu " accessoires" , puis cliquez sur le menu " Bloc-notes" .
    2

    Tapez le suivant le balisage dans la fenêtre de document:



    Div imbriqué <html> est l'élément le plus à l'extérieur et laisse le navigateur sait qu'il doit traduire le contenu au format HTML. L' élément <head> contient des éléments qui définissent des informations générales sur la page. Dans cet exemple, l'élément de <title> définit le texte affiché dans la barre de titre lorsque la page est affichée . L'élément body contient le contenu rendu sur la page. <br> 3 <p> Cliquez sur le menu "Fichier" et cliquez sur le menu " Enregistrer" pour afficher le "Enregistrer sous" boîte de dialogue . <br> 4 <p> Choisissez " Tous les fichiers " dans le " Save as type" liste déroulante . Cela est nécessaire pour éviter l'extension ". Txt" d'être ajouté à la fin du nom de fichier. <br> 5 <p> type " DivsExample.html " dans le champ " Nom de fichier " . <br> <br> 6 <p> Accédez à l'emplacement où vous voulez enregistrer le fichier. Assurez-vous que vous vous souvenez de l'utiliser dans les étapes ultérieures. <br> 7 <p> Cliquez sur le bouton "Enregistrer" pour enregistrer le fichier. <br> Testez votre page <br> 8 <p> Cliquez sur le bouton "Démarrer" et cliquez sur le menu "Ordinateur" . <br> 9 <p> Accédez à l'emplacement où vous avez enregistré « DivsExample.html " . <br> 10 < p> Double -cliquez sur " DivsExample.html " et vérifier que le titre correct s'affiche dans la barre de titre du navigateur. Si ce n'est pas , vérifier le balisage que vous avez tapé pour s'assurer que vous n'avez pas tapé quoi que ce soit de manière incorrecte. <br> Créer l' extérieur Div <br> 11 <p> Type de la balise suivante entre la balise <head> et </head> : . <br> <p> <style type="text/css"> <br> <p> outerDiv { <br> <p> marge: 2px solides <style> élément est utilisé pour définir les styles CSS . Vous faites précéder le nom du style avec un "." pour indiquer que le modèle est sélectionné en fonction de la valeur de l' attribut " classe " de l'élément. Par conséquent, vous venez de créer un style CSS en ligne qui sera appliqué aussi tous les éléments avec un attribut de classe mis à " outerDiv " . Vous définissez les propriétés du style à l'intérieur des accolades . Les propriétés sont définies comme « nom : . Paires de valeurs " <br> 12 <p> Tapez le balisage suivant entre la balise body et </body> : <br> <p> < div class = " outerDiv "> Photos <p> Outer box <br> <p> </div> Photos <p> en définissant l'attribut "classe" de l'élément <div> à " outerDiv » , vous indiquez que le style que vous avez définie à l'étape 1 doit être appliqué à la div . Le contenu de l'élément <div> est " boîte extra-atmosphérique. " Ceci est le texte qui sera affiché dans la boîte. <br> 13 <p> Cliquez sur le menu "Fichier" et cliquez sur le menu " Enregistrer" . <br> 14 <p> Apportez le " fenêtre imbriquée Div de démonstration " du navigateur au premier plan. Cliquez-droit sur la fenêtre et cliquez sur le menu " Actualiser " . Une boîte avec une frontière bronzage doit être affichée. Il doit contenir le texte «boîte extra-atmosphérique. " Si elle ne s'affiche pas correctement, vérifier votre balisage et corriger les erreurs. <br> Créer un Inner Div <br> 15 <p> Ajouter le balisage CSS suivant dans l'élément <style> sous l'accolade fermante ( }) de la outerDiv style sera appliqué à tout élément qui a son attribut "class " est réglé sur " vBarDiv " . Le style définit une barre noire de 100 pour cent 100 pixels de haut et 300 pixels de long qui sera positionné par rapport aux autres éléments <br> 16 <p> Tapez le balisage suivant sous le texte " boîte extra-atmosphérique" : . <br> <p> <div class="vBarDiv"> <br> <p> </div> <br> 17 <p> Cliquez sur le menu "Fichier" et cliquez sur le menu " Enregistrer" . <br> 18 <p> Apportez la fenêtre du navigateur " imbriqué Div de démonstration " au premier plan. Cliquez-droit sur la fenêtre et cliquez sur le menu " Actualiser " . Une boîte noire devrait être établi à l'intérieur de la boîte brune bordée , sous le texte . Si ce n'est pas , assurez-vous que vous n'avez pas fait une erreur de frappe . <br> Créer d'autres Divs Inner <br> 19 <p> Tapez le balisage CSS suivant sous l'accolade fermante de le style varBarDiv définition de style crée une boîte rouge qui est de 100 pixels de large. Le contenu de la boîte seront centrées <br> 20 <p> Ajoutez le balisage suivant après le texte " boîte extra-atmosphérique" : . <br> <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> </div> <br> 21 <p> Ajoutez le balisage suivant sous l'élément <div> qui attire la barre noire : Photos <p> < div class = " wordDiv "> Photos <p> Box <div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div> </div> </td> </tr> </table> <table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="51%"><p>Previous : <a class='LinkPrevArticle' href='/programmation/computer-programming-languages/87803.html' >Comment faire pour modifier des données dans un objet DataSet </a></li></p></td> </tr> <tr> <td width="49%"> next : <a class='LinkNextArticle' href='/programmation/computer-programming-languages/87805.html' >Comment faire pour déclarer des variables comme une forme en VBA </a></li></td> </tr> </table></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> articles connexes </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86368.html" title="Différences entre asservissement & Feed Forward Control " target="_self">Différences entre asservissement & Feed Forward Contro…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88482.html" title="Comment faire pour ouvrir des applications XPS " target="_self">Comment faire pour ouvrir des applications XPS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86829.html" title="Comment écrire GData Entrée valeurs en tant que String " target="_self">Comment écrire GData Entrée valeurs en tant que Strin…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87849.html" title="Installation MSI imbriqué " target="_self">Installation MSI imbriqué </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88774.html" title="HTML ColSpan Tutoriel " target="_self">HTML ColSpan Tutoriel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86832.html" title="Comment écrire des déclarations de données " target="_self">Comment écrire des déclarations de données </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88702.html" title="Informatique Fundamentals Tutorial " target="_self">Informatique Fundamentals Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86723.html" title="Comment calculer le décalage Assembly Language " target="_self">Comment calculer le décalage Assembly Language </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87433.html" title="Comment extraire les métadonnées AVI dans MATLAB " target="_self">Comment extraire les métadonnées AVI dans MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86641.html" title="Conséquences des débordements de buffer " target="_self">Conséquences des débordements de buffer </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">articles en vedette </td> </tr> </table> <table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88617.html" title="Comment faire des bannières d'horreur gratuites " target="_self">Comment faire des bannières d'horreur gratuites </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/96170.html" title="Comment faire pour afficher la formule 2 en Visual Basic " target="_self">Comment faire pour afficher la formule 2 en Visual Basi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/java-programming/90678.html" title="Création d'un fichier JAR de Java " target="_self">Création d'un fichier JAR de Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/96308.html" title="Comment faire pour modifier la fenêtre active en Visual Basic " target="_self">Comment faire pour modifier la fenêtre active en Visua…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/94290.html" title="Pourquoi pas mon chèque aspect de boîte handicapés " target="_self">Pourquoi pas mon chèque aspect de boîte handicapés </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91096.html" title="Outil XML Astuce Tutoriel " target="_self">Outil XML Astuce Tutoriel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/94441.html" title="Comment afficher un JPG en PictureBox Visual Basic " target="_self">Comment afficher un JPG en PictureBox Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/ruby-programming/94195.html" title="Comment faire pour utiliser des connexions multi magique " target="_self">Comment faire pour utiliser des connexions multi magiqu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/cc-programming/86277.html" title="Comment initialiser les variables en C " target="_self">Comment initialiser les variables en C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/96231.html" title="Comment utiliser la barre de défilement Avec ListBox dans Visual Basic 6.0 " target="_self">Comment utiliser la barre de défilement Avec ListBox d…</a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <table width="980" height="8" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90> <tr> <td class=bs height=90 align=middle>Copyright © Connaissances Informatiques http://fr.wingwit.com <script language='javascript' src='/ad/201310/1.js'></script></td> </tr> </table> </div> </body> </html>