elementen te creëren , samen met drie verschillende CSS- stijlen . Wat je
computer met Windows 7
Kladblok of andere teksteditor
Internet Explorer of een andere browser
Need Toon Meer Aanwijzingen
Maak een webpagina
1
Klik op de "Start "-knop , wijs de " Alle Programma's " in het menu , klik op de " Accessoires " menu-item en klik op de "Notepad " menu-item .
Type 2 de na opmaak in het document venster :
Geneste Div <html> is de buitenste element en laat de browser het weet moet de inhoud te vertalen als HTML . De <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> element bevat elementen die algemene informatie over de pagina te definiëren . In dit voorbeeld , de <title> element definieert de in de titelbalk wanneer de pagina wordt weergegeven tekst . De <body> element bevat de inhoud weergegeven op de pagina . <br> 3 <p> Klik op het menu "Bestand " en klik op de " Save " menu-item om de " Opslaan als " dialoogvenster . <br> 4 <p> Kies " Alle bestanden " uit het " Opslaan als type " drop - down lijst . Dit is nodig om de " . Txt " extensie te voorkomen dat aan het einde van de bestandsnaam . <br> <p> Type 5 " DivsExample.html " in het veld " Bestandsnaam " . <br> < br > 6 <p> Navigeer naar de locatie waar u het bestand wilt opslaan . Zorg ervoor dat je het onthouden voor gebruik in latere stappen . <br> 7 <p> Klik op de knop "Opslaan" om het bestand op te slaan . <br> Test uw pagina <br> 8 <p> Klik op de knop 'Start' en klik op de "Computer " menu-item . <br> 9 <p> Navigeer naar de locatie waar u " DivsExample.html " opgeslagen. <br> 10 <p > Dubbelklik op " DivsExample.html " en controleer of de juiste titel wordt weergegeven in de browser titelbalk . Als dit niet gebeurt , controleer dan de opmaak die u hebt getypt om ervoor te zorgen dat u geen typefout niets . <br> Maak de Buiten Div <br> <p> type 11 de volgende markup tussen de <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> en de tag < /head > : . <p> <style type="text/css"> <br> <p> <br> outerDiv { <p> grens <br> : solid 2px <style> element wordt gebruikt om inline CSS- stijlen te definiëren . U voorgaan de naam van de stijl met een " . " aan te geven dat de stijl geselecteerd op basis van de waarde van het attribuut element "klasse" . Daarom heb je zojuist een inline CSS- stijl die ook wordt toegepast alle elementen met een class attribuut op " outerDiv " . U definieert de eigenschappen van de stijl binnen accolades . De eigenschappen worden gedefinieerd als " naam : . Value pairs " <br> <p> Type 12 de volgende markup tussen de <body> en de tag < /body > : <br> <p> < div class = " outerDiv " > <p> Outer doos <br> <p> <br> < /div > <br> <p> Door het instellen van de " class" attribuut van de <div> element " outerDiv " , geeft u aan dat de stijl die u in stap 1 hebt gedefinieerd moet worden toegepast op de div . De inhoud van de <div> element is " Outer doos . " Dit is de tekst die wordt weergegeven in de box . <br> 13 <p> Klik op het menu "Bestand " en klik op de " Save " menu-item . <br> 14 <p> Breng het " geneste Div Demonstratie " browser -venster op de voorgrond . Rechtermuisknop op het venster en klik op de "Refresh " menu-item . Een doos met een tan grens moet worden weergegeven . Het moet de tekst " Outer doos . " Bevatten Als het niet goed weergegeven , controleer je markup en herstel eventuele fouten . <br> Maak een Inner Div <br> 15 <p> Voeg de volgende CSS- opmaak binnen de <style> element onder de accolade sluiten ( } ) van de outerDiv stijl zal worden toegepast op elk element dat zijn attribuut " class" ingesteld op " vBarDiv " heeft . De stijl definieert een 100 procent zwarte balk 100 pixels hoog en 300 pixels lang, dat ten opzichte van de andere elementen zal worden gepositioneerd <br> <p> Type 16 de volgende markup onder de tekst " Outer doos " : . <br> <p> <div class="vBarDiv"> <br> <p> < /div > <br> 17 <p> Klik op het menu "Bestand " en klik op de " Save " menu-item . < br > <br> 18 <p> Breng de " Geneste Div Demonstratie " browservenster op de voorgrond . Rechtermuisknop op het venster en klik op de "Refresh " menu-item . Een zwarte doos moet worden getrokken in de bruine - omrande vak onder de tekst . Als het niet , controleer dan of u heeft een typefout maken. <br> Maak Andere Binnen Divs <br> 19 <p> Typ de volgende CSS- opmaak onder de accolade sluiten van de varBarDiv stijl stijl definitie creëert een rood vak , dat is 100 pixels breed . De inhoud van de doos wordt gecentreerd <br> 20 <p> Voeg de volgende markup na de tekst " Outer doos " : . <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> < /div > <br> 21 <p> Voeg de volgende markup onder de <div> element dat de zwarte balk trekt : <br> <p> < div class = > <p> Box <br> <p> <br> < /div > <br> 22 <p> Klik op het menu "Bestand " en klik op de " Save " menu " wordDiv " . <br> 23 <p> Breng de " Geneste Div Demonstratie " browservenster op de voorgrond . Rechtermuisknop op het venster en klik op de "Refresh " menu-item . Een rode doos met het woord "Binnen " moet boven de zwarte balk weergegeven. Een rode doos met het woord " doos " moeten onder de zwarte balk weergegeven. De rode vakjes moeten worden afgestemd op de linkerrand van de buitenste doos . Als ze niet correct weergegeven , controleer je markup voor fouten . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/computer-programming-languages/201309/87803.html' >Hoe gegevens in een DataSet object bewerken </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/computer-programming-languages/201309/87805.html' >Hoe je variabelen te verklaren als een vorm In VBA </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Computer Programming Languages</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86509.html" title="Hoe te MATLAB gebruiken Zonder Desktop " target="_self">Hoe te MATLAB gebruiken Zonder…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86836.html" title="Embedded functies in T - SQL " target="_self">Embedded functies in T - SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87097.html" title="Hoe maak je een script naar Rechten Toepassen om een database te maken " target="_self">Hoe maak je een script naar Re…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88739.html" title="MS Access 97 Tutorials " target="_self">MS Access 97 Tutorials </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87365.html" title="Hoe te Base64 Strings Decode " target="_self">Hoe te Base64 Strings Decode </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88090.html" title="Hoe te voegen een waarde Into een Identity Column " target="_self">Hoe te voegen een waarde Into …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87805.html" title="Hoe je variabelen te verklaren als een vorm In VBA " target="_self">Hoe je variabelen te verklaren…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87354.html" title="Hoe te vervangen Point Draw rechthoeken in WPF " target="_self">Hoe te vervangen Point Draw re…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87239.html" title="Hoe maak je een klasse File " target="_self">Hoe maak je een klasse File </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85353.html" title="Hoe te Random Negatieve & Positieve gehele getallen in Genereer C + + " target="_self">Hoe te Random Negatieve & Positieve gehe…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89566.html" title="Hoe maak je een klasse schrijven & Maak een aanleg in Java " target="_self">Hoe maak je een klasse schrijven & Maak …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/93738.html" title="Hoe Set Python Apps " target="_self">Hoe Set Python Apps </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88235.html" title="Hoe maak je een reeks IP-adressen pingen " target="_self">Hoe maak je een reeks IP-adressen pingen…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/perl-programming/201309/93328.html" title="Hoe te verwijderen Newline Perl " target="_self">Hoe te verwijderen Newline Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92540.html" title="Hoe kan ik PHP verbergen " target="_self">Hoe kan ik PHP verbergen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94726.html" title="Hoe de Windows SDK DLL in VB.NET Gebruik " target="_self">Hoe de Windows SDK DLL in VB.NET Gebruik…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91439.html" title="Hoe te Marquee Codes In PHP Nuke " target="_self">Hoe te Marquee Codes In PHP Nuke </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92399.html" title="Hoe maak je een schuine streep in PHP Escape " target="_self">Hoe maak je een schuine streep in PHP Es…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
