Navegación del curso
En el artículo anterior, vimos el diseño de 3 columnas y completamos la Sección 2 del contenido principal. El contenido principal del sitio web ya está casi completo. Solo necesitamos construir la Sección 3 del contenido principal. La Sección 3 se muestra en la siguiente imagen:
Si observa la imagen de arriba detenidamente, puede ver que la Sección 3 es casi la misma que la Sección 2 del sitio web. La única diferencia es que tiene 4 columnas en lugar de 3 y cada columna tiene una imagen en la parte superior antes del título.
Comencemos a escribir HTML para la Sección 3 de nuestro sitio web, siga los pasos a continuación:
- Declare un div padre con una clase llamada fila.
- Declare cuatro div dentro de la fila principal div para que contengan cuatro columnas y asígneles id como column21, column22, column23 y column24 respectivamente.
- Descargue las imágenes de los enlaces dados y guárdelas en su carpeta de imágenes .
- Para cada columna :
- Use la etiqueta <img> para insertar una imagen para la columna respectiva.
- Declare un div con class = «img-title». Para el título de la columna.
- Declarar un elemento de párrafo p para la descripción del contenido.
- Declare una etiqueta de anclaje <a> para agregar un enlace externo que tendrá el estilo de un botón. Usaremos el mismo botón que creamos en el último artículo. Entonces, asigne el «botón» de clase a la etiqueta de anclaje.
A continuación se muestra el código HTML completo de la Sección 3 del Contenido principal:
HTML
<!-- Section 3 of Main content --> <section class="container" id="section-3"> <div id="row"> <!-- Column 1 --> <div id="column21"> <img src="images/writer.jpg" class="image image-full"> <div class="img-title"> <h3>Technical Content Writer</h3> </div> <p> The work requires understanding of Computer Science concepts. Candidates who are active on Practice Portal will be preferred. </p> <a href="https://www.geeksforgeeks.org/careers/" target="_blank" class="button"> Apply Here </a> </div> <!-- Column 2 --> <div id="column22"> <img src="images/developer.jpg" class="image image-full"> <div class="img-title"> <h3>Software Developer</h3> </div> <p> Good knowledge of PHP, JavaScript, Amazon AWS and Web Development in general. Candidates who are active on Practice Portal will be preferred. </p> <a href="https://www.geeksforgeeks.org/careers/" target="_blank" class="button"> Apply Here </a> </div> <!-- Column 3 --> <div id="column23"> <img src="images/support.jpg" class="image image-full"> <div class="img-title"> <h3>Teaching Assistant</h3> </div> <p> It involves taking the doubt sessions, coordinating with mentors and requires in-depth knowledge of Data Structures and Algorithms. </p> <a href="https://www.geeksforgeeks.org/careers/" target="_blank" class="button"> Apply Here </a> </div> <!-- Column 4 --> <div id="column24"> <img src="images/teacher.jpg" class="image image-full"> <div class="img-title"> <h3>Mentor / Tutor</h3> </div> <p> Job involves teaching, problem solving in classes as well as doubt sessions and thus requires in-depth knowledge of Data Structures and Algorithms. </p> <a href="https://www.geeksforgeeks.org/careers/" target="_blank" class="button"> Apply Here </a> </div> </div> </section>
Al ejecutar el archivo index.html en el navegador ahora, podrá ver el contenido de la Sección 3 en un orden distorsionado como el de la Sección 2 antes de agregar CSS.
Por lo tanto, comencemos a agregar estilos a las clases y completemos la Sección 3 del Contenido principal:
- Agregar estilos básicos para el diseño : en primer lugar, establezca el desbordamiento en oculto y agregue todos los márgenes y rellenos necesarios. Lo siguiente es dar el borde delgado de 1 px en la parte superior de la sección para separarlo de la sección anterior y alinear todo el texto dentro de él al centro.
Agregue el siguiente código CSS a su archivo style.css:
CSS
#section-3{
overflow: hidden;
padding-top: 5em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-align: center;
}
- Alineación de columnas en línea : el siguiente paso es alinear todas las columnas en una sola línea, una tras otra. Para hacer esto, agregue el siguiente código CSS a su archivo style.css:
CSS
/* Add fixed width for each column and
align text to center */
#column21,
#column22,
#column23,
#column24
{
width: 282px;
text-align: center;
}
/* Float first 3 columns to left */
#column21,
#column22,
#column23,
#column24 {
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
float: left;
margin: auto 25px;
}
- Estilo del título de las columnas : Lo siguiente que debe hacer es diseñar el título de las columnas presentes justo debajo de las imágenes. Para darles tamaños de fuente apropiados, color de relleno, etc. además de los valores predeterminados. Agregue el siguiente código CSS a su archivo style.css:
CSS
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
- Estilo de las imágenes : hemos agregado dos clases para nuestras imágenes en la columna, a saber, image e image-full .
CSS
.image
{
display: inline-block;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
El código CSS completo para la Sección 3 del Contenido principal del sitio web se proporciona a continuación :
CSS
/*****************************************/
/* Styling Main Content Section 3 */
/*****************************************/
#section-3{
overflow: hidden;
padding-top: 5em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-align: center;
}
.image
{
display: inline-block;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
/* Add fixed width for each column and
align text to center */
#column21,
#column22,
#column23,
#column24
{
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
float: left;
margin: auto 25px;
}
Con esto, la Sección 3 del contenido principal se completa con éxito y ahora se verá como se muestra en la siguiente imagen:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por harsh.agarwal0 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA