| Home  | Otthon  | Hardver  | Hálózat  | Programozás  | Szoftver  | Hibaelhárítás  | Systems  |   
Programozás  
  • C /C + + programozási

  • Computer Programozási Nyelvek

  • Delphi programozási

  • Java programozási

  • JavaScript programozás

  • PHP /MySQL programozás

  • Perl

  • Python programozás

  • Ruby programozási

  • Visual Basics programozás
  •  
    Számítógépes ismeretek >> Programozás >> Computer Programozási Nyelvek >> Content
    Hogyan beszúrása a Div a Div
    A
    elem a Hypertext Markup Element ( HTML) elem, amely a tartalmat. A webfejlesztők gyakran
    elemeket , valamint a Cascading Style Sheet ( CSS ) értékeket az határozza meg, hogy a tartalom felépítése és megjelenik a weboldalon . Ágyazhatók
    elemek belsejében egymásra az új bonyolult formátumok használata nélkül táblázatok . Ebben a leírásban , akkor létrehoz egy külső
    elemet, és három belső
    elemet , valamint három különböző CSS stílusokat . Ez az, amire szüksége van
    számítógép Windows 7
    Jegyzettömb , vagy más szövegszerkesztővel
    Internet Explorer vagy más böngésző

    Show More utasítások
    Hozzon létre egy weblap
    1.

    Kattintson a " Start" gombra, mutasson a " Minden program " menüpontra , kattintson a " Tartozékok" menüpontra , majd kattintson a "Notepad " menüpontot .
    2

    Írja be a követően jelölés a dokumentum ablakban :



    div <html> a legkülső elem , és lehetővé teszi a böngésző tudja, hogy meg kell jelennie a tartalma, mint a HTML . A <head> elem tartalmaz olyan elemeket , amelyek meghatározzák az általános információkat az oldalon. Ebben a példában , a <title> elem határozza meg a képen látható a címsorban , ha az oldal jelenik meg. A <body> elem tartalmazza a tartalmat nyújtott az oldalon. <br> 3. <p> Kattintson a "Fájl " menüt, és kattintson a "Save" menüpontot , hogy megjelenjen a " Mentés másként " párbeszédablak . <br> 4 <p> Válassza ki a " Minden fájl " -ból a " Save as type" legördülő listából . Erre azért van szükség , hogy megakadályozzák a " . Txt " kiterjesztés attól, hogy hozzá a végén a fájl nevét. <br> 5 <p> Type " DivsExample.html " a "File name" mezőben . <br> < br > 6 <p> Keresse meg azt a helyet, ahová menteni szeretné a fájlt. Ne felejtse el , hogy a felhasználás a későbbi lépések . <br> 7 <p> Kattintson a " Save " gombra a fájl mentéséhez . <br> Tesztelje Oldal <br> 8. <p> Kattintson a "Start " gombra, és kattintson a " Computer" menüpontot . <br> 9 <p> Keresse meg a helyet, ahová mentette " DivsExample.html " . <br> 10 < p > kattintson duplán a " DivsExample.html ", és ellenőrizze, hogy a helyes cím jelenik meg a böngésző címsorában . Ha nem , ellenőrizze a jelölést beírt , hogy megbizonyosodjon arról , hogy nem írjon semmit rosszul . <br> Létre a külső Div <br> 11 <p> Írja be a következő jelölést között a <head> és </head > tag: <br> <p> <style type="text/css"> <br> <p> . outerDiv { <br> <p> határ : szilárd 2px <style> elem meghatározására használják inline CSS stílusokat . Ha megelőzi a nevét, a stílus a " . " azt jelzi, hogy a stílus alapján választjuk ki az értékét az elem "class " attribútum . Ezért van most létrehozott egy inline CSS stílust, alkalmazni fogják túl minden olyan elem, a class attribútum értéke " outerDiv " . Ön határozza meg a tulajdonságait a stílus a kapcsos zárójelek . A tulajdonságok meghatározása " név: érték pár . " <br> 12 <p> Írja be az alábbi jelölést a <body> címke és a </body > tag: <br> <p> < div class = " outerDiv " > <br> <p> Külső doboz <br> <p> < /div > <br> <p> beállítása "class " attribútuma <div> elem " outerDiv ", akkor azt jelzi, hogy a stílus, amit megadott 1. lépésben kell alkalmazni a div . A tartalom a <div> elem "külső doboz . " Ez a szöveg , ami megjelenik a dobozban. <br> 13 <p> Kattintson a "Fájl " menüt, és kattintson a "Save" menüpontot . <br> 14 <p> Hozd a " Beágyazott Div bemutató " a böngésző ablak az előtérben . Kattintson a jobb gombbal az ablakot, és kattintson a " Refresh" menüpontot . A doboz egy tan határon jelenjen meg . Tartalmaznia kell a szöveg: " külső doboz . " Ha nem jelenik meg helyesen , ellenőrizze a jelölést , és kijavítani a hibát . <br> Hozzon létre egy belső Div <br> 15 <p> hozzá a következő CSS jelölés belül <style> elem alatt a záró zárójel ( } ) a outerDiv stílust kell alkalmazni minden olyan elem, amely a "class " attribútum értéke " vBarDiv " . A stílus határozza meg a 100 százalékos fekete sáv 100 pixel magas és 300 pixel hosszú, hogy kell elhelyezni, viszonyítva a többi elem . <br> 16 <p> Írja be az alábbi jelölés alatt a szöveg: " külső box" : <br> <p> <div class="vBarDiv"> <br> <p> < /div> <br> 17 <p> Kattintson a "Fájl " menüt, és kattintson a "Save" menüpontot . < br > <br> 18 <p> Hozd a " div bemutató " a böngésző ablak az előtérben . Kattintson a jobb gombbal az ablakot, és kattintson a " Refresh" menüpontot . A fekete doboz kell vonni belül barna határolt box , alatta a szöveg . Ha nem , győződjön meg róla, hogy nem egy gépelési hiba . <br> Létrehozása egyéb belső Divs <br> 19 <p> Írja be az alábbi CSS jelölés alatt a záró zárójel a a varBarDiv stílus stílus meghatározása létrehoz egy piros doboz, 100 pixel széles . A tartalom a doboz középre . <br> 20 <p> hozzá a következő jelölés után a szöveg " Külső box" : <br> <p> <div class="wordDiv"> <br> <p> belső <br> <p> < /div> <br> 21 <p> hozzá a következő jelölés alatt <div> elemet , hogy felhívja a fekete sáv : <br> <p> < div class = " wordDiv " > <br> <p> Box <br> <p> < /div> <br> 22 <p> Kattintson a "Fájl " menüt, és kattintson a "Save" menüpontot . <br> 23 <p> Hozd a " div bemutató " a böngésző ablak az előtérben . Kattintson a jobb gombbal az ablakot, és kattintson a " Refresh" menüpontot . A piros doboz a " belső " meg kell jelennie felett fekete sáv . A piros doboz a " Box" meg kell jelennie alatt fekete sáv . A piros dobozokat össze kell hangolni a bal szélén a külső doboz . Ha nem jelennek meg megfelelően , ellenőrizze a jelölést a hibákat . <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>Previous : <a class='LinkPrevArticle' href='/Programozas/computer-programming-languages/87803.html' >Hogyan szerkesszünk Adatok a DataSet objektum </a></li></p></td> </tr> <tr> <td width="49%"> next : <a class='LinkNextArticle' href='/Programozas/computer-programming-languages/87805.html' >Hogyan állapítsa változók A forma 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"> Kapcsolódó cikkek </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="/Programozas/computer-programming-languages/87371.html" title="Lépések a Data Processing Cycle " target="_self">Lépések a Data Processing Cycle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/88282.html" title="Windows Script Host bemutatója " target="_self">Windows Script Host bemutatója </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/86986.html" title="Hogyan növeljük RGB Intensity programozás " target="_self">Hogyan növeljük RGB Intensity programozás </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/87814.html" title="Előnyei és hátrányai Bubble Rendezés " target="_self">Előnyei és hátrányai Bubble Rendezés </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/87567.html" title="Hogyan terhelje mutató a C + + " target="_self">Hogyan terhelje mutató a C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/86881.html" title="Hogyan fordítsa le a D -kódex Vim " target="_self">Hogyan fordítsa le a D -kódex Vim </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/87329.html" title="Hogyan kell használni a PHP Hívjon API " target="_self">Hogyan kell használni a PHP Hívjon API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/88714.html" title="Hogyan lehet megállítani az Infinite Loop " target="_self">Hogyan lehet megállítani az Infinite Loop </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/88914.html" title="Hogyan lehet létrehozni egy relációs adatmodell " target="_self">Hogyan lehet létrehozni egy relációs adatmodell </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/87510.html" title="Hogyan készítsünk egy HTTP húr link " target="_self">Hogyan készítsünk egy HTTP húr link </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">Kiemelt cikkek </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="/Programozas/computer-programming-languages/87204.html" title="Hogyan keressünk , ha a Char egész szám az ASP.NET " target="_self">Hogyan keressünk , ha a Char egész szám az ASP.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/visual-basics-programming/95141.html" title="Függvények listája a Visual Basic 6.0 " target="_self">Függvények listája a Visual Basic 6.0 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/python-programming/94121.html" title="Milyen számítógépes program Python 2.2.1 ? " target="_self">Milyen számítógépes program Python 2.2.1 ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/java-programming/90088.html" title="ConnectException : Kapcsolat elutasítva a Java " target="_self">ConnectException : Kapcsolat elutasítva a Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/php-mysql-programming/91789.html" title="Hogyan hozzunk létre új bemenet PHP Amikor a gomb megnyomása " target="_self">Hogyan hozzunk létre új bemenet PHP Amikor a gomb meg…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/visual-basics-programming/94494.html" title="Hogyan lehet létrehozni a JPEG Visual Basic 2010 Express & ImageDraw " target="_self">Hogyan lehet létrehozni a JPEG Visual Basic 2010 Expre…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/visual-basics-programming/95264.html" title="Visual Basic 6 Step -by- Step " target="_self">Visual Basic 6 Step -by- Step </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/php-mysql-programming/91508.html" title="Hogyan kell a Speed ​​Up INSERT MySQL " target="_self">Hogyan kell a Speed ​​Up INSERT MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/computer-programming-languages/86318.html" title="IDE hibakereső eszközök " target="_self">IDE hibakereső eszközök </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programozas/java-programming/89769.html" title="Hogyan készítsünk egy JavaScript motor " target="_self">Hogyan készítsünk egy JavaScript motor </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 © Számítógépes ismeretek http://hu.wingwit.com <script language='javascript' src='/ad/201310/1.js'></script></td> </tr> </table> </div> </body> </html>