La construcción de un sitio web adaptable desde cero
En este capítulo vamos a construir un sitio web que responde W3.CSS desde cero.
En primer lugar, comenzar con una página HTML simple, con una ventana gráfica 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="http://www.w3ii.com/lib/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> Inténtalo tú mismo " Elementos poner en contenedores
Ahora tenemos que añadir un margen común y relleno para todos los elementos.
Para lograr esto, poner los elementos HTML dentro de contenedores (<div class = "w3-container">)
Para que sea posible definir clases separadas para los encabezados. Se separa la cabeza desde el resto del contenido, utilizando un elemento separado <div>:
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> Inténtalo tú mismo " Las clases de color
clases de color define el color de los elementos.
En este ejemplo se agrega un color para el 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>
Inténtalo tú mismo " Las clases de tamaño
Clases de tamaño define el tamaño del texto de los elementos.
En este ejemplo se agrega un tamaño de ambos elementos de la cabecera:
Ejemplo
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
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>
Inténtalo tú mismo " Elementos uso semántico
Si te gusta seguir las recomendaciones semánticos HTML5. ¡Por favor, hazlo!
 | No importa para W3.CSS si utiliza <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="http://www.w3ii.com/lib/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> Inténtalo tú mismo " Disposición de respuesta de varias columnas
Con W3.CSS es fácil crear un diseño sensible de varias columnas.
Las columnas se reorganizarse de forma automática cuando se ve en diferentes tamaños de pantalla.
Algunas normas de la red:
- Comienza con una clase fila <div class = "w3-fila-padding">
- Utilice clases predefinidas como "W3 tercio" de hacer rápidamente columnas de la cuadrícula
- Coloca el contenido de texto dentro de las columnas de la cuadrícula
Este ejemplo muestra cómo crear tres columnas de igual anchura:
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> Inténtalo tú mismo " Este ejemplo muestra cómo crear cuatro columnas de igual anchura:
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> Inténtalo tú mismo " Las columnas con anchos diferentes
En este ejemplo se crea un diseño de tres columnas donde la columna en el medio es más ancha que la primera y ú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> Inténtalo tú mismo " Barras de navegación
Una barra de navegación es una cabecera de navegación que se coloca en la parte superior de la página.
Ejemplo
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Inténtalo tú mismo " navegación de la parte
Mediante la navegación por lado, tiene varias opciones:
- Siempre mostrar el panel de navegación a la izquierda de la página de contenido.
- Abra el panel de navegación, ocultando la parte izquierda de la página de contenido.
- Abra el panel de navegación, que oculta todo el contenido de la página.
- Cambiar el contenido de la página a la derecha, al abrir el panel de navegación.
En este ejemplo se abre el panel de navegación, que oculta una parte del contenido de la página:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript utiliza para abrir y ocultar el menú:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Inténtalo tú mismo "