Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Manual - Introduccióm A Los DIV

    Enviado por

    Feni_X13dbz
    19 visualizações12 páginas

    Título original

    Manual - Introduccióm a los DIV

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    19 visualizações12 páginas

    Manual - Introduccióm A Los DIV

    Enviado por

    Feni_X13dbz

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 12

    Manual Uso de Cajas - DIV en HTML

    El elemento DIV
    Un div es una simple caja contenedora, si uno coloca un div con contenido adentro prcticamente no se vern cambios si no se realizan modificaciones por medio de css. En el siguiente ejemplo definiremos tres cajas y comprobaremos esto:
    <html> <head> <title>Analisis matematico I: Programa de la materia</title> </head> <body> <div class="centrado"> <div class="header"> <h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1> <p>Ciclo I - 2014</p> </div> <div class="contenido"> <h2>Primer parcial</h2> <p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p> <h2>Segundo parcial</h2> <p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p> <h2>Primer Recuperatorio</h2> <p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I <h2>Segundo Recuperatorio</h2> <p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II </div> </div> </body> </html>

    Al colocar un CSS que modifique las propiedades, al cdigo anterior. class=nombre nos permite colocarle propiedades css a distintos elementos HTML, de esta forma podemos diferenciarlos, ahora pruebe y analice el siguiente cdigo:
    <html> <head> <title>Analisis matematco I: Programa de la materia</title> <style> .centrado{ width: 700px; border: 1px solid silver; margin: 10px auto 10px auto; padding:0; } .header{ background: #ded4de; } h1{ text-align: center; margin-top: 0; padding-top: 10px;} .header p{ text-align: center; } h2{ margin: 0; padding: 5px 0 0 0; } .contenido{ padding: 10px 15px 10px 30px; } .contenido p{margin: 0; padding: 5px 0 0 0;} </style> </head> <body> <div class="centrado"> <div class="header"> <h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1> <p>Ciclo I - 2014</p> </div> <div class="contenido"> <h2>Primer parcial</h2> <p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p> <h2>Segundo parcial</h2> <p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p> <h2>Primer Recuperatorio</h2>

    <p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I <h2>Segundo Recuperatorio</h2> <p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II </div> </div> </body> </html>

    Hemos utilizado los elementos DIV, en un primer lugar para contener toda la pagina y centrarla y ponerle un borde gris, en segundo lugar para contener el titulo y colocarle un fondo de otro color y en tercer lugar para ponerle un margen interno al contenido de la web (padding). Creo que con este ejemplo ya se entiende cual es la utilidad del elemento div y por lo tanto se ve que sin este elemento no hay pagina web que pueda tener un diseo complejo sin l. As como es importante saber que el elemento div es muy util para el diseo de webs, tambin hay que saber que no se debe abusar de l, hay que usarlo cuando es necesario, y no hace falta colocarlo en todos lados. Es muy importante, principalmente a la hora del posicionamiento web, que se utilicen los elementos que se deben utilizar en cada caso, el orden de la web tiene que ser claro, esto ayuda a que el cdigo sea mucho mas legible, cuyo beneficio nos permite modificar la pagina de forma rpida en las actualizaciones y adems en consecuencia los robots de los buscadores entendern mas fcilmente de que se trata la pagina web. Haremos un pequeo repaso de lo los elementos html mas importantes y sus funcionalidades as nos queda claro y luego veremos cmo crear una pginas web ms o menos interesante y con un nivel de dificultad un poco ms elevado que los ejemplos vistos.

    ELEMENTOS HTML MS UTILIZADOS


    EL ELEMENTO P Nos sirve para colocar texto en las pginas web, sin dudas es uno de los ms utilizados su sintaxis es sencilla: <p>aca colocamos el texto, recordemos que los saltos de lneas en el cdigo HTML son ignorados</p> EL ELEMENTO H1, H2, H3, H4, H5, H6 Nos da la utilidad de ser las etiquetas para TITULOS, siempre que se escribe un titulo de algo si no estn utilizando alguna de estas etiquetas, deberan revisar su cdigo. Por otro lado, mientras ms importante es el contenido del ttulo, mas se debe acercar al h1 (por ejemplo el nombre de una pgina o blog) y cuanto menos importancia tenga el titulo (por ejemplo por ser un subtitulo dentro de un articulo) ms cerca del h6.

    EL ELEMENTO DIV Como vimos hace poco, es el elemento que nos permite ordenar distintas clases de elementos dentro de l y as poder dividir partes de la pgina, logrando la distribucin de elementos de la forma que queremos por medio de CSS. EL ELEMENTO A (enlaces) Los enlaces son fundamentales en las pginas web por permitirnos saltar de una pgina a otra y creo que no hace falta que diga mas nada. EL ELEMENTO IMG (IMAGENES) Hoy en da una web que posee solo texto y colores simples de fondos es prcticamente algo horrible y fuera de moda, por lo que las imgenes como elemento multimedia de la web es algo que hoy en da es indispensable. El elemento img tiene la siguiente sintaxis: <img src=mi_imagen.jpg alt=Titulo de la imagen/> LOS ELEMENTOS UL, OL, LI Es uno de los pocos elementos en html que nos permite crear vietas o listas ordenadas por nmeros y de esta forma organizar informaciones como por ejemplo instrucciones o tips.

    ESTRUCTURAR PGINAS CON DIV


    Ya vimos en la leccin anterior un ejemplo de cmo los divs sirven para encapsular elementos en forma de cajas y tambin vimos un repaso de los elementos ms utilizados a la hora de crear una pgina web. Ahora lo que haremos ser incluir un ejemplo de una web con dos columnas a modo de ejemplo y luego veremos porque se forma en dos columnas, la explicacin a esto es uno de los temas que ms dolores de cabeza da al principio a quienes quieren maquetar sin tabla y hacerlo utilizando div, la explicacin de cmo funcionan las propiedades float:right/left y clear:both; Una introduccin bsica al float Como hemos visto en todos los ejemplos generalmente los elementos de html se colocan uno abajo del otro, es decir, si uno coloca una imagen y luego un texto en un documento HTML, el resultado que obtendr es una imagen y abajo de la misma el texto. Este efecto pasa con la mayora de los elementos en HTML. La explicacin de porque sucede esto es que cada elemento viene con una configuracin predeterminada, y los elementos que se ubican uno debajo del otro tienen seteado por defecto la propiedad float como none.

    Esto hace que los elementos se comporten de esa manera, ahora la pregunta seria cmo hacer para que se comporten de otra forma? La propiedad float nos permite ubicar elementos a la derecha o izquierda en vez de colocarse siempre abajo del anterior, por ejemplo para ubicarlo a la derecha, se logra seteando con float: right desde el css al elemento. Y que se coloque a la izquiera es con float: left Aunque parezcan sencillas las cosas as como se dicen a la hora de disear hay varios problemas que se presentan con este modelo, pero todo tiene solucin. La mejor forma de aprender es con experiencia diseando una y otra vez y cuando sale un problema arreglrselas de alguna forma para solucionarlo! Por ello veremos cmo hacer una web cuya forma sea de un encabezado con un men como columna izquierda y algn contenido como columna derecha, aqu el cdigo, prueben agregar cosas, quitar propiedades a ver qu sucede, agregar nuevas y experimentar:
    <html> <head> <title>Pagina con dos columnas!</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fef} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #669A00; color: #1A1C1E;} #columna{ width: 200px; float: left; background: #eee} #contenido{ width: 580px; float: left; background: #CCCCCC; padding: 5px 10px 5px 10px;} #pie{clear: both;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div> <div id="columna"> <ul> <li>Home</li> <li>Carta</li> <li>Quienes Somos</li> <li>Donde estamos y como llegar</li> <li>Contactenos</li> </ul> </div> <div id="contenido"> <h2>Quienes Somos</h2> <p>LA VAQUITA es un lugar especial en donde podes disfrutar de una de las costumbres mas ricas de la Argentina, una rica parrillada.</p> <p>Un ambiente confortable, comodo y orientado a estar en el campo o una estancia, pero ubicado en pleno corazon de Capital Federal.</p> <h2>Nuestra Parrilla Libre</h2> <ul> <li>Asado</li> <li>Vacio</li> <li>Pollo</li> <li>Bondiola</li> <li>Arrollado de pollo</li> <li>Provoleta</li> <li>Pechito de cerdo</li> <li>Matambre a la pizza</li> <li>Chorizo</li> <li>Chinchulines</li> <li>Morcilla</li> <li>Lomo</li> </ul>

    </div> <div id="pie"> <p>Desarrollo de la Plataforma Web</p> </div> </div> </body> </html>

    Es importante aclarar que con este ejemplo no se busca un diseo bello y atractivo, sino que solo las ubicaciones de los elementos. Propiedades ID y CLASS En el ejemplo anterior aparecieron dos elementos nuevos dentro de algunos tags (las propiedades idy class) como por ejemplo en
    <div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div>

    En el ejemplo de arriba lo que hace el identificador ID es proporcionarnos un mtodo para instanciar un div en este caso el encabezado. Para qu sirve exactamente? bueno sirve para poder aplicarles propiedades css al elemento que se especifica, tambin es til cuando se trabaja por ejemplo con javascript pero eso es algo que aqu no lo veremos por el momento. Cmo se instancia ese elemento desde el CSS? para instanciar el encabezado por ejemplo desde el CSS lo que hacemos es colocar # (numeral) + nombre del identificador, en nuestro ejemplo seria #encabezado{ aqu las propiedades del CSS que valen para el elemento con id = Encabezado } Un ejemplo prctico:
    <html> <head> <title>Aprendiendo que es la propiedad ID</title> <style> #rojo{ color: red; } </style> <head> <body> <p>Este es un texto</p> <p id="rojo">este es un texto con ID = "rojo"</p> </body> </html>

    Como vern, el prrafo que contiene el ID=rojo se pone de color rojo porque se lo indicamos desde el CSS. Los elementos ID deben ser nicos en la pagina, es decir, no puede haber dos elementos con el mismo ID en un mismo documento HTML. Si lo que deseamos es crear varios elementos que tengan un estilo de css en comn, el identificador necesariamente tiene que ser un CLASS, y la forma de instanciar un class desde CSS es con . (punto) + nombre del elemento, como en el siguiente ejemplo seria p.impar y p.par:
    <html> <head> <title>Aprendiendo que es la propiedad CLASS</title>

    <style> p.impar{ background: #eeeeee; } p.par{ background: #dddddd; color: blue;} </style> <head> <body> <p class="impar">Este es nuestro parrafo numero 1 (impar)</p> <p class="par">Este es nuestro parrafo numero 2 (par)</p> <p class="impar">Este es nuestro parrafo numero 3(impar)</p> <p class="par">Este es nuestro parrafo numero 4(par)</p> </body> </html>

    Bsicamente esta es la mayor utilidad de estas dos propiedades MUY IMPORTANTES para el diseo de una pgina, ya que nos permite ponerles nombres a los elementos. La utilizacin de estas propiedades funcionan para todos los elementos de html, es decir a todos los elementos les podemos colocar la propiedad ID o Class segn corresponda para poder instanciarlos, sean estos elementos divs, p, a, span, ul, li, etc La propiedad Clear Esta propiedad sirve para limpiar el display de los floats anteriores, es decir para ser ms claro; por ejemplo se puede tener el caso de una presentacin de productos en columnas de 3, entonces lo que se puede hacer es colocar divisores con un ancho del 33% y asignarles a todos un float: left, como siempre mejor que explicar es que lo vean ustedes mismos y revisen el cdigo:
    <html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul>

    <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div>

    </div> </div> </body> </html>

    Si no entienden algo, lo que hice fue decirle por medio de CSS que todos los elementos div que se encuentran adentro de el div con id contenedor tengan ciertas propiedades, es decir para instanciar todos los divs de adentro de un elemento especfico lo que se hace es: elemento#nombre elementos{} o elemento.nombre elementos{} en este caso: div#contenido div{} /*nos dice las propiedades que les ponemos a TODOS los divs contenidos en div#contenido */ Por otro lado a cada elemento se asigno un ancho de 252px y les digo que tengan un float: left, lo que los ubica uno al lado del otro con un margen adems para que se separen. Y la lnea

    contenido div h2{text-align: center;} nos dice que simplemente centremos los ttulos de cada producto. Adems de todo esto que dije antes quizs las personas que son muy observadoras se dieron cuenta que pusimos que el fondo de contenido sea de color #F1F5F8 y en realidad se ve de color #cccccc, PUES ESTO ES UN ERROR CLASICO, al colocar elementos en float y no cerrarlos con un Clear: both, entonces el div contenedor no se comportara normalmente estirndose todo lo que necesitamos, por el contrario quedara as como lo ests viendo. La solucin es bastante sencilla, Quizs hay mejores, yo siempre he utilizado que al elemento siguiente que existe le colocamos un clear: both y el problema sta resuelto. Si no hay elemento me invento un div de un pixel de ancho y le coloco el clear both, aunque hay otras soluciones yo siempre termine aplicando esta que no es la ms elegante de todas pero funciona. Aqu la pagina con el problema resuelto:
    <html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div>

    <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>Desarrollo de la Plataforma Web</a></p> </div> </div> </body> </html>

    Bueno adems para solucionar ese problema el clear both nos sirve para decirle que se termine algun float, es decir como habrn visto el elemento se ubica a la izquierda siempre por lo que si uno quiere especificamente empezar de nuevo el listado no puede, otra vez un ejemplo:
    <html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h3{text-align: center;} #contenido h2{ clear: both; margin-left: 15px; padding-top: 15px;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado">

    <h1>Listado de Productos</h1> </div> <div id="contenido"> <h2>Notebooks Acer</h2> <div> <h3>Notebook Acer 5536</h3> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h3>Notebook Acer 5526</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div>

    <h2>Notebooks Compac</h2> <div> <h3>Notebook Compac 515</h3> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div>

    <div> <h3>Notebook Compac 815</h3> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Compac 585</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div>

    <div> <h3>Notebook Compac c415</h3> <ul> <li>14,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div>

    <h2>Notebooks Dell</h2> <div> <h3>Notebook dell 1520</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h3>Notebook Dell 1772</h3> <ul>

    <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div>

    <h2>Notebooks Toshiba</h2> <div> <h3>Notebook Toshiba L305</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Toshiba M375</h3> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>Desarrollo de la Plataforma Web</a></p> </div> </div> </body> </html>

    Es importante fijarnos que en este ejemplo organice las notebooks por marca, y parece que todo es normal pero si se fijan cada vez que dice Notebooks es un H2 , si van al css vern que los H2 de adentro del div contenido tienen la propiedad Clear: both;, este es el momento de decir, qu pasa si lo saco?, pues yo les digo squenlo y comprubenlo, de esta forma podrn entender mejor para que sirve el Clear: both; Como recomendacin les propongo que armen distintas estructuras webs, con los que se les ocurra y vallan viendo cmo solucionar los problemas, bsicamente esto se aprende por el famoso mtodo prueba y error, porque no vale la pena aprenderse todas las variaciones posibles, sino que a medida que se aparecen ver cmo resolverlas y con el tiempo uno se termina acostumbrando. Por otra parte las propiedades float y clear estn incluidas para TODOS los elementos HTML y funcionan de igual forma que en los divs.

    Você também pode gostar