Paso 4: El contenedor del cuerpo principal
< id sección = "body_container" >
< id sección = "top_section" >
Proyecto Bienvenidos a < span > < h2 > < /span >< / h2 >
< img src="common/images/van_img.jpg" alt = "#" class = "van_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< img src="common/images/house_img.jpg" alt = "#" class = "house_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< / sección >
Hasta ahora, no hemos colocado el logo, el contacto. en la parte superior, la barra de navegación, el contenedor de texto y el cursor. Ahora es el momento para que el contenedor de cuerpo principal donde pondremos el título, dos imágenes y el texto respectivo. Por lo tanto, hacer un nuevo div con una clase de contenedor, a continuación, haga dos etiquetas de sección, uno con un id de body_container y el segundo con un id de top_section.
Ahora hacer una etiqueta H2 y coloque el título en su interior. Entonces usando la memoria de etiqueta de imagen la primera imagen de la parte superior. Para la referencia de imagen, consulte el archivo de diseño. Como puede ver en el diseño, que se coloca el texto en dos párrafos, así que hacer dos nuevas etiquetas de párrafo y coloque el contenido apropiado de ambos.
Ahora copia y pega este paso para colocar la segunda imagen y su texto. No olvides cambiar la ruta de la imagen y el texto con la imagen apropiada y texto de párrafo y cerrar la etiqueta de la sección.
Cubeta inferior
< id sección = "bottom_container" >
< artículo clase = "common_box" >
Testimonios de < h3 > < / h3 >
< clase p = "última" > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. DUIS ullamcorper mollis diam en sagittis." < /p >
< a href = "#" class = "nombre" >-Vijay Kumar < /a >
< / sección >
< artículo clase = "common_box segundo" >
< h3 > dirección y contacto < / h3 >
< p > 1234 Nodia Road (cerca de la esquina de ferrocarril de St.) M.G. nagar, Nodia 14007 < /p >
< ul clase = "contacto" >
< li >< span > Teléfono: < /span > 123-456-7890 < /li >
< li >< span > Fax: < /span > 987-654-3210 < /li >
< li >< span > correo electrónico: < /span >< a href = "mailto:thesignguy
< /ul >
< / sección >
< / sección >
< / sección >
< / div >
Ahora que el contenedor inferior para colocar el testimonio y dirección de contacto. Por lo tanto, crear una nueva etiqueta de la sección y darle una clase de contenedor inferior. Luego hacer otra etiqueta de sección con una clase de common_box y colocar el encabezado de columna de testimonio dentro de una etiqueta H3. Ahora usando la etiqueta de párrafo, coloque el texto testimonial en su interior y no olvides darle a esta etiqueta de párrafo una clase de último. Ahora para la testimonial del remitente, haga una etiqueta de ancla con una clase de nombre, coloque el nombre del remitente en su interior y cerrar la etiqueta de la sección para completar la columna testimonial.
Ahora para la dirección de contacto, hacer una nueva etiqueta de sección con una clase de common_box_second. Luego coloque el título, es decir, 'contacto & Dirección' dentro de una etiqueta H3 y usando la etiqueta de párrafo, coloque la dirección completa con código postal. Y como se puede ver en el archivo PSD, también tenemos que colocar el teléfono, Fax y correo electrónico, así que vamos a hacerlo ahora.
Hacer una etiqueta de lista desordenada con una clase de contacto. Dentro de esta etiqueta ul, hacer tres etiquetas lista o li y el teléfono, Fax y correo electrónico en la misma secuencia. Pero como usted puede haber notado ya, su texto de partida está en color negro, así que añadir una etiqueta span en cada etiqueta li y terminar justo después de la partida.
Además, en la sección de correo electrónico, la dirección de correo electrónico debe por hipervínculos con un mailto acción así que hacerlo usando la etiqueta de ancla y cerrar la lista sin ordenar, tres etiquetas de sección y la etiqueta div.
