|
|
|
| Sådan Indsæt et Div i en Div |
|
A element er en Hypertext Markup Element (HTML) element , der indeholder indhold. Webudviklere bruger ofte elementer , sammen med Cascading Style Sheet ( CSS) værdier for at definere, hvordan indholdet er struktureret og vises på websiden. Du kan indlejre elementer inde hinanden for at skabe indviklede formater uden at bruge tabeller. I denne tutorial, vil du oprette et ydre element og tre indre elementer , sammen med tre forskellige CSS stilarter. Hvad du har brug Computer kører Windows 7 Notesblok eller anden tekst editor Internet Explorer eller anden browser Vis Flere Instruktioner oprette en webside 1 Klik på "Start " knappen , peg på "Alle programmer " menupunkt , klik på " Tilbehør " menupunkt , og klik på " Notesblok " menupunktet .
2 Indtast efter markup i dokumentvinduet : Hej
Indlejret Div <html> er den yderste element og lader browseren kender det skal omsætte indholdet som HTML. <head> Element indeholder elementer , der definerer generelle oplysninger om siden. I dette eksempel definerer <title> element teksten i titellinjen , når siden vises. Den <body> element indeholder det indhold gengives på siden. <br> 3 <p> Klik på " File" menuen og klik på "Gem" menupunkt for at få vist " Gem som" dialogboks . <br> 4 <p> Vælg " Alle filer " fra "Gem som type " drop- down listen. Dette er nødvendigt for at forhindre " . Txt " udvidelse fra at blive føjet til slutningen af filnavnet . <br> 5. <p> Type " DivsExample.html " i "File name " feltet. <br> < br > 6 <p> Naviger til den placering, hvor du ønsker at gemme filen. Sørg for at du kan huske det til brug i senere trin. <br> 7. <p> Klik på "Gem " for at gemme filen. <br> Test din side <br> 8 <p> Klik på " Start" knappen og klik på "Computer" menupunktet . <br> 9 <p> Naviger til den placering, hvor du gemte " DivsExample.html " . <br> 10 < p> Dobbeltklik på " DivsExample.html ", og kontrollere, at den korrekte titel vises i browserens titellinje . Hvis den ikke gør , skal du kontrollere markup , du har skrevet til at sikre, at du ikke skrive noget forkert. <br> Opret Outer Div <br> 11 <p> Skriv følgende markup mellem <head> -tag og </head> tag: . <br> <p> <style type="text/css"> <br> <p> outerDiv { <br> <p> kant: solid 2px <style> element bruges til at definere inline CSS stilarter . Du forud navnet på den stil med en " ". at angive, at stil er valgt baseret på værdien af elementets "klasse" attribut . Derfor har du lige oprettet en inline CSS stil, der vil blive anvendt for alle elementer med en klasse attribut sat til " outerDiv " . Du definerer egenskaberne for stil inden krøllede parenteser . Ejendommene er defineret som " name: . Værdi par " <br> 12 <p> Skriv følgende markup mellem <body> og </body > tag : Hej <p> < div class = " outerDiv " > <br> <p> Ydre box <br> <p> < /div > <br> <p> Ved at indstille "klasse" attribut af <div> element til " outerDiv " du angiver, at den stil du har defineret i trin 1 skal anvendes på div . Indholdet af <div> element er " Ydre kassen. " Det er den tekst, der vil blive vist inde i boksen . <br> 13 <p> Klik på " File" menuen og klik på "Gem" menupunktet . <br> 14 <p> Bring " indlejret Div Demonstration " browservindue i forgrunden . Højreklik på vinduet, og klik på " Opdater" menupunkt. En kasse med en tan kant skal vises . Det skal indeholde teksten " Ydre kassen. " Hvis det ikke vises korrekt , tjekke din markup og rette eventuelle fejl . <br> Opret en Inner Div <br> 15 <p> Tilføj følgende CSS markup inde i <style> element under den afsluttende klammeparentes ( } ) i outerDiv stil vil blive anvendt til alle elementer , der har sin "klasse" attribut til " vBarDiv " . Stilen definerer en 100 procent sort bjælke 100 pixels højt og 300 pixels lang , der vil blive placeret i forhold til de andre elementer <br> 16 <p> Skriv følgende markup under teksten " Ydre box" : . <br> <p> <div class="vBarDiv"> <br> <p> < /div> <br> 17 <p> Klik på " File" menuen og klik på "Gem" menupunkt. < br > <br> 18 <p> Bring " Indlejret Div Demonstration " browservindue i forgrunden . Højreklik på vinduet, og klik på " Opdater" menupunkt. En sort boks bør udarbejdes inden for brune omkranset boksen under teksten. Hvis det ikke er , skal du kontrollere, at du ikke lave en skrivefejl . <br> Opret andre indvendige divs <br> 19 <p> Skriv følgende CSS markup under den afsluttende klammeparentes den varBarDiv style style definition skaber en rød boks, der er 100 pixels brede. Indholdet af kassen , vil være centreret <br> 20 <p> Tilføj følgende markup efter teksten " Ydre box" : . <br> <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> < /div> <br> 21 <p> Tilføj følgende markup under <div> element, der trækker den sorte bjælke : Hej <p> < div class = " wordDiv " > <br> <p> Box <br> <p> < /div> <br> 22 <p> Klik på " File" menuen og klik på "Gem" menupunkt . <br> 23 <p> Bring " Indlejret Div Demonstration " browservindue i forgrunden . Højreklik på vinduet, og klik på " Opdater" menupunkt. En rød kasse med ordet "Indre " bør vises over den sorte bjælke . En rød kasse med ordet " Box" skal vises under den sorte bjælke . De røde kasser bør afstemmes med den venstre kant af den ydre kasse . Hvis de ikke vises korrekt , tjekke din markup for fejl. <br> <br>
<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>Forrige ： <a class='LinkPrevArticle' href='/Programmering/computer-programming-languages/87803.html' >Sådan Rediger data i en DataSet objekt </a></li></p></td>
</tr>
<tr>
<td width="49%"> næste ： <a class='LinkNextArticle' href='/Programmering/computer-programming-languages/87805.html' >Sådan Erklær variable Som en formular i 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"> Relaterede artikler </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="/Programmering/computer-programming-languages/87283.html" title="Sådan Slet Cursor attribut i PL /SQL " target="_self">Sådan Slet Cursor attribut i PL /SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88591.html" title="Sådan Tag Out Alpha Tegn Men Leave numeriske tegn i SQL " target="_self">Sådan Tag Out Alpha Tegn Men Leave numeriske tegn i …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87207.html" title="Sådan Konverter HTML til SGML " target="_self">Sådan Konverter HTML til SGML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88271.html" title="Sådan Administrer Tilbagerulning Segmenter " target="_self">Sådan Administrer Tilbagerulning Segmenter </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87566.html" title="Hvordan man skriver en Preorder Traversal " target="_self">Hvordan man skriver en Preorder Traversal </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87383.html" title="Sådan Fortryd en Commit i Subversion " target="_self">Sådan Fortryd en Commit i Subversion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88017.html" title="Hvordan man skriver et program , der konverterer temperaturer mellem Fahrenheit & Celsius " target="_self">Hvordan man skriver et program , der konverterer temper…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87768.html" title="Sådan kopieres NotesRichTextItem som Variant " target="_self">Sådan kopieres NotesRichTextItem som Variant </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87755.html" title="Sådan slettes en mappe i VB.Net " target="_self">Sådan slettes en mappe i VB.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/87675.html" title="Hvordan at begrænse CSS filstørrelse " target="_self">Hvordan at begrænse CSS filstørrelse </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">Anbefalede Artikler </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="/Programmering/java-programming/89536.html" title="Sådan importeres en Android Sample til Eclipse " target="_self">Sådan importeres en Android Sample til Eclipse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/visual-basics-programming/96528.html" title="Sådan bruges VBScript History Object " target="_self">Sådan bruges VBScript History Object </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/visual-basics-programming/94481.html" title="Hvad er en Looping Macro " target="_self">Hvad er en Looping Macro </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/92658.html" title="Sådan bruges GUID'er som primær nøgle " target="_self">Sådan bruges GUID'er som primær nøgle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/cc-programming/85291.html" title="Hvordan man laver en lodret graf i C + + " target="_self">Hvordan man laver en lodret graf i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/ruby-programming/94208.html" title="Sådan installeres en Mongrel Ruby 1.9.2 " target="_self">Sådan installeres en Mongrel Ruby 1.9.2 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88551.html" title="Sådan bruges Vælg Hvor Match på alle kolonner i DB2 " target="_self">Sådan bruges Vælg Hvor Match på alle kolonner i DB2 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91142.html" title="Sådan Toggle divs med Javascript " target="_self">Sådan Toggle divs med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/visual-basics-programming/94913.html" title="Hvordan man skriver et script til Slet " target="_self">Hvordan man skriver et script til Slet </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/89428.html" title="Sådan formateres en tabel på TextView til Android " target="_self">Sådan formateres en tabel på TextView til Android </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 © Computer Viden http://www.computerdk.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
