En este artículo, veremos cómo podemos crear una sección desplazable horizontal usando CSS. El código HTML se usa para crear la estructura básica de las secciones y el código CSS se usa para establecer el estilo,
Código HTML: En esta sección, crearemos una estructura de nuestras secciones.
Pasos:
- Cree un elemento div con contenido de clase.
- Dentro de nuestro div de contenido, cree otros cuatro div con la sección de clase.
- Dé cuatro ID diferentes a cada div.
- En cada div, incluya una etiqueta de encabezado con el encabezado apropiado.
HTML
<!DOCTYPE html> <html lang="en"> <body> <!-- Main container with class content --> <div class="content"> <!-- Four sections for our code --> <div class="section" id="one"> <!-- Heading tag --> <h1>Welcome To</h1> </div> <div class="section" id="two"> <h1>Geeks</h1> </div> <div class="section" id="three"> <h1>For</h1> </div> <div class="section" id="four"> <h1>Geeks</h1> </div> </div> </body> </html>
CSS: Usaremos CSS para darle cierta estructura a nuestra sección.
HTML
<style>
/* Adding color to first section */
#one{
background-color: #E6358B;
}
/* Adding color to second section */
#two{
background-color: #22A2AF;
}
/* Adding color to third section */
#three{
background-color: #7CEC9F;
}
/* Adding color to four section */
#four{
background-color: #D8A928;
}
/* General styling to our main section */
.content{
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
/* Styling to each individual section */
.section{
width: 100%;
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
/* For hiding scroll bar */
::-webkit-scrollbar{
display: none;
}
</style>
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Adding color to first section */
#one {
background-color: #E6358B;
}
/* Adding color to second section */
#two {
background-color: #22A2AF;
}
/* Adding color to third section */
#three {
background-color: #7CEC9F;
}
/* Adding color to four section */
#four {
background-color: #D8A928;
}
/* General styling to our main section */
.content {
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
/* Styling to each individual section */
.section {
width: 100%;
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
/* For hiding scoll bar */
::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<!-- Main container with class content -->
<div class="content">
<!-- Four sections for our code -->
<div class="section" id="one">
<!-- Heading tag -->
<h1>Welcome To</h1>
</div>
<div class="section" id="two">
<h1>Geeks</h1>
</div>
<div class="section" id="three">
<h1>For</h1>
</div>
<div class="section" id="four">
<h1>Geeks</h1>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA