, tillsammans med tre olika CSS-format . Saker du behöver
dator som kör Windows 7
Anteckningar eller annan textredigerare Review, Internet Explorer eller annan webbläsare
Visa fler instruktioner , Skapa en Web Review Page
1
Klicka på " Start " -knappen , peka på " Alla program " i menyn , klicka på " tillbehör " i menyn , och klicka på " Anteckningar " i menyn .
2
Ange efter uppmärkning i dokumentfönstret :
Kapslad Div <html> är den yttersta delen och låter webbläsaren vet att det bör omsätta innehållet som HTML . <head><meta name=viewport content="width=device-width, initial-scale=1.0"> Element innehåller element som definierar allmän information om sidan . I detta exempel definierar elementet <title> texten som visas i namnlisten när sidan visas . Den <body> element innehåller det innehåll återges på sidan . <br> 3 <p> Klicka på " Arkiv " -menyn och klicka på " Spara " i menyn för att visa " Spara som " i dialogrutan . <br> 4 <p> Välj " Alla filer " från " Spara som typ " listrutan . Detta är nödvändigt för att förhindra " . Txt " förlängning från att läggas till i slutet av filnamnet . <br> 5 <p> Type " DivsExample.html " i " File name " fältet . <br> <br > 6 <p> Navigera till den plats där du vill spara filen . Se till att du kommer ihåg den för användning i senare steg . <br> 7 <p> Klicka på " Spara" för att spara filen . <br> Testa sidan <br> 8 <p> Klicka på " Start" och klicka på " Dator " i menyn . <br> 9 <p> Navigera till den plats där du sparade " DivsExample.html " . <br> 10 <p> Dubbelklicka på " DivsExample.html " och kontrollera att rätt titel visas i webbläsarens namnlist . Om den inte gör det , kolla uppmärkning du skrev att du inte skriver något felaktigt . <br> Skapa den yttre Div <br> 11 <p> Skriv följande kod mellan <head><meta name=viewport content="width=device-width, initial-scale=1.0"> taggen och < /head> : . <br> <p> <style type="text/css"> <br> <p> outerDiv { <br> <p> kant: fasta 2px <style> element används för att definiera infogade CSS-format . Du föregår namnet på stilen med en " . " för att indikera att stil är vald baserat på värdet av elementets "klass" attributet. Därför har du nyss skapat en infogad CSS stil som kommer att tillämpas för alla element med attributet class inställd på " outerDiv " . Du definierar egenskaperna för stil inom klammerparenteser . Egenskaperna definieras som " namn : . Värdepar " <br> 12 <p> Skriv följande kod mellan <body> och < /body > -taggen : <br> <p> < div class = " outerDiv " > <br> <p> Yttre rutan <br> <p> < /div > <br> <p> Genom att ställa in " class "-attributet i <div> elementet " outerDiv " anger du att den stil du definierat i steg 1 ska tillämpas på div . Innehållet i <div> elementet är "Outer låda". Detta är den text som kommer att visas i rutan . <br> 13 <p> Klicka på " Arkiv " -menyn och klicka på " Spara " i menyn . <br> 14 <p> Ta med " Kapslade Div Demonstration " webbläsarfönster i förgrunden . Högerklicka på fönstret och klicka på " Uppdatera " i menyn . En låda med en solbränna gränsen ska visas . Det ska innehålla texten " yttre rutan . " Om det inte visas korrekt , kontrollera din kod och korrigera eventuella fel . <br> Skapa en inre Div <br> 15 <p> Lägg till följande CSS-kod inuti <style> elementet under avslutande parentesen ( } ) i outerDiv stil kommer att tillämpas på alla element som har sin " klass " attributet satt till " vBarDiv " . Stilen definierar ett 100 procent svart bar 100 pixlar hög och 300 pixlar långa som ska placeras i förhållande till de övriga elementen <br> 16 <p> Skriv följande kod nedanför texten " asken " : . <br> <p> <div class="vBarDiv"> <br> <p> < /div > <br> 17 <p> Klicka på " Arkiv " -menyn och klicka på " Spara " i menyn . <br > <br> 18 <p> Ta den "nischade Div Demonstration " webbläsarfönster i förgrunden . Högerklicka på fönstret och klicka på " Uppdatera " i menyn . En svart ruta bör dras inuti brun - gränsade rutan under texten . Om det inte , kontrollera att du inte har gjort ett skrivfel . <br> Skapa andra inre Divar <br> 19 <p> Skriv in följande CSS markup under stängning stag av den varBarDiv stil stil definition skapar en röd ruta som är 100 pixlar bred . Innehållet i lådan kommer att vara centrerad <br> 20 <p> Lägg till följande kod efter texten " asken " : . <br> <p> <div Class="wordDiv"> <br> <p> Inre <br> <p> < /div > <br> 21 <p> Lägg till följande kod under <div> element som drar det svarta fältet : <br> <p> < div class = " wordDiv " > <br> <p> Box <br> <p> < /div > <br> 22 <p> Klicka på " Arkiv " -menyn och klicka på " Spara " i menyn . <br> 23 <p> Ta den "nischade Div Demonstration " webbläsarfönster i förgrunden . Högerklicka på fönstret och klicka på " Uppdatera " i menyn . En röd ruta med ordet " inre" ska visas ovanför det svarta fältet . En röd ruta med ordet " Box " ska visas nedanför det svarta fältet . De röda boxar bör anpassas till den vänstra kanten av den yttre rutan . Om de inte visas på rätt sätt , kontrollera din markup för fel . <br> <br>
<div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div>
<div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div>
</div>
</td>
</tr>
</table>
<table class=dhang1 bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<div class=dhang7></div>
<table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/87803.html' >Hur till Redigera data i ett DataSet Object </a></li></p></td>
</tr>
<tr>
<td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/87805.html' >Hur man deklarerar variabler som en form I VBA </a></li></td>
</tr>
</table></td>
</tr>
</table>
<div class=dhang7></div>
<table class=s770x246 >
<tr>
<td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table class=c1 >
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/computer-programming-languages/87712.html" title="Hur man skapar en Multi -Line Meddelande i Vb.Net " target="_self">Hur man skapar en Multi -Line Meddelande i Vb.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88363.html" title="Oracle Business Intelligence-verktyg " target="_self">Oracle Business Intelligence-verktyg </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86844.html" title="Hur förbli inloggad till ColdFusion " target="_self">Hur förbli inloggad till ColdFusion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86959.html" title="Hur du formaterar den dag från DateChooser i Flash " target="_self">Hur du formaterar den dag från DateChooser i Flash </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88323.html" title="Hur du tar bort historik i ASP.NET " target="_self">Hur du tar bort historik i ASP.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88623.html" title="Vad är CSV " target="_self">Vad är CSV </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87631.html" title="Användning av Python Yield " target="_self">Användning av Python Yield </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87445.html" title="Hur man förlänga DIV Höjd " target="_self">Hur man förlänga DIV Höjd </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86757.html" title="Konvertera en JDW till en Eclipse " target="_self">Konvertera en JDW till en Eclipse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86652.html" title="Hur man tar bort den Coredata iPhone Emulator " target="_self">Hur man tar bort den Coredata iPhone Emulator </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 class=c3 >
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Utvalda artiklarna </td>
</tr>
</table>
<table class=c4 >
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95484.html" title="Hur man laddar en tabell från en CSV- fil med Visual Basic " target="_self">Hur man laddar en tabell från en CSV- fil med Visual B…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90599.html" title="Hur man skapar turbaserat spel " target="_self">Hur man skapar turbaserat spel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93719.html" title="Hur man installerar Python i WinPE " target="_self">Hur man installerar Python i WinPE </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86292.html" title="Binära krypteringsalgoritmer " target="_self">Binära krypteringsalgoritmer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95485.html" title="Hur att fylla en textruta Från Combo i Access 2007 " target="_self">Hur att fylla en textruta Från Combo i Access 2007 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/91557.html" title="Hur man läser & Display en PHP Cookie Värde i AS3 " target="_self">Hur man läser & Display en PHP Cookie Värde i AS3 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85865.html" title="Hur konvertera INT variabel String " target="_self">Hur konvertera INT variabel String </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95595.html" title="Hur Tillåt Personsökning i DataGrid " target="_self">Hur Tillåt Personsökning i DataGrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/perl-programming/93209.html" title="Hur du använder Ajax Med Perl " target="_self">Hur du använder Ajax Med Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90681.html" title="Hur man skapar ett slumptal i Java " target="_self">Hur man skapar ett slumptal i Java </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div class=dhang8></div>
<div class=dhang1></div>
<table class=b1>
<tr>
<td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz
</td>
</tr>
</table>
<div class=dhang1></div>
</div>
</body>
</html>