Paso 1: El CSS
* {margen: 0; padding: 0}
IMG, fieldset {frontera: none}
: focus {outline: none}
cuerpo {font-family: Arial; font-tamaño: 12px; fondo: #d1dde1}
.wrapper {width: 994px; auto margen: 0}
/**************************************Header****************************************/
encabezado {flotante: izquierda; width: 100% fondo: url (... / images/header_bg.jpg) repeat-x 0 0; min-width: 994px}
encabezado #logo {flotante: izquierda; margen: 2px 0 0 0}
.num encabezado {float: derecha; font-tamaño: 42px; línea-altura: 35px; color: #6aae0f; fondo: url (... / images/phone_img.png) no-repeat 0 8px; relleno: 0 0 0 55px; altura: 60px; fuente-familia: Georgia; fuente-estilo: cursiva}
encabezado .num span {flotante: izquierda; margen-parte superior: 22px}
/***********************************Navigation Bar*************************************/
NAV {flotante: izquierda; width: 100% fondo: #136589; margen: 25px 0; texto-alinee: Centro}
NAV ul {width: auto; lista estilo: none;}
NAV ul li {display: inline-block; margen-derecho: 30px; posición: pariente; padding: 15px 0}
NAV ul li a {display: block; decoración de texto: ninguno; fuente-tamaño: 14px; línea-altura: 12px; color: #fff; font-family: 'AvantGarde-Demi'; transformación de texto: en mayúsculas; acolchado-izquierda: 10px}
NAV ul li.active a {color: #f8db54; fondo: url (... /images/nav_hover.jpg) no-repeat 3px 0}
NAV ul li a: hover {color: #f8db54; fondo: url (... / images/nav_hover.jpg) no-repeat 3px 0; }
/ *** Izquierda bandera envase *** /
#banner_container {flotante: izquierda; width: 100%;}
#banner_container .left_banner {flotante: izquierda; ancho: 443px, altura: 266px; fondo: url (... / images/left_bg.jpg) no-repeat 0 0; relleno: 37px 26px 0px 26px;}
#banner_container .left_banner h2 {font-tamaño: 38px; línea-altura: 40px; color: #c5df57; font-familia: Georgia; texto-alinee: Centro; texto-transformar: mayúsculas; relleno-fondo: 35px; font-peso: normal;}
#banner_container .left_banner p {font-tamaño: 21px; línea-altura: 30px; color: #2d2d2d; font-family: 'MyriadPro-Regular'; font-estilo: italic;}
/***********************************HTML5 Slider**************************************/
#banner_container .slider_container {flotante: izquierda; anchura: 495px; posición: relative}
#banner_container .slider_container .slider {flotante: izquierda; anchura: 495px;}
#banner_container .slider_container .left_arrow {posición: absolute; top: 134px; izquierda: 10px; fondo: url (... / images/left_arrow.png) no-repeat 0 0; anchura: 37px; altura: 36px; z-index: 5}
#banner_container .slider_container .right_arrow {posición: absolute; top: 134px; derecha: 10px; fondo: url (... / images/right_arrow.png) no-repeat 0 0; anchura: 37px; altura: 36px; z-index: 5}
#banner_container .slider_container .slider .slide_content {flotante: izquierda; width: auto; posición: pariente;}
#banner_container .slider_container .slider .slide_content img {float: izquierda}
#banner_container .slider_container .slider .slide_content .text_line {posición: absoluto, izquierda: 0 fondo: 0; fondo: url (... / images/text_bg.png) repeat 0 0; font-tamaño: 13px; línea-altura: 13px; font-family: 'MyriadPro-Regular'; padding: 7px 10px}
/ *** Cuerpo principal texto envase *** /
#body_container {flotante: izquierda; ancho: 994px fondo: #fff; margen-top: 5px}
#top_section {flotante: izquierda; width: 960px; padding: 30px 17px 15px 17px}
#top_section h2 {font-tamaño: 30px; línea-altura: 20px; color: #484747; font-family: 'MyriadPro-Regular'; padding: 0 17px 0 0; fuente-peso: normal; transformación de texto: mayúsculas}
#top_section h2 span {color: #80b439}
#top_section p {font-tamaño: 16px; línea-altura: 20px; color: #484747; font-family: 'MyriadPro-Regular'; padding-fondo: 15px}
#top_section .van_img {float: derecho; margen: 0 0 0 11px}
#top_section .house_img {flotante: izquierda; margen: 0 15px 0 0}
/ *** Testimonio & contacto envase *** /
#bottom_container {flotante: izquierda; ancho: 994px fondo: #d1dde1; padding: 25px 0 0 0}
#bottom_container .common_box {flotante: izquierda; anchura: 237px; margen-derecho: 52px}
#bottom_container. common_box.second {width: 260px;}
#bottom_container .common_box h3 {font-tamaño: 18px; línea-altura: 14px; color: #27a9e1; font-family: 'Avante'; padding-fondo: 12px}
#bottom_container .common_box p {font-tamaño: 12px; línea-altura: 18px; color: #136589; font-family: 'MyriadPro-Regular';}
#bottom_container .common_box p.last {color: #27a9e1}
#bottom_container .common_box Name {float: derecha; decoración de texto: none; font-tamaño: 12px; línea-altura: 18px; color: #27a9e1; margen-parte superior: 27px}
#bottom_container .common_box .contact {flotante: izquierda; width: 100% estilo de lista: none; padding: 10px 0 0 0}
#bottom_container .common_box .contact li {flotante: izquierda; width: 100%; font-tamaño: 12px; línea-altura: 18px; color: #27a9e1}
#bottom_container .common_box .contact li a {flotante: izquierda; decoración de texto: none; color: #27a9e1}
#bottom_container .common_box .contact li a: hover {texto-decoración: underline}
#bottom_container .common_box .contact li span {flotante: izquierda; color: #2d2d2d; anchura: 72px}
/**************************************Footer*****************************************/
pie de página {flotante: izquierda; width: 100% fondo: url (... / images/footer_bg.jpg) repeat-x 0 0 #d1dde1; margen-parte superior: 30px; min-width: 994px}
#menu {flotante: izquierda; width: 100%; font-tamaño: 10px; línea-altura: 10px; font-family: 'MyriadPro-Regular'; transformación de texto: mayúsculas}
.footer_nav #menu {flotante: izquierda; width: auto; lista estilo: none; padding: 13px 0 14px 16px}
li .footer_nav de #menu {flotante: izquierda; margen-derecho: 20px}
.footer_nav de #menu li a {flotante: izquierda; decoración de texto: none; color: #FFF; }
.footer_nav de #menu li a: hover {color: #f3d508}
#menu .footer_nav li.active a {color: #f3d508}
/*********************************Footer Social Icons***********************************/
.social_icon #menu {float: derecha; width: auto; estilo de lista: none}
li .social_icon de #menu {flotante: izquierda; margen-derecho: 20px}
li.last de .social_icon de #menu {margen-derecha: 0}
.social_icon de #menu li .facebook {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/Facebook.png) no-repeat 0 0}
.social_icon de #menu li .facebook:hover {url de fondo: (.. /images/Facebook.png) no-repeat 0 - 36px}
.social_icon de #menu li .google {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/google_plus.png) no-repeat 0 0}
.social_icon de #menu li .google:hover {url de fondo: (.. /images/google_plus.png) no-repeat 0 - 36px}
.social_icon de #menu li .twitter {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/Twitter.png) no-repeat 0 0}
.social_icon de #menu li .twitter:hover {url de fondo: (.. /images/Twitter.png) no-repeat 0 - 36px}
/**********************************End Footer Text*************************************/
.bottom_nav de pie de página {flotante: izquierda; lista estilo: none;}
pie de página .bottom_nav li {flotante: izquierda; font-tamaño: 10px; línea-altura: 30px; font-family: 'MyriadPro-Regular'; color: #27a9e1; relleno: 0 8px; fondo: url (... /images/li_bg.jpg) no-repeat 9px derecha}
pie de página .bottom_nav li.first {padding-izquierda: 16px}
pie de página .bottom_nav li.last {fondo: none}
pie de página .bottom_nav li a {flotante: izquierda; decoración de texto: none; color: #27a9e1;}
pie de página .bottom_nav li a: hover {texto-decoración: subrayado}
/**************************************The End***************************************/
El código estándar
* {margen: 0; padding: 0}
IMG, fieldset {frontera: none}
: focus {outline: none}
cuerpo {font-family: Arial; font-tamaño: 12px; fondo: #d1dde1}
.wrapper {width: 994px; auto margen: 0}
En CSS hay ciertos códigos que son muy comunes y se usan cada vez que escribimos un archivo CSS, que también lo llamamos como un código estándar. Y arriba no es más que el código estándar, donde en la primera línea hemos creado el margen predeterminado y relleno de nuestro diseño a cero o 0 utilizando el selector universal. En la segunda y tercera línea, ninguno ha definido la frontera para imágenes y fieldset (forma de entrada) y centrar contorno a ninguno. Esto asegurará que todas las imágenes de nuestras estancia frontera libre, no importa qué navegador el usuario utiliza para navegar por la Web. Aunque no hemos hecho ninguna forma, pero para estar en el lado más seguro escribir en el código estándar como medida de precaución, como se podría hacer uno en la página de contacto. Luego en la cuarta y quinta línea, hemos establecido el color de fondo para el cuerpo de la página web, familia de fuentes predeterminada y tamaño de fuente y también establecen el ancho predeterminado de 994 pixeles y margen de auto 0 para el div con una clase de contenedor.
