Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5: Posicionamiento Principios que rigen el posicionamiento CSS Rejilla (Grid o grilla): Caja CSS:

Similar presentations


Presentation on theme: "HTML5: Posicionamiento Principios que rigen el posicionamiento CSS Rejilla (Grid o grilla): Caja CSS:"— Presentation transcript:

1 HTML5: Posicionamiento Principios que rigen el posicionamiento CSS Rejilla (Grid o grilla): Caja CSS:

2 HTML5: Ejemplo Posición Absoluta #box1 { position:absolute; top: 50px; left: 50px; background: #FA7C00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box2 { position:absolute; top: 50px; right: 50px; background: #FFFF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box3 { position:absolute; bottom: 50px; right: 50px; background: #00FF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box4 { position:absolute; bottom: 50px; left: 50px; background: #00FFFF; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } Box 1 Box 2 Box 3 Box 4 Código HTML Archivo CSS

3 HTML5: Ejemplo Posición Relativa #box1 { position:absolute; top: 50px; left: 50px; background: #FA7C00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box2 { position:absolute; top: 50px; right: 50px; background: #FFFF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box3 { position:relative; top: 10px; left: 10px; background: #00FF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box4 { position:absolute; bottom: 250px; left: 50px; background: #00FFFF; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } Box 1 Box 2 Box 4 Box 3 Código HTML Archivo CSS

4 HTML5: Formularios Primer Paso Nombre Apellido E-mail Web Comentario Nombre Apellido E-mail Web Comentario Segundo Paso

5 HTML5: Formularios y Tablas Etiqueta Fila Columna Nombre Apellido E-mail Web Comentario

6 HTML5: Formularios y Atributos Nombre Apellido E-mail Web Comentario Con este atributo se obliga a rellenar el campo Atributo required

7 HTML5: Formularios y Atributos Nombre Apellido E-mail <input type="email" required pattern="^[-\w.]+@{1}[-a-z0-9]+[.]{1}[a-z]{2,5}$" > Web Comentario Caracteres posibles Atributo pattern


Download ppt "HTML5: Posicionamiento Principios que rigen el posicionamiento CSS Rejilla (Grid o grilla): Caja CSS:"

Similar presentations


Ads by Google