From 8044e3b9b6191f5df04417bff039ac48a40396e9 Mon Sep 17 00:00:00 2001 From: prueba Date: Mon, 29 Apr 2019 13:09:47 +0200 Subject: [PATCH 1/2] version maquetada --- m1/index.html | 181 ++++++++++++++++++++++++++++++++++++-------------- m1/style.css | 90 +++++++++++++++++++++++-- 2 files changed, 216 insertions(+), 55 deletions(-) diff --git a/m1/index.html b/m1/index.html index 3e954d7..8c1ddf2 100644 --- a/m1/index.html +++ b/m1/index.html @@ -1,58 +1,139 @@ - - -EXERCICI HTML-CSS - - - - + + + EXERCICI HTML-CSS + + + +
+
+

Mi sitio web

+
+
+ diff --git a/m1/style.css b/m1/style.css index b3bc789..72610a4 100644 --- a/m1/style.css +++ b/m1/style.css @@ -1,8 +1,22 @@ - /* El bloque de reset tendrá las siguientes características: . márgenes, padding, fuente (verdana, sans-serif con tamaño 120% y altura 160%) y fondo con color (#F2F5FE) e imagen (fondo.gif) repetida en el eje horizontal */ +/* La sección principal tendrá las siguientes características: + - ancho: 79% + - relleno de texto superior, derecha, inferior, izquierda de 30px, 10px, 60px y 10px, respectivamente.*/ + +/*RESET*/ +body { + margin: 0px; + padding: 0px; + font: 120% 160% verdana, sans-serif; + /*pendiente poner anchura y altura de la fuente*/ + background-color: #f2f5fe; + background-repeat: repeat-x; + background-image: url("./fondo.gif"); +} +/*FIN RESET*/ /* El contenedor tendrá las siguientes características: ancho 80% color de fondo blanco */ @@ -14,6 +28,46 @@ Texto: color de texto: #FFF, fuente georgia, serif y tamaño 260%. Al pasar el mouse por encima tomará el color: #B5C4E3; Altura de línea: 35px*/ +* { + border: 1px solid red; +} + +#contenedor { + background-color: white; + width: 80%; + margin: auto; + background-image: none; + overflow: hidden; + /*no aplica blackground*/ +} + +header { + background: #233c9b; + color: white; + font: 260% georgia serif; + text-decoration: underline; +} +figure { + width: 200px; + margin: auto; +} + +nav { + margin: auto; + width: 900px; +} + +nav li { + display: inline-block; + background-color: #253575; + padding: 5px 15px; + margin: 2px; +} + +nav a { + text-decoration: none; + color: white; +} /* Al menú de navegación se le aplicará el siguiente formato: - Estará centrado con respecto a la cabecera - los elementos estarán separados por un espacio de 5px @@ -24,14 +78,41 @@ Altura de línea: 35px*/ - El fondo del elemento será #253575 - Al pasar el mouse por encima adquirirá el color de fondo #31479B;*/ +main { + width: 79%; + float: left; + background-image: none; + background-color: white; +} -/* La sección principal tendrá las siguientes características: - - ancho: 79% - - relleno de texto superior, derecha, inferior, izquierda de 30px, 10px, 60px y 10px, respectivamente.*/ +img { + width: 200px; + height: 200px; + margin: auto; +} +aside { + float: right; + width: 19%; + background-image: none; + background-color: white; + font-size: 0.75em; +} /* El elemento lateral tendrá las siguientes características: - ancho 19% - tamaño de fuente de 3/4 de la inicial +*/ + +footer { + float: left; + font-size: 0.75em; + /* relleno del texto¿?*/ + color: white; + background-color: #233c9b; + height: 40px; + width: 100%; + text-align: center; +} /* El pie del documento tendrá las siguientes características: - tamaño de fuente de 3/4 de la inicial @@ -40,4 +121,3 @@ Altura de línea: 35px*/ - color de fondo: #233C9B - altura del elemento 40px; */ - From 298c50bb7b484916f8e44923cfa25b7cf8f7ebf7 Mon Sep 17 00:00:00 2001 From: prueba Date: Mon, 29 Apr 2019 13:54:23 +0200 Subject: [PATCH 2/2] terminado --- m1/index.html | 6 +++--- m1/style.css | 33 ++++++++++++++++++++++++++------- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/m1/index.html b/m1/index.html index 8c1ddf2..ca73150 100644 --- a/m1/index.html +++ b/m1/index.html @@ -9,7 +9,7 @@
-

Mi sitio web

+ Mi sitio web
diff --git a/m1/style.css b/m1/style.css index 72610a4..78d1b10 100644 --- a/m1/style.css +++ b/m1/style.css @@ -11,7 +11,6 @@ body { margin: 0px; padding: 0px; font: 120% 160% verdana, sans-serif; - /*pendiente poner anchura y altura de la fuente*/ background-color: #f2f5fe; background-repeat: repeat-x; background-image: url("./fondo.gif"); @@ -28,10 +27,6 @@ Texto: color de texto: #FFF, fuente georgia, serif y tamaño 260%. Al pasar el mouse por encima tomará el color: #B5C4E3; Altura de línea: 35px*/ -* { - border: 1px solid red; -} - #contenedor { background-color: white; width: 80%; @@ -43,10 +38,22 @@ Altura de línea: 35px*/ header { background: #233c9b; - color: white; + color: #fff; font: 260% georgia serif; + text-decoration: none; text-decoration: underline; + padding: 10px; +} + +header a { + text-decoration: none; + color: white; } + +header a:hover { + color: #b5c4e3; +} + figure { width: 200px; margin: auto; @@ -54,7 +61,13 @@ figure { nav { margin: auto; - width: 900px; + width: 600px; + font-size: 0.75em; + cursor: pointer; +} + +li:hover { + background-color: #314798; } nav li { @@ -67,6 +80,8 @@ nav li { nav a { text-decoration: none; color: white; + font-weight: bold; + color: #b5c4e3; } /* Al menú de navegación se le aplicará el siguiente formato: - Estará centrado con respecto a la cabecera @@ -96,6 +111,10 @@ aside { background-image: none; background-color: white; font-size: 0.75em; + font-family: verdana, sans-serif; +} +h2 { + color: #314798; } /* El elemento lateral tendrá las siguientes características: