• Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación
 
 
Curso 2020/2021 | 2º BACHILLERATO

 Tecnologías de la Información y la Comunicación | TIC-II 

icon html5
icon css3
icon css3


CSS básico responsive para tareas

 

Código HTML: base_tareas.html

Código HTML: base_tareas.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/base_tareas.css">
  <title>Base Responsive para tareas</title>
</head>
<body>
  <main>
    <!-- Aquí colocamos todo el contenido de la página web -->
  </main>
</body>
</html>
Código CSS: base_tareas.css

Código CSS: base_tareas.css


/* ###########################################
##   HOJA DE ESTILOS CSS: Tarea básica
##   (cc) 3con14 | ver.- 1.3
############################################## */

/* --- Reglas CSS para SMARTPHONE ------------ */

html { font: 16px/1.25 sans-serif; }

* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  outline    : none;
  transition : all 0.1s ease-in-out;
}

body {
  max-width  : 100vw;
  min-height : 100vh;
  background : tan;
  
  display         : flex;
  justify-content : center;
  align-items     : center;

  /* --- TIPOGRAFÍA responsive --- */
  font-size : calc(0.5em + 2.25vmin);
}

main {
  max-width  : 96vw;
  min-height : 96vh;
  width      : 1024px;
  margin     : 0 1em;
  background : rgba(0,0,0,0.1);
}


/* ################################################## */

/* --- IMAGEN, VIDEO local responsive --------------- */
img,video {
  max-width : 100%;
  height    : auto;
}
audio {
  display: block;
  margin : 0 auto;
}

/* --- VIDEO externo responsive --------------------- */
.media-box {
  position       : relative;
  overflow       : hidden;
  height         : 0;
  padding-bottom : 56.25%;
}
.media-box iframe,  
.media-box object,  
.media-box embed {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

/* ################################################## */

/* --- Reglas CSS para TABLET ----------------------- */

@media all and (min-width:768px) {

  body { 
    background-color: pink;
    font-size : calc(0.5em + 2vmin);
  }

}

/* --- Reglas CSS para DESKTOP ---------------------- */

@media all and (min-width:992px) {

  body {
    background-color:steelblue;
    font-size : calc(0.5em + 1.75vmin);
  }

}

/* ####################  E N D  ##################### */

 

Descargar el archivo comprimido: base_tareas, después seguir estos pasos:
1º.- Descomprimir el archivo base_tareas.rar
2º.- Hacer una copia de la carpeta extraida.
3º.- Cambiar el nombre del archivo .html y del archivo .css por el nombre de la tarea que estéis haciendo.

Etiquetas: CSS

  • Siguiente

CSS

  • CSS básico responsive para tareas
  • Normalizar CSS
  • Fondos de página web
  • Tipografías Web
  • El primer Layout
  • Responsive Web Design
  • Movimientos en CSS

Teoría

Guías completas

Guías completas

  • LibrosWeb HTML
  • Vocabulario HTML
  • Guía HTML5 y HTML
  • Guía CSS 2.1 y CSS3
  • Guía JavaScript
  • HTML Reference
  • CSS Reference
Cheat Sheets

Cheat Sheets

html css js

  • HTML CheatSheet
  • CSS CheatSheet
  • JS CheatSheet

Herramientas

Para Código

Para Código

  • Sublime-Text | Ext.
  • Visual Studio Code | Ext ≡
  • Preprocesador: Prepros
  • Editor online: CodePen
Otras ...

Otras ...

  • Cliente - FTP: Filezilla
  • Capturador: PicPick
  • Visor: Sumatra-PDF
  • Acrobat Reader - PDF
  • Compresor: 7zip
  • Reproductor: VLC
  • MathJax - AsciiMath
Portables

Portables

  • Visual Studio Code [Ext]
  • Sublime Text
  • Sumatra PDF
  • Chrome Portable
  • Opera Portable
  • FireFox Portable
Código BASE

Código BASE

  • Template: base1_tareas
  • Template: base2_layout
  • Template: base3_menu
  • Imágenes: HDWallpapers
Hosting

Hosting

  • DriveToWeb [•]
  • Ejemplo

(cc) 3con14, esta obra está bajo licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación