A continuación, crearemos una página web responsive simple con HTML/CSS.
Antes de aprender, podemos ver el efecto:https://www.example.com/try/demo_source/tryhtmlcss_website.htm
Código CSS
* {
box-sizing: border-box;
}
/*Estilo de body*/
body {
font-family: Arial;
margin: 0;
}
/*Título*/
.header {
padding: 80px;
text-align: center;
background: #1A6BBC;
color: white;
}
/*Aumentar el tamaño de la fuente del título*/
.header h1 {
font-size: 40px;
}
/*Navegación*/
.navbar {
overflow: hidden;
background-color: #333;
}
/*Estilo de la barra de navegación*/
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/*Enlaces a la derecha*/
.navbar a.right {
float: right;
}
/*Color al pasar el mouse sobre el enlace*/
.navbar a:hover {
background-color: #ddd;
color: black;
}
/*Contenedor de columnas*/
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/*Crear dos columnas*/
/*Barra lateral*/
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/*Área de contenido principal*/
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/*Imagen de prueba*/
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Pie de página*/
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/*Diseño responsive - cuando el ancho de la pantalla del dispositivo sea inferior a 700px, mostrar las dos columnas apiladas verticalmente.*/
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*Diseño responsive - cuando el ancho de la pantalla del dispositivo sea inferior a 400px, hacer que los elementos de navegación se muestren apilados verticalmente.*/
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Pruébalo »
Código HTML
<div class="header">
<h1>Ejemplo de página web de prueba de Tutorial de novatos</h1>
<p>Crear una página.</p>
</div>
<div class="navbar">
<a href="#">Enlace</a>
<a href="#">Enlace</a>
<a href="#">Enlace</a>
<a href="#" class="right">Enlace</a>
</div>
<div class="row">
<div class="side">
<h2>Sobre mí</h2>
<h5>Mi foto:</h5>
<div class="fakeimg" style="height:200px;">Insertar imagen aquí</div>
<p>Introducción sobre mí..</p>
<h3>Más contenido</h3>
<p>Más contenido mío</p>
<div class="fakeimg" style="height:60px;">Insertar imagen aquí</div><br>
<div class="fakeimg" style="height:60px;">Insertar imagen aquí</div><br>
<div class="fakeimg" style="height:60px;">Insertar imagen aquí</div>
</div>
<div class="main">
<h2>Título</h2>
<h5>Subtítulo</h5>
<div class="fakeimg" style="height:200px;">Imagen</div>
<p>Algo de texto..</p>
<p>Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!! Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!! Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!!</p>
<br>
<h2>Título</h2>
<h5>Subtítulo</h5>
<div class="fakeimg" style="height:200px;">Imagen</div>
<p>Algo de texto..</p>
<p>Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!! Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!! Tutorial de novatos, lo que aprendes no es solo tecnología, sino también sueños!!!</p>
</div>
</div>
<div class="footer">
<h2>Contenido del pie de página</h2>
</div>
Pruébalo »