Dia 14
This commit is contained in:
parent
773da8d2dd
commit
d4364785fc
30
Practicas/Practicas CSS/Practica 14/Practica14.html
Normal file
30
Practicas/Practicas CSS/Practica 14/Practica14.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="description" content="Web de recetas de cocina"/>
|
||||||
|
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
|
||||||
|
<meta name="author" content="Nombre del autor"/>
|
||||||
|
<meta name="copyright" content="Propietario del copyright"/>
|
||||||
|
<link href="css/estilo.css" rel="stylesheet">
|
||||||
|
<title>Práctica 14</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
</header>
|
||||||
|
<nav>
|
||||||
|
</nav>
|
||||||
|
<section>
|
||||||
|
<div class="item" id="div1"><p>1 Div</p></div>
|
||||||
|
<div class="item" id="div2"><p>2 Div</p></div>
|
||||||
|
<div class="item" id="div3"><p>3 Div</p></div>
|
||||||
|
<div class="item" id="div4"><p>4 Div</p></div>
|
||||||
|
<div class="item" id="div5"><p>5 Div</p></div>
|
||||||
|
<div class="item" id="div6"><p>6 Div</p></div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
</article>
|
||||||
|
<footer>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
Practicas/Practicas CSS/Practica 14/Practica14b.html
Normal file
30
Practicas/Practicas CSS/Practica 14/Practica14b.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="description" content="Web de recetas de cocina"/>
|
||||||
|
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
|
||||||
|
<meta name="author" content="Nombre del autor"/>
|
||||||
|
<meta name="copyright" content="Propietario del copyright"/>
|
||||||
|
<link href="css/estilo14b.css" rel="stylesheet">
|
||||||
|
<title>Práctica 14</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
</header>
|
||||||
|
<nav>
|
||||||
|
</nav>
|
||||||
|
<section>
|
||||||
|
<div class="item" id="div1"><p>Div 1 200X100</p></div>
|
||||||
|
<div class="item" id="div2"><p>Div 2 50X300</p></div>
|
||||||
|
<div class="item" id="div3"><p>Div 3 150X150</p></div>
|
||||||
|
<div class="item" id="div4"><p>Div 4 230X40 </p></div>
|
||||||
|
<div class="item" id="div5"><p>Div 5 110X140 </p></div>
|
||||||
|
<div class="item" id="div6"><p>Div 6 </p></div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
</article>
|
||||||
|
<footer>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
Practicas/Practicas CSS/Practica 14/css/estilo.css
Normal file
32
Practicas/Practicas CSS/Practica 14/css/estilo.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
background-color: orange;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div2{
|
||||||
|
position: relative;
|
||||||
|
top:40px;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div4{
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div5{
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
58
Practicas/Practicas CSS/Practica 14/css/estilo14b.css
Normal file
58
Practicas/Practicas CSS/Practica 14/css/estilo14b.css
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: absolute;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div1 {
|
||||||
|
background-color: orange;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div2 {
|
||||||
|
background-color: blue;
|
||||||
|
top: 50px;
|
||||||
|
left: 590px;
|
||||||
|
width: 50px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div3 {
|
||||||
|
background-color: red;
|
||||||
|
top: 0px;
|
||||||
|
left: 300px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div4 {
|
||||||
|
background-color: black;
|
||||||
|
top: 0px;
|
||||||
|
left: 550px;
|
||||||
|
width: 230px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div5 {
|
||||||
|
background-color: green;
|
||||||
|
top: 160px;
|
||||||
|
left: 300px;
|
||||||
|
width: 110px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div6 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
28
Practicas/Practicas CSS/Propiedad Posittion.txt
Normal file
28
Practicas/Practicas CSS/Propiedad Posittion.txt
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
Propiedad display
|
||||||
|
inline --Elemento en línea --El elemento se coloca a continuación del otro (en horizontal).
|
||||||
|
block --Elemento en bloque --El elemento se coloca encima de otro (en vertical).
|
||||||
|
flex --Utiliza el modelo de cajas flexibles de CSS.
|
||||||
|
none --Oculta el elemento visualmente
|
||||||
|
|
||||||
|
Propiedad visibility
|
||||||
|
visible --El elemento es visible. Valor por defecto.
|
||||||
|
hidden --El elemento no es visible pero sigue ocupando su espacio y posición.
|
||||||
|
|
||||||
|
Propiedad opacity
|
||||||
|
valores de 0 a 1
|
||||||
|
valores de 0% a 100%
|
||||||
|
|
||||||
|
*****Propiedad posittion *****
|
||||||
|
static Posicionamiento estático. Utiliza el orden natural de los elementos HTML.(Por defecto)
|
||||||
|
relative Posicionamiento relativo. Los elementos se mueven en base a su posición estática.
|
||||||
|
absolute Posicionamiento absoluto. Los elementos se colocan en base al contenedor padre.
|
||||||
|
Origen primer contenedor padre no static o body
|
||||||
|
fixed Posicionamiento fijo. Idem al absoluto, pero aunque hagamos scroll no se mueve.
|
||||||
|
sticky Posicionamiento «pegado». Similar al relativo y fixed.
|
||||||
|
|
||||||
|
top - botton - left - right
|
||||||
|
|
||||||
|
z-index posicionamiento en el eje de la pantalla (profundidad)
|
||||||
|
|
||||||
|
float para que los elementos floten a la izquierda (left) o a la derecha (right)
|
||||||
|
listas de menu(navegación)
|
||||||
|
|
@ -13,7 +13,30 @@ body {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
padding: 10px;
|
}
|
||||||
|
|
||||||
|
nav{
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav hr {
|
||||||
|
box-shadow:0px 4px 5px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#servicios,#productos,#contacto{
|
||||||
|
padding-top: 70px;
|
||||||
|
margin-top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu{
|
||||||
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boton_menu {
|
.boton_menu {
|
||||||
|
|
@ -22,19 +45,15 @@ body {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prueba {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #1a89dc;
|
background-color: #1a89dc;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
h2,h3,p {
|
||||||
h3,
|
|
||||||
p {
|
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,18 +62,18 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 90%;
|
width: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
color: #1a89dc;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr td img {
|
table tr td img {
|
||||||
width: 90%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr td {
|
table tr td {
|
||||||
|
color: #1a89dc;
|
||||||
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,10 +92,28 @@ ul {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
li{
|
||||||
|
list-style-type:circle;
|
||||||
|
}
|
||||||
|
|
||||||
/* nav{
|
span{
|
||||||
position: sticky;
|
color: #1a89dc;
|
||||||
top: 0;
|
width: 300px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: white;
|
border: 2px solid #1a89dc;
|
||||||
} */
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subircaja{
|
||||||
|
position: fixed;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
#subirimg {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
BIN
Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png
Normal file
BIN
Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -11,7 +11,7 @@
|
||||||
<body style="background-image: url('./imagenes/fondo_plano.jpg'); background-repeat: no-repeat; background-size: cover;
|
<body style="background-image: url('./imagenes/fondo_plano.jpg'); background-repeat: no-repeat; background-size: cover;
|
||||||
font-family: Arial, Helvetica, sans-serif;">
|
font-family: Arial, Helvetica, sans-serif;">
|
||||||
<nav>
|
<nav>
|
||||||
<a href="./index OnePage.html" style="color:green; font-size:40px;">Inicio</a>
|
<a href="./index OnePage.html" style="color:green; font-size:40px;">SInicio</a>
|
||||||
<a href="#servicios" style="color:#1a89dc; font-size:40px;">Servicios</a>
|
<a href="#servicios" style="color:#1a89dc; font-size:40px;">Servicios</a>
|
||||||
<a href="#productos" style="color:#1a89dc; font-size:40px;">Productos</a>
|
<a href="#productos" style="color:#1a89dc; font-size:40px;">Productos</a>
|
||||||
<a href="#contacto" style="color:#1a89dc; font-size:40px;">Contactos</a>
|
<a href="#contacto" style="color:#1a89dc; font-size:40px;">Contactos</a>
|
||||||
|
|
|
||||||
|
|
@ -8,15 +8,18 @@
|
||||||
<title>Inicio</title>
|
<title>Inicio</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body id="home">
|
||||||
<nav>
|
<nav>
|
||||||
<a class="boton_menu" href="./index OnePage.html">Inicio</a>
|
<div class="menu">
|
||||||
|
<a class="boton_menu" href="#home">Inicio</a>
|
||||||
<a class="boton_menu" href="#servicios">Servicios</a>
|
<a class="boton_menu" href="#servicios">Servicios</a>
|
||||||
<a class="boton_menu" href="#productos">Productos</a>
|
<a class="boton_menu" href="#productos">Productos</a>
|
||||||
<a class="boton_menu" href="#contacto">Contactos</a>
|
<a class="boton_menu" href="#contacto">Contactos</a>
|
||||||
</nav>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<br>
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
<h2>Presentación</h2>
|
<h2>Presentación</h2>
|
||||||
<p>Le damos la bienvenida a Construtec S.L., todo un referente entre las empresas
|
<p>Le damos la bienvenida a Construtec S.L., todo un referente entre las empresas
|
||||||
constructoras en Lugo. Nos caracterizamos por el buen trato, la profesionalidad, la buena
|
constructoras en Lugo. Nos caracterizamos por el buen trato, la profesionalidad, la buena
|
||||||
|
|
@ -102,8 +105,10 @@
|
||||||
proyectos de vivienda en toda la zona urbana de Lugo ciudad.
|
proyectos de vivienda en toda la zona urbana de Lugo ciudad.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Nos enfocamos en materializar lo de aquellos que nos confían donde quieren vivir, aquellos que desean construir
|
Nos enfocamos en materializar lo de aquellos que nos confían donde quieren vivir, aquellos que desean
|
||||||
sus edificios residenciales, comerciales o industriales, acompañando a nuestros clientes en todos los pasos que
|
construir
|
||||||
|
sus edificios residenciales, comerciales o industriales, acompañando a nuestros clientes en todos los pasos
|
||||||
|
que
|
||||||
hay que dar.
|
hay que dar.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -112,30 +117,34 @@
|
||||||
edificación industrial, residencial y dotacional.
|
edificación industrial, residencial y dotacional.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Asumimos cada proyecto de construcción como si fuese el único, garantizando su óptima ejecución y logrando así
|
Asumimos cada proyecto de construcción como si fuese el único, garantizando su óptima ejecución y logrando
|
||||||
la plena satisfacción de quienes confían en una de las mejores constructoras en Lugo y empresas de reformas de
|
así
|
||||||
|
la plena satisfacción de quienes confían en una de las mejores constructoras en Lugo y empresas de reformas
|
||||||
|
de
|
||||||
Lugo.
|
Lugo.
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
<!-- Aqui empieza la pagina Productos -->
|
<!-- Aqui empieza la pagina Productos -->
|
||||||
<hr>
|
<hr>
|
||||||
<h2 id="productos" class="prueba">Nuestros productos</h2>
|
<h2 id="productos">Nuestros productos</h2>
|
||||||
<p class="prueba">Dentro de nuestra trayectoria hemos participado en la construcción
|
<p>Dentro de nuestra trayectoria hemos participado en la construcción
|
||||||
de escuelas,
|
de escuelas,
|
||||||
hospitales, plazas comerciales,
|
hospitales, plazas comerciales,
|
||||||
parques, naves industriales; somos
|
parques, naves industriales; somos
|
||||||
especialistas en losas de entrepiso, instalaciones eléctricas e hidráulicas, cimentaciones para equipo especial,
|
especialistas en losas de entrepiso, instalaciones eléctricas e hidráulicas, cimentaciones para equipo
|
||||||
|
especial,
|
||||||
etc.
|
etc.
|
||||||
</p>
|
</p>
|
||||||
<p class="prueba">Contamos con varias plantas de asfaltos, algunas móviles, lo cual
|
<p>Contamos con varias plantas de asfaltos, algunas móviles, lo cual
|
||||||
puede mejorar en
|
puede mejorar en
|
||||||
mucho los costos por acarreo;
|
mucho los costos por acarreo;
|
||||||
producimos todo tipo de asfaltos, sello
|
producimos todo tipo de asfaltos, sello
|
||||||
premezclado, microcarpetas, carpetas modificadas con polímero, nos adecuamos a las necesidades de cada cliente
|
premezclado, microcarpetas, carpetas modificadas con polímero, nos adecuamos a las necesidades de cada
|
||||||
|
cliente
|
||||||
ya que ofrecemos venta a granel o bien el
|
ya que ofrecemos venta a granel o bien el
|
||||||
servicio completo con tendido y compactado.</p>
|
servicio completo con tendido y compactado.</p>
|
||||||
|
|
||||||
<h2 class="prueba">Nuestras especialidades</h2>
|
<h2>Nuestras especialidades</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Diseños arquitectónicos.</li>
|
<li>Diseños arquitectónicos.</li>
|
||||||
<li>Diseños estructurales.</li>
|
<li>Diseños estructurales.</li>
|
||||||
|
|
@ -190,36 +199,28 @@
|
||||||
<p>Venga a visitarnos, estaremos encantados de atenderle.</p>
|
<p>Venga a visitarnos, estaremos encantados de atenderle.</p>
|
||||||
<h2>Dónde estamos</h2>
|
<h2>Dónde estamos</h2>
|
||||||
|
|
||||||
<p>Dirección |</span> Calle La que sea, 2 - bajo 27004 Lugo
|
<p><span>Dirección |
|
||||||
|
</span> Calle La que sea, 2 - bajo 27004 Lugo
|
||||||
(Lugo) </p>
|
(Lugo) </p>
|
||||||
<p>Teléfono |</span> 982 304 743</p>
|
|
||||||
<p>E-mail |</span> nombreempresa@nombreempresa.com</p>
|
<p><span>Teléfono |
|
||||||
<p>Móvil |</span> 690 900 700</p>
|
</span> 982 304 743</p>
|
||||||
|
|
||||||
|
<p><span>E-mail |
|
||||||
|
</span> nombreempresa@nombreempresa.com</p>
|
||||||
|
|
||||||
|
<p><span>Móvil |
|
||||||
|
</span> 690 900 700</p>
|
||||||
<iframe
|
<iframe
|
||||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2917.2975090229866!2d-7.5559269234771165!3d43.0141246935289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd31ce9094468525%3A0xc6b267162d7eabde!2sR%C3%BAa%20Castelao%2C%20Lugo!5e0!3m2!1ses!2ses!4v1701343489810!5m2!1ses!2ses"
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2917.2975090229866!2d-7.5559269234771165!3d43.0141246935289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd31ce9094468525%3A0xc6b267162d7eabde!2sR%C3%BAa%20Castelao%2C%20Lugo!5e0!3m2!1ses!2ses!4v1701343489810!5m2!1ses!2ses"
|
||||||
width="600" height="450" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
width="600" height="450" allowfullscreen="" loading="lazy"
|
||||||
|
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</main>
|
||||||
|
<div id="subircaja">
|
||||||
|
<a href="#home">
|
||||||
|
<img id="subirimg" src="./imagenes/icono_subir.png" alt="icono subir">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user