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-size: cover;
|
||||
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 {
|
||||
|
|
@ -22,19 +45,15 @@ body {
|
|||
font-size: 40px;
|
||||
}
|
||||
|
||||
.prueba {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
background-color: #1a89dc;
|
||||
height: 2px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
h2,h3,p {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -43,18 +62,18 @@ h2 {
|
|||
}
|
||||
|
||||
table {
|
||||
width: 90%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
color: #1a89dc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table tr td img {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
color: #1a89dc;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -73,10 +92,28 @@ ul {
|
|||
margin: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
li{
|
||||
list-style-type:circle;
|
||||
}
|
||||
|
||||
/* nav{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
span{
|
||||
color: #1a89dc;
|
||||
width: 300px;
|
||||
|
||||
}
|
||||
|
||||
iframe{
|
||||
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;
|
||||
font-family: Arial, Helvetica, sans-serif;">
|
||||
<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="#productos" style="color:#1a89dc; font-size:40px;">Productos</a>
|
||||
<a href="#contacto" style="color:#1a89dc; font-size:40px;">Contactos</a>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,18 @@
|
|||
<title>Inicio</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="home">
|
||||
<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="#productos">Productos</a>
|
||||
<a class="boton_menu" href="#contacto">Contactos</a>
|
||||
</nav>
|
||||
</div>
|
||||
<hr>
|
||||
<br>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h2>Presentación</h2>
|
||||
<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
|
||||
|
|
@ -102,8 +105,10 @@
|
|||
proyectos de vivienda en toda la zona urbana de Lugo ciudad.
|
||||
</p>
|
||||
<p>
|
||||
Nos enfocamos en materializar lo de aquellos que nos confían donde quieren vivir, aquellos que desean construir
|
||||
sus edificios residenciales, comerciales o industriales, acompañando a nuestros clientes en todos los pasos que
|
||||
Nos enfocamos en materializar lo de aquellos que nos confían donde quieren vivir, aquellos que desean
|
||||
construir
|
||||
sus edificios residenciales, comerciales o industriales, acompañando a nuestros clientes en todos los pasos
|
||||
que
|
||||
hay que dar.
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -112,30 +117,34 @@
|
|||
edificación industrial, residencial y dotacional.
|
||||
</p>
|
||||
<p>
|
||||
Asumimos cada proyecto de construcción como si fuese el único, garantizando su óptima ejecución y logrando así
|
||||
la plena satisfacción de quienes confían en una de las mejores constructoras en Lugo y empresas de reformas de
|
||||
Asumimos cada proyecto de construcción como si fuese el único, garantizando su óptima ejecución y logrando
|
||||
así
|
||||
la plena satisfacción de quienes confían en una de las mejores constructoras en Lugo y empresas de reformas
|
||||
de
|
||||
Lugo.
|
||||
</p>
|
||||
<br>
|
||||
<!-- Aqui empieza la pagina Productos -->
|
||||
<hr>
|
||||
<h2 id="productos" class="prueba">Nuestros productos</h2>
|
||||
<p class="prueba">Dentro de nuestra trayectoria hemos participado en la construcción
|
||||
<h2 id="productos">Nuestros productos</h2>
|
||||
<p>Dentro de nuestra trayectoria hemos participado en la construcción
|
||||
de escuelas,
|
||||
hospitales, plazas comerciales,
|
||||
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.
|
||||
</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
|
||||
mucho los costos por acarreo;
|
||||
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
|
||||
servicio completo con tendido y compactado.</p>
|
||||
|
||||
<h2 class="prueba">Nuestras especialidades</h2>
|
||||
<h2>Nuestras especialidades</h2>
|
||||
<ul>
|
||||
<li>Diseños arquitectónicos.</li>
|
||||
<li>Diseños estructurales.</li>
|
||||
|
|
@ -190,36 +199,28 @@
|
|||
<p>Venga a visitarnos, estaremos encantados de atenderle.</p>
|
||||
<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>
|
||||
<p>Teléfono |</span> 982 304 743</p>
|
||||
<p>E-mail |</span> nombreempresa@nombreempresa.com</p>
|
||||
<p>Móvil |</span> 690 900 700</p>
|
||||
|
||||
<p><span>Teléfono |
|
||||
</span> 982 304 743</p>
|
||||
|
||||
<p><span>E-mail |
|
||||
</span> nombreempresa@nombreempresa.com</p>
|
||||
|
||||
<p><span>Móvil |
|
||||
</span> 690 900 700</p>
|
||||
<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"
|
||||
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>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user