Cómo crear estilos de página para el html5 y css3 plantilla de sitio

Con un marco HTML en su lugar, puede empezar a trabajar en el CSS para crear estilos de página en su sitio. La mejor manera de incorporar CSS3 es siguiendo estos pasos:

Video: Plantilla web tipo admin responsiva CSS3, HTML5, MATERIALIZE, jQuery ( Codigo gratis )

1. Comience con el diagrama de plantilla de página.

   Se debe tener toda la información que necesita.

2. Pon a prueba tu CSS en un navegador.

   Video: Crear plantilla, Archivo CSS e Index en Dreamweaver CC 2014, HTML5 video 3

   Comience con una simple aplicación CSS que asegura que tiene los nombres correctos para todos los elementos de la página. A continuación, modificar cada elemento de acuerdo con el documento de diseño, pruebas a medida que avanza.

3. Implementar el CSS de su diagrama.

   Usted debería ser implementar el diseño que ya ha creado, no diseño la página. (Eso ya sucedió en el proceso de diagramación.)

4. Guardar el diseño.

   Para los proyectos de varias páginas, CSS externa en un archivo separado es definitivamente el camino a seguir. A medida que trabaja, guardar el CSS de manera normal por lo que el navegador será capaz de leerlo.

5. Prueba y pellizco.

   Las cosas nunca son lo que parecen con CSS ya que los navegadores no se ajustan a las normas de igual manera. Debe probar y ajustar en otros navegadores. Si los usuarios con las tecnologías más antiguas son una preocupación, puede que tenga que utilizar una hoja de estilo secundaria para las versiones antiguas de IE. También es posible que desee hacer una versión móvil.

6. Repita para otras plantillas.

   Repita este proceso para cada una de las otras plantillas que identificó en su diagrama de sitio.

El resultado de este proceso debe ser un número de archivos CSS que se puede reutilizar fácilmente a través de su sitio.

Aquí está el código CSS para la página principal:

body {background-color: # 000000-} h1 {text-align: center-font-family: sans-serif-color: blanco-text-shadow: 0 0 10px negro -} # todo {background-color: blanco-frontera : 1px solid negro-width: 800px; margin-top: 2 em-margin-left: auto-margin-right: auto-min-height: 600px;} # encabezado {background-color: # A11204-background-image: url ("cbBackground.jpg") -color: # FFFFFF-height: 100px; font-size: 2 em-padding-left: 1 em-border-bottom: sólido negro-margin-top 3px: -1.5em -} # {menú de Imagen de fondo: url ("cbBackground.jpg") -Antecedentes-color: # A11204-color: # FFFFFF-float: left; ancho: 100px; min-height: 500px;} # menú li {list-style-type: none; margin-left: -2em-marginalmente derecha: .5em-text-align: center -} # menú a {color: # FFFFFF-display: block-frontera: # A11204 3px principio-text-decoration: none;} # menú a: hover {border: # A11204 3px . inserción -} contenidos {border: 3px doble # A11204-margen: 1 em-margin-left: 110px; padding-left: 1 em-padding-bottom: 1 em-padding-right: 1 em-border-radius: 5px; box-shadow :. 5px 5px 5px gris -} h2 contenido {background-color: # A11204-imagen de fondo: url ("cbBackground.jpg") -color: # FFFFFF-text-align: right;} # pie de página {color: # FFFFFF-background-color: # 000000-frontera: sólido # A11204-flotador 1px: left; clear: both-width: 100% -text -Alinear al centro-}