HTML

1.
HTML 5
HTML 5 es la prxima gran versin de HTML. Introduce un montn de nuevos elementos que harn que nuestras pginas sean ms semntica. Esto har que sea mucho ms fcil para los motores de bsqueda y lectores de pantalla para navegar por nuestras pginas, y mejorar la experiencia web para todos. Adems, HTML 5 tambin incluir APIs para dibujar grficos de fantasa en la pantalla, el almacenamiento de datos fuera de lnea, arrastrar y soltar, y mucho ms. Vamos a empezar el marcado de la pgina del blog.
2. Estructura bsica
Antes de comenzar el marcado de la pgina que debe obtener directamente de la estructura general:
En HTML 5 hay etiquetas especficas destinadas para el marcado de la cabecera, navegacin, barra lateral y el pie. En primer lugar, echar un vistazo a la marca y te lo explicar despus:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
<!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav>  </nav> <section id="intro">  </section> <section>  </section> <aside>  </aside> <footer>  </footer> </body> </html>
Todava se parece a formato HTML, pero hay algunas cosas a tener en cuenta:

En HTML 5, hay un solo tipo de documento. Se declara al principio de la pgina <! DOCTYPE html>.Simplemente le dice al navegador que est tratando con un documento HTML. La cabecera nueva etiqueta se envuelve alrededor de los elementos introductorios, como el ttulo de la pgina o un logotipo. Tambin podra incluir una tabla de contenido o un formulario de bsqueda.Cada encabezado contiene normalmente una etiqueta de encabezado de <h1> a <h6>. En este caso, la cabecera se usa para introducir la pgina entera, pero vamos a utilizar para introducir una seccin de la pgina un poco ms tarde. El nav-etiqueta se utiliza para contener los elementos de navegacin, tales como la navegacin principal de un sitio o de una navegacin ms especializados como siguiente / anterior-links. La seccin de etiqueta se utiliza para denotar una seccin en el documento. Puede contener todo tipo de marcas y varias secciones se pueden anidar dentro de otras. a un lado se utiliza para envolver el contenido relacionado con el contenido principal de la pgina que an poda soportar por s mismo y tener sentido. En este caso estamos usando para la barra lateral. El pie de pgina-etiqueta debe contener informacin adicional sobre el contenido principal, como por ejemplo informacin sobre quin la escribi, la informacin de derechos de autor, enlaces a documentos relacionados, etc. En lugar de usar divs para contener diferentes secciones de la pgina que estamos usando las etiquetas apropiadas, semnticos. Ellos hacen mucho ms fcil para los motores de bsqueda y lectores de pantalla para averiguar qu es lo que en una pgina.
3. Marcar la navegacin
La navegacin se marca exactamente igual que lo haramos en HTML 4 o XHTML, utilizando una lista desordenada. La clave es que esta lista se coloca dentro de las etiquetas de navegacin-.
1. <nav>
2. 3. 4. 5. 6. 7. 8. 9.
<ul> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> </ul> </nav>
4. Marcar la Introduccin
Ya hemos definido una nueva seccin en el documento mediante la etiqueta de seccin. Ahora slo necesitamos un poco de contenido.
1. 2. 3. 4. 5. 6. 7. <section id="intro"> <header> <h2>Do you love flowers as much as we do?</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </section>
Aadimos un id a la etiqueta de seccin para que podamos identificar ms tarde cuando el estilo. Usamos la etiqueta de cabecera para envolver el elemento introductorio h2. Adems de describir un documento completo, el encabezado de etiqueta tambin debe ser usado para describir secciones individuales.
5. Marcar la rea de contenido
principal
Nuestra rea de contenido principal consta de tres secciones: la entrada del blog, los comentarios y el formulario de comentarios. Usando nuestro conocimiento sobre las nuevas etiquetas estructurales en HTML 5, que debera ser fcil de marcar.
Marcacin de la publicacin en tu blog

Pasa por el marcado y voy a explicar los nuevos elementos despus.
1. 2. 3. 4. 5. <section> <article class="blogPost"> <header> <h2>This is the title of a blog post</h2> <p>Posted on <time datetime="2009-0629T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> <a href="#comments">3 comments</a></p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rut rum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultri cies eu pharetra dictum, laoreet id odio...</p> </article> </section>
6. 7.
8. 9.
Comenzamos una nueva seccin y envolver el blog entero en un artculo de etiqueta. La etiqueta de artculo se utiliza para denotar una entrada independiente en un blog, discusin, enciclopedia, etc, y es ideal para usar aqu. Como estamos viendo los detalles de un solo puesto que slo tenemos un artculo, pero en la primera pgina del blog nos envuelva cada mensaje en un artculo de etiqueta. El elemento de encabezado se utiliza para presentar el encabezado y los metadatos sobre el blog. Le decimos al usuario cuando el mensaje fue escrito, que la escribi y la cantidad de comentarios que tiene.Tenga en cuenta que la indicacin de la hora se envuelve en una-Tag. Esta etiqueta tambin es nuevo para HTML 5 y se utiliza para marcar un lugar especfico en el tiempo. Los contenidos del atributo datetime debe ser:
1. El ao seguido de un guin grfico (un signo menos para que no tipografa nerds) 2. El mes seguido de un guin grfico 3. 4. 5. 6. La fecha Una T mayscula para indicar que vamos a especificar la hora local La hora local en el formato hh: mm: ss El pariente zona horaria GMT. Estoy en Dinamarca, que es de 1 hora despus de GMT, por lo que escribir 01. Si usted estuviera en Colorado que sera de 7 horas menos GMT, y usted escribira -07.
Marcacin de los Comentarios

Marcacin de los comentarios es bastante sencilla. No hay nuevas etiquetas o atributos se utilizan.
ver claro copia al portapapeles de impresin ?
1. 2. 3. 4. 5. 6. 7. 8. 9.
<section id="comments"> <header> <h3>Comments</h3> </header> <article> <header> <a href="#">George Washington</a> on <time datetime="2009-0629T23:35:20+01:00">June 29th 2009 at 23:35</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e t dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
10. 11. 12. 13. 14. 15. 16. 17.
</article> <article> <header> <a href="#">Benjamin Franklin</a> on <time datetime="2009-0629T23:40:09+01:00">June 29th 2009 at 23:40</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e t dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </article> </section>
Marcando el formulario de comentarios

Varias mejoras a las formas se han introducido en HTML 5. Usted ya no tiene que hacer del lado del cliente la validacin de los campos requeridos, correos electrnicos, etc El navegador se encarga de esto para usted.
1. <form action="#" method="post"> 2. <h3>Post a comment</h3> 3. <p> 4. <label for="name">Name</label> 5. <input name="name" id="name" type="text" required /> 6. </p> 7. <p> 8. <label for="email">E-mail</label> 9. <input name="email" id="email" type="email" required /> 10. </p> 11. <p> 12. <label for="website">Website</label> 13. <input name="website" id="website" type="url" /> 14. </p> 15. <p> 16. <label for="comment">Comment</label> 17. <textarea name="comment" id="comment" required></textarea> 18. </p> 19. <p><input type="submit" value="Post comment" /></p> 20. </form>
Hay nuevos dos nuevos tipos de entradas, email y url. Email especifica que el usuario debe introducir una cuenta de correo electrnico y URL que el usuario debe introducir una direccin web vlida. Si se escribe como un atributo necesario, el usuario no puede enviar un campo vaco. "Obligatorio" es un atributo booleano, nuevo en HTML 5. Slo significa que el atributo debe ser declarada sin valor.
Marcacin de la barra lateral y pie de pgina

El marcado de la barra lateral y pie de pgina es muy simple. Algunos tramos con algo de contenido dentro de la correspondiente retirada de tierras y las etiquetas pie de pgina-. Puede ver el marcado final, sin estilo aqu . Ya por el estilo.
6. Aplicar estilos con CSS 3

CSS 3 se basa en los principios sobre los estilos, selectores y la cascada que tan bien conocemos desde versiones anteriores de CSS. Se aade un montn de nuevas caractersticas, incluyendo nuevos selectores, pseudo-clases y propiedades. El uso de estas nuevas caractersticas se hace mucho ms fcil para configurar su diseo. Vamos a zambullirse
Configuracin bsica
Para empezar, vamos a definir algunas reglas bsicas sobre tipografa, color de fondo de la pgina, etc Usted va a reconocer todo esto de CSS 2.1
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. /* Makeshift CSS Reset */ { margin: 0; padding: 0; } /* Tell the browser to render HTML 5 elements as block */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p{ padding-bottom: 22px; }
First we reset margi En primer lugar, restablecer margen y el relleno estilos-con una regla simple. En un entorno de produccin que usara un Reset CSS ms completo como Eric Meyer (para CSS 2.1), pero para el alcance de este tutorial va a hacer. Luego dicen que el navegador muestre todos los nuevos elementos de HTML 5 como bloque. Los navegadores estn muy bien con elementos que no reconocen (esta es la razn por HTML 5 es un tanto hacia atrs compatible), pero no saben cmo esos elementos deben ser prestados de forma predeterminada. Tenemos que decirles esto hasta que la norma se aplica de forma generalizada. Tambin tenga en cuenta cmo he optado por el tamao de las fuentes en pxeles en lugar de ems o%.Esto es para mantener el carcter progresivo del tutorial. Cuando los principales navegadores un da son completamente terminada la aplicacin de HTML 5 y CSS 3 que todos tendrn acceso a la pgina zoom en lugar de cambiar el tamao de texto justo. Esto elimina la necesidad de definir tamaos en unidades relativas, como el navegador de la escala de la pgina de todos modos. Vea lo que la pgina se ve como con el estilo bsico aplicado. Ahora podemos pasar a peinar el resto de la pgina. No hay estilos adicionales son necesarios para la cabecera, as que vamos a ir directamente a la navegacin.
7. Aplicar estilos a la navegacin

Es importante sealar que la anchura de la carrocera se ha definido como 940px y que se ha centrado.Nuestra barra de navegacin tiene que abarcar todo el ancho de la ventana, as que tendremos que aplicar algunos estilos adicionales:
1. 2. 3. 4. 5. 6. nav { position: absolute; left: 0; width: 100%; background: url("nav_background"); }
Posicionamos el nav-elemento absolutamente, alinear a la izquierda de la ventana y hacer que abarcan todo el ancho. Haremos el centro de la lista anidada para mostrarla dentro de los lmites del diseo:
1. 2. 3. 4. 5. nav ul { margin: 0 auto; width: 940px; list-style: none; }
Ahora vamos a definir algunos estilos adicionales para que los elementos de navegacin vea ms bonita y alinearlos a la red se basa en el diseo. Tambin he incluido un estilo para resaltar la pgina que el usuario est activada, y algunos estilos de encargo para la suscripcin de enlace.
1. nav ul li { 2. float: left; 3. } 4. 5. nav ul li a { 6. display: block; 7. margin-right: 20px; 8. width: 140px; 9. font-size: 14px; 10. line-height: 44px; 11. text-align: center; 12. text-decoration: none; 13. color: #777; 14. } 15. 16. nav ul li a:hover { 17. color: #fff; 18. } 19. 20. nav ul li.selected a { 21. color: #fff; 22. } 23. 24. nav ul li.subscribe a { 25. margin-left: 22px; 26. padding-left: 33px; 27. text-align: left; 28. background: url("rss.png") left center no-repeat; 29. }
8. Aplicar estilos a la Introduccin

El marcado para la presentacin es bastante simple: una seccin con un ttulo y un prrafo de texto. Sin embargo, vamos a utilizar algunos de los nuevos trucos de CSS 3 para que se vea ms atractivo.
1. 2. 3. 4. 5. 6. 7.
#intro { margin-top: 66px; padding: 44px; background: #467612 url("intro_background.png") repeat-x; background-size: 100%; border-radius: 22px; }
Estamos utilizando dos propiedades nuevas. El primero es el fondo de tamao, lo que permite ampliar o reducir la imagen de fondo. En nuestro caso, se escala al 100% en ambos ejes. Si la caja se expande a medida que agregamos ms contenido a la misma, el gradiente de fondo se ampliar tambin. Esto es algo que no era posible en CSS 2.1 sin no-marcado semntico y diversos asuntos navegador. que no era posible en CSS 2.1 sin no-marcado semntico y diversos asuntos navegador.
La propiedad nueva segunda es la frontera de radio, que se aplica esquinas redondeadas para el elemento. El radio de las esquinas redondeadas son 22px en cada esquina. Podra especificar valores diferentes para cada esquina o elegir para redondear esquinas slo individuales.
Desafortunadamente, ninguna de las propiedades se aplican plenamente en los principales navegadores.Sin embargo, podemos obtener algn apoyo mediante el uso de atributos especficos del proveedor.Antecedentes de tamao con el apoyo de las nuevas versiones de Safari, Opera y Konqueror. Border-radius es compatible con las nuevas versiones de Safari y Firefox.
1. #intro { 2. ... 3. /* Background-size not implemented yet */ 4. -webkit-background-size: 100%; 5. -o-background-size: 100%; 6. -khtml-background-size: 100%; 7. 8. /* Border-radius not implemented yet */ 9. -moz-border-radius: 22px; 10. -webkit-border-radius: 22px; 11. }
Puesto que tenemos un background-color definido, no habr mayores problemas en los navegadores que no admitan fondo de tamao, tales como Firefox. Ahora slo tenemos que el estilo del ttulo y el texto.
view plaincopy to clipboardprint?
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
#intro h2, #intro p{ width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; }
La imagen de la flor se pueden aadir fcilmente al darle # intro una imagen de fondo en segundo lugar, algo que apoya CSS 3.
1. 2. 3. 4. 5. 6.
#intro { ... background: #467612 url("intro_background.png") top left (287px 100%) repeat-x, url("intro_flower.png") top rightright (653px 100%) no-repeat; ... }
Observe la notacin abreviada de fondo de tamao natural.
Desafortunadamente, no hay manera confiable navegador soporta esto todava, as que tendremos que hacerlo de la manera tradicional: mediante la inclusin de una imagen en lnea y posicionamiento usando CSS. Vea el ejemplo final para ver cmo se ha hecho.
9. Styling el rea de contenido y la
barra lateral
El rea de contenido y la barra lateral van a ser alineados uno junto al otro. Tradicionalmente podra hacer esto mediante el uso de flotadores, pero en CSS 3 que vamos a utilizar las tablas! "Qu! Tablas? "Usted puede preguntar y buscar confundido. Es probable que aprend hace aos que el uso de tablas para maquetar web es un gran no-no, y lo sigue siendo. Nunca se debe utilizar la tabla de elementos para marcar un diseo. Sin embargo, en CSS 3 podemos hacer que los elementos se comportan como las mesas sin que nunca mostrando en el marcado! Para empezar, vamos a necesitar algunos divs para agrupar las secciones de una manera un poco ms lgico.
1. <div id="content"> 2. <div id="mainContent"> 3. <section> 4.  5. 6. </section> 7. <section id="comments"> 8.  9. </section> 10. <form> 11.  12. </form> 13. </div> 14. <aside> 15.  16. </aside> 17. </div>
18. Todo sigue teniendo sentido semnticamente, pero ahora puede estilo. Queremos que el div # content comportarse como una mesa, con # mainContent y aparte como tabla de las clulas. Con CSS 3, esto es muy fcil:
19.
20. #content { 21. display: table; 22. } 23. 24. #mainContent { 25. display: table-cell; 26. width: 620px; 27. padding-right: 22px; 28. } 29. 30. aside { 31. display: table-cell; 32. width: 300px; 33. }
Eso es todo! No ms falsas imgenes flotantes, las columnas de fondo, compensacin o contraer los mrgenes. Hemos hecho que los elementos se comportan como una mesa, y esto hace que sea mucho ms fcil para nosotros hacer el diseo.
10. Aplicar estilos a la publicacin en tu
blog
El diseo de la cabecera del blog es ms bien trivial, as que voy a saltar a la parte divertida: el diseo de varias columnas.
Varias columnas
Varias columnas de texto que antes era imposible sin dividir manualmente el texto, pero con CSS 3 es un juego de nios, aunque hay que aadir un div alrededor de los varios prrafos para que esto funcione con los navegadores actuales.
1. 2. 3. 4. 5. 6. 1. 2. 3. 4. 5.
<div> <p>Lorem ipsum dolor sit amet...</p> <p>Pellentesque ut sapien arcu...</p> <p>Vivamus vitae nulla dolor...</p> ... </div>
Ahora podemos agregar dos propiedades simples y lo llaman un da.

.blogPost div { column-count: 2; column-gap: 22px; }
Queremos 2 columnas y un espacio de 22px entre las columnas. El div adicional es necesaria porque actualmente no hay manera de hacer compatible un lapso elemento ms de una columna. En el futuro, sin embargo, usted ser capaz de especificar la propiedad de columna de tramo, y podramos escribir simplemente:
1. 2. 3. 4. 5. 6. 7. 8.
.blogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; }
Por supuesto, las propiedades de recuento de columna y columna brecha slo son compatibles con todos los navegadores, Safari y Firefox. Tenemos que utilizar las propiedades especficas del proveedor por ahora.
1. 2. 3. 4. 5. 6. 7. 8. 9. .blogPost div { /* Column-count not implemented yet */ -moz-column-count: 2; -webkit-column-count: 2; /* Column-gap not implemented yet */ -moz-column-gap: 22px; -webkit-column-gap: 22px; }
Caja de sombra
Si te fijas bien en la imagen en la entrada del blog, vers una gota de sombra. Somos capaces de generar esta usando CSS 3 y la propiedad box-shadow.
1. 2. 3. 4.
.blogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; }
5.
6. El primer "3px" le dice al navegador dnde queremos que la sombra de detener horizontalmente. El segundo "3px" le dice a donde queremos dejar la sombra verticalmente. El ltimo "7px" es como difuminado la frontera debe ser. Si se establece en 0, ser totalmente slido. Por ltimo, pero no menos importante definir el color base de la sombra. Este color es, por supuesto, se desvaneci, dependiendo de la cantidad que difuminar la sombra. 7. Probablemente no es ninguna sorpresa que esta propiedad no est implementada en todos los navegadores todava. De hecho, slo funciona en Safari, y usted tiene que utilizar la propiedad especfica del proveedor.
1. 2. 3. 4.
.blogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; }
11. Zebra-striping los Comentarios

Zebra-striping, o destacando cada segundo elemento de la serie, ha consistido tradicionalmente en la seleccin de todos los elementos a travs de JavaScript, y luego recorrer a travs de ellos y poner de relieve todos los elementos extraos. CSS 3 introduce la pseudo-clase "nth-child", que hace que sea ridculamente sencilla de hacer esto sin javascript. Lo usaremos para zebra-stripe los comentarios.
1. 2. 3. 4. 5. 6. 7. 8. 9. section#comments article:nth-child(2n+1) { padding: 21px; background: #E3E3E3; border: 1px solid #d7d7d7; /* Border-radius not implemented yet */ -moz-border-radius: 11px; -webkit-border-radius: 11px; }
El extrao valor "2n +1" es en realidad bastante simple si usted entiende lo que significa:

2n selecciona cada segundo artculo. Si usted escribi 3n sera seleccionar cada tercer punto, 4n cada cuarto punto, y as sucesivamente. El 1 indica al navegador que comienzan en el elemento 1. Si no est familiarizado con la programacin usted probablemente sabe que todas las matrices comienzan en 0, y esto tambin es cierto en este caso. Esto significa que el elemento 1 es en realidad el segundo elemento de la serie. Si lo prefiere, puede escribir:
1.
section#comments article:nth-child(odd) { ... }
Dado que la norma incluye los dos ms utilizados valores como taquigrafa, pares e impares. El resto del estilismo comentario debe ser fcil de entender con su nuevo conocimiento.
El estilo del formulario de comentarios, pie de pgina y la barra lateral

Un par de CSS 3 tcnicas se vuelven a utilizar en el diseo del formulario de comentarios, pie de pgina y la barra lateral. En el formulario de comentarios y el pie de pgina que he usado el mismo tipo de tcnica de tabla de diseo utilizado en el diseo principal. En la barra lateral border-radius se utiliza para agregar esquinas redondeadas a las diferentes secciones.
12. El Diseo Final

Ver el diseo final con todo el estilo aplicado.
Compatibilidad
La pgina se representa correctamente en Safari 4 y los nuevos navegadores basados en WebKit, ya que es el nico motor de renderizado que soporta todas las CSS 3 tcnicas que hemos utilizado. Firefox 3 tiene algunos problemas para aplicar esquinas redondeadas a nuestra imagen Flor y no es compatible con fondo de tamao, pero adems de que el diseo funciona. He optado por ignorar el Explorador de Internet, ya que requiere un poco de hacking para obtener HTML 5 para trabajar. Tambin puede definir las reglas un poco ms y conseguir que todo funcione en todos los navegadores ms importantes, pero todo esto est fuera del alcance de este tutorial.
Conclusin
Cuando HTML 5 y CSS 3 son un da implementada en todos los navegadores, ser mucho ms fcil de construir sitios web. Por fin voy a poder dejar de usar flotadores para el diseo (que nunca fueron destinados a ser utilizados para), y vamos a pasar mucho menos tiempo escribiendo javascript para escalar nuestras imgenes de fondo o de cebra raya nuestras mesas. Espero que podamos utilizar todo este tiempo extra para estudiar algunas reas olvidados por largo tiempo de diseo de pginas web, como la optimizacin de front-end y arquitectura de la informacin adecuada . Siga con nosotros en Twitter , o suscribirte al feed RSS Nettuts para tuts de desarrollo web ms diarios y artculos.

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

1.

5. Marcar la rea de contenido

Marcacin de la publicacin en tu blog

Marcacin de los Comentarios

10. 11. 12. 13. 14. 15. 16. 17.

Marcando el formulario de comentarios

Marcacin de la barra lateral y pie de pgina

6. Aplicar estilos con CSS 3

7. Aplicar estilos a la navegacin

8. Aplicar estilos a la Introduccin

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Observe la notacin abreviada de fondo de tamao natural.

9. Styling el rea de contenido y la

10. Aplicar estilos a la publicacin en tu

Ahora podemos agregar dos propiedades simples y lo llaman un da.

.blogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; }

.blogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; }

.blogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; }

11. Zebra-striping los Comentarios

section#comments article:nth-child(odd) { ... }

El estilo del formulario de comentarios, pie de pgina y la barra lateral

12. El Diseo Final

Вам также может понравиться