Estudio de caso de W3.CSS
Creación de un sitio web receptivo desde cero
En este capítulo, construiremos un sitio web compatible con W3.CSS desde cero.
Primero, comience con una página HTML simple, con una vista inicial y un enlace a W3.CSS.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Poner Elementos en Contenedores
Para agregar márgenes comunes y relleno, coloque los elementos HTML dentro de contenedores (<div class="w3-container">)
Separe el encabezado del resto del contenido, usando dos elementos <div> separados:
Ejemplo
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Clases de color
Las clases de color definen el color de los elementos.
Este ejemplo agrega un color al primer elemento <div>:
Ejemplo
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Clases de tamaño
Las clases de tamaño definen el tamaño del texto de los elementos.
Este ejemplo agrega un tamaño a ambos elementos de encabezado:
Ejemplo
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Usar elementos semánticos
Si te gusta sigue las recomendaciones semánticas de HTML5. ¡Por favor, hazlo!
No importa para W3.CSS si usa <div> o <header>.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Diseño receptivo de varias columnas
Con W3.CSS es fácil crear un diseño receptivo de varias columnas.
Las columnas se reorganizarán automáticamente cuando se vean en diferentes tamaños de pantalla.
Algunas reglas de cuadrícula:
- Comience con una clase de fila <div class="w3-row-padding">
- Use clases predefinidas como "w3-tercero" para crear rápidamente columnas de cuadrícula
- Coloque su contenido de texto dentro de las columnas de la cuadrícula
Este ejemplo muestra cómo crear tres columnas de igual ancho:
Ejemplo
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Este ejemplo muestra cómo crear cuatro columnas de igual ancho:
Ejemplo
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Columnas con diferentes anchos
Este ejemplo crea un diseño de tres columnas donde la columna del medio es más ancha que la primera y la última columna:
Ejemplo
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Barras de navegación
Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la página.
Ejemplo
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navegación de página
Con la navegación lateral, tienes varias opciones:
- Muestre siempre el panel de navegación a la izquierda del contenido de la página.
- Use una navegación lateral receptiva plegable y "totalmente automática".
- Abra el panel de navegación sobre la parte izquierda del contenido de la página.
- Abra el panel de navegación sobre todo el contenido de la página.
- Deslice el contenido de la página hacia la derecha al abrir el panel de navegación.
- Mostrar el panel de navegación en el lado derecho en lugar del lado izquierdo
Este ejemplo abre el panel de navegación sobre la parte izquierda del contenido de la página:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript utilizado para abrir y ocultar el menú:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}