Paso 2: La cabecera
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}
Como ya hemos establecido la anchura de la div principal arriba, ahora para la sección de encabezado a la posición a flotar a la izquierda y establece su ancho al 100%, esto no anula la anchura de la div pero de hecho se mantendrá dentro de los límites previamente definidos. Para el fondo, utilice la imagen de cabecera guarda dentro de la carpeta de imagen utilizando la propiedad background y repeat-x 0 0 para que no repita una y otra vez y establece el ancho mínimo en 994 píxeles, que también es anchura de la div.
En la segunda línea, posición del logo manteniendo flotante a la izquierda y establece su margen en 2 píxeles 0 0 0. Entonces usando la clase de num, hacer flotar a la derecha el número de contacto y fijar su tamaño y altura de la línea a 42 y 35 píxeles respectivamente y para el color utiliza el código "6aae0f". Del no contacto. símbolo, utilice la propiedad background y colocar la imagen de teléfono guarda dentro de la carpeta de imágenes y establézcalo en no-repeat 0 desde la izquierda y 8px desde la parte superior. Establecer su relleno a 0 0 0 55 pixeles, altura a 60 píxeles y para la familia de fuentes utiliza la fuente Georgia y darle un estilo de fuente cursiva.
Por fin definir la etiqueta span que utilizamos en la etiqueta de sección de número de contacto en HTML y hacerlo flotar a la izquierda y fijar su margen de la parte superior a 22 píxeles.
La barra de navegación
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; }
Ahora definir la etiqueta nav que se utilizó en el código HTML y establecer flotando a la izquierda, fijó la anchura al 100%, para el fondo use el código de color 136589, definir el margen de arriba a abajo a 25 píxeles y de derecha a izquierda 0 píxeles y para traer el texto de barra de menú en el centro, utilice la propiedad alinear texto. Entonces definir la etiqueta de lista sin ordenar, establezca su ancho de y de estilo de lista ponerlo a ninguno. En la tercera línea, declara la etiqueta de la lista y lo hace para mostrar al bloque en línea y mantener su margen de la derecha a 30 pixeles, mantener su posición de relativa y el relleno a 15 px de la parte superior y parte inferior y 0 px de derecha a izquierda.
Ahora necesita definir las etiquetas de anclaje de la lista y que muestra en bloque, para cambiar el estilo predeterminado, utilice la propiedad de decoración de texto y establezca en ninguno, el tamaño de letra a 14px, altura de la línea a 12px, color del texto a negro, su acolchado a 10 píxeles desde la izquierda, y usando la propiedad de transformar texto establece el texto en mayúsculas y no olvide establecer su familia de fuente a la fuente apropiada.
Ahora debemos configurar el código de color, y suspender y la imagen de navegación para el activo enlace en la barra de navegación, así que ahora y no olviden mantener el color y la imagen misma y hacer que no-repeat 0 desde los izquierda y 3 píxeles desde la parte superior.
El contenedor de bandera izquierdo
#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;}
Ahora definimos nuestro envase del banner izquierdo, que básicamente tiene el texto solamente. Así que definir con su id, es decir, banner_container y establece su ancho al 100% y hacerlo flotar a la izquierda. Entonces definir la etiqueta de la sección con una clase de left_banner y establece el ancho en 443 píxeles, altura a 266 pixles, hacer también flotar a la izquierda y para su fondo usar la imagen apropiada y hacerlo no-repeat desde la izquierda y de arriba y establece su acolchado en 37 26 0 26 píxeles.
Después de esto, definir el tamaño de fuente, altura de línea, código color, font-family, acolchado de la parte inferior, fuente de peso, para el título de la bandera izquierda, asegúrese de que alinea en el centro alinear texto propiedad y mediante la propiedad de transformar texto hacerlo en mayúsculas. Entonces se mueve más, declarar el tamaño de fuente, altura de línea, código color, font-family y estilo de fuente para la etiqueta de párrafo.
El deslizador de HTML5
#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}
Es el momento para definir todas las etiquetas de control deslizante que hicimos en el HTML. Así que con la introducción de su clase con un identificador de la banner_container, hacen flotar a la izquierda, establece el ancho en 495 píxeles y ajuste su posición relativa. Luego declara la etiqueta de la sección con una clase de regulador y hacerlo flotar a la izquierda y establece el ancho en 495 píxeles. Una vez usted se hace con él, más y establece la posición de la flecha izquierda en absoluto, desde la parte superior e izquierda 134 y 10 píxeles, respectivamente y con la propiedad background coloca su imagen, establezca su ancho, altura y z-index y hacerla no-repeat. Repita este paso para la flecha derecha y sustituir la imagen por la imagen de la flecha a la derecha. Luego, por el contenido de la botella, configúrelo para flotar a la izquierda, mantenga su anchura para auto y ajuste su posición relativa.
Ahora se hacen todas las imágenes flotando a la izquierda definiendo la etiqueta de imagen. Y moviendo más, declarar la clase de text_line y coloque en absoluto, conjunto de izquierda y de abajo a 0, la imagen correcta utilizando la propiedad background de lugar y hacerla repetir a 0 0, ajustar su tamaño, altura de línea, font-family y acolchado.
