diff --git a/Recursos/Bloques Web/css/header.css b/Recursos/Bloques Web/css/header.css new file mode 100644 index 0000000..98315ec --- /dev/null +++ b/Recursos/Bloques Web/css/header.css @@ -0,0 +1,125 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; + list-style: none; + text-decoration: none; + border: none; + outline: none; +} + +#main_header { + display: flex; + justify-content: space-between; + align-items: end; + position: sticky; + top: 0; + background-color: gray; + padding: 0.5em; + border-bottom: 3px solid rgb(92, 92, 92); + box-shadow: 0px 10px 20px gray; +} + +#main_header > img { + width: 150px; + height: 50px; +} + +hr { + margin: 1em 0; + border: 2px solid black; +} + +/********************************/ +/* formato horizontal con Float */ +/********************************/ +.menu { + list-style-type: none; + margin: 0; + padding: 0; +} + +.menu li { + float: left; + margin: 0 5px; +} + + +/*******************************/ +/* formato horizontal con Flex */ +/*******************************/ +/* .menu { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-around; +} + +.menu li { + margin: 0 5px; +} */ + +.menu a { + font-size: 1.5em; + text-decoration: none; + color: #333; +} + +p { + width: 50%; + margin: left; + font-size: large; +} + +h2 { + font-size: 2em; + margin-bottom: 0.5em; +} + +/*******************************************/ +/* Metodo sin alterar padding-top ni margin*/ +/*******************************************/ +#home, +#enlace1, +#enlace2, +#enlace3 { + scroll-margin-top: 80px; +} + +@media (max-width: 500px) { + /********************************/ + /* formato vertical con Float */ + /********************************/ + .menu { + text-align: left; + } + .menu li { + list-style-type: square; + clear: left; + } + .menu a { + font-size: 1em; + } + + /********************************/ + /* formato vertical con Flex */ + /********************************/ + /* .menu { + display: block; + text-align: left; + } + .menu li { + list-style-type: square; + } + .menu a { + font-size: 1em; + } + + #home, + #enlace1, + #enlace2, + #enlace3 { + scroll-margin-top: 100px; + } */ +} diff --git a/Recursos/Bloques Web/css/tables.css b/Recursos/Bloques Web/css/tables.css new file mode 100644 index 0000000..7f0661d --- /dev/null +++ b/Recursos/Bloques Web/css/tables.css @@ -0,0 +1,44 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; + list-style: none; + text-decoration: none; + border: none; + outline: none; +} + +.table_base { + width: 80%; + margin: auto; + border-collapse: collapse; + margin: 20px auto 20px auto; +} +.table_base th, .table_base td { + border: 1px solid #ddd; /* Añade bordes de 1 píxel de ancho y color gris claro */ + padding: 8px; + text-align: left; +} + +.table_base th { + background-color: #f2f2f2; +} + +.table_base tfoot { + font-weight: bold; +} + + +.colrowspan{ + width: 80%; + margin: auto; + border-collapse: collapse; + margin: 20px auto 20px auto; +} +.colrowspan th, .colrowspan td { + border: 2px solid black; /* Añade bordes de 1 píxel de ancho y color gris claro */ + padding: 8px; + text-align: center; + height: 80px; + } + \ No newline at end of file diff --git a/Recursos/Bloques Web/header.html b/Recursos/Bloques Web/header.html new file mode 100644 index 0000000..32a2be8 --- /dev/null +++ b/Recursos/Bloques Web/header.html @@ -0,0 +1,72 @@ + + + + + + + Header + + + + + +
+ + +
+ +
+ +
+

Home

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, dolor explicabo, molestiae sint, ex illo error quidem saepe aliquid optio assumenda tempore vero id! Praesentium dignissimos tempora quidem rem libero.


+

Molestias, unde fugit. Vitae laboriosam tempore accusantium optio commodi ea, corrupti expedita! Quibusdam earum, expedita vero ut esse dicta pariatur eveniet, nemo itaque saepe placeat voluptatum explicabo deserunt debitis impedit?


+

Laboriosam quis maiores aut delectus eaque corrupti, beatae assumenda velit ratione minima doloribus explicabo porro repellat, doloremque suscipit vero facere et sint ex itaque! Illum vel quas rerum ullam inventore.


+

Quasi ullam pariatur harum quia amet debitis reiciendis velit natus odit veritatis eos quaerat esse dolores sequi dignissimos nesciunt perspiciatis quis voluptatibus, dicta quas. Maxime consequuntur numquam voluptate ipsa! Et.


+

Eos minus culpa aliquid voluptates eius sunt officia dignissimos nemo iusto, quod cum dolorem sequi illo soluta voluptatum a quisquam tenetur repudiandae commodi repellat voluptatem facilis eveniet accusantium. Exercitationem, consequuntur.


+

Accusamus molestias iusto quasi nostrum quae velit aliquid pariatur id non voluptas est, sint exercitationem modi dolorum. Sequi voluptatum voluptatibus aliquam molestiae, tempora quis dolorum velit dolores laudantium doloribus quaerat.


+
+
+
+

Enlace 1

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, dolor explicabo, molestiae sint, ex illo error quidem saepe aliquid optio assumenda tempore vero id! Praesentium dignissimos tempora quidem rem libero.


+

Molestias, unde fugit. Vitae laboriosam tempore accusantium optio commodi ea, corrupti expedita! Quibusdam earum, expedita vero ut esse dicta pariatur eveniet, nemo itaque saepe placeat voluptatum explicabo deserunt debitis impedit?


+

Laboriosam quis maiores aut delectus eaque corrupti, beatae assumenda velit ratione minima doloribus explicabo porro repellat, doloremque suscipit vero facere et sint ex itaque! Illum vel quas rerum ullam inventore.


+

Quasi ullam pariatur harum quia amet debitis reiciendis velit natus odit veritatis eos quaerat esse dolores sequi dignissimos nesciunt perspiciatis quis voluptatibus, dicta quas. Maxime consequuntur numquam voluptate ipsa! Et.


+

Eos minus culpa aliquid voluptates eius sunt officia dignissimos nemo iusto, quod cum dolorem sequi illo soluta voluptatum a quisquam tenetur repudiandae commodi repellat voluptatem facilis eveniet accusantium. Exercitationem, consequuntur.


+

Accusamus molestias iusto quasi nostrum quae velit aliquid pariatur id non voluptas est, sint exercitationem modi dolorum. Sequi voluptatum voluptatibus aliquam molestiae, tempora quis dolorum velit dolores laudantium doloribus quaerat.


+
+ +
+

Enlace 2

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, dolor explicabo, molestiae sint, ex illo error quidem saepe aliquid optio assumenda tempore vero id! Praesentium dignissimos tempora quidem rem libero.


+

Molestias, unde fugit. Vitae laboriosam tempore accusantium optio commodi ea, corrupti expedita! Quibusdam earum, expedita vero ut esse dicta pariatur eveniet, nemo itaque saepe placeat voluptatum explicabo deserunt debitis impedit?


+

Laboriosam quis maiores aut delectus eaque corrupti, beatae assumenda velit ratione minima doloribus explicabo porro repellat, doloremque suscipit vero facere et sint ex itaque! Illum vel quas rerum ullam inventore.


+

Quasi ullam pariatur harum quia amet debitis reiciendis velit natus odit veritatis eos quaerat esse dolores sequi dignissimos nesciunt perspiciatis quis voluptatibus, dicta quas. Maxime consequuntur numquam voluptate ipsa! Et.


+

Eos minus culpa aliquid voluptates eius sunt officia dignissimos nemo iusto, quod cum dolorem sequi illo soluta voluptatum a quisquam tenetur repudiandae commodi repellat voluptatem facilis eveniet accusantium. Exercitationem, consequuntur.


+

Accusamus molestias iusto quasi nostrum quae velit aliquid pariatur id non voluptas est, sint exercitationem modi dolorum. Sequi voluptatum voluptatibus aliquam molestiae, tempora quis dolorum velit dolores laudantium doloribus quaerat.


+
+ +
+

Enlace 3

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, dolor explicabo, molestiae sint, ex illo error quidem saepe aliquid optio assumenda tempore vero id! Praesentium dignissimos tempora quidem rem libero.


+

Molestias, unde fugit. Vitae laboriosam tempore accusantium optio commodi ea, corrupti expedita! Quibusdam earum, expedita vero ut esse dicta pariatur eveniet, nemo itaque saepe placeat voluptatum explicabo deserunt debitis impedit?


+

Laboriosam quis maiores aut delectus eaque corrupti, beatae assumenda velit ratione minima doloribus explicabo porro repellat, doloremque suscipit vero facere et sint ex itaque! Illum vel quas rerum ullam inventore.


+

Quasi ullam pariatur harum quia amet debitis reiciendis velit natus odit veritatis eos quaerat esse dolores sequi dignissimos nesciunt perspiciatis quis voluptatibus, dicta quas. Maxime consequuntur numquam voluptate ipsa! Et.


+

Eos minus culpa aliquid voluptates eius sunt officia dignissimos nemo iusto, quod cum dolorem sequi illo soluta voluptatum a quisquam tenetur repudiandae commodi repellat voluptatem facilis eveniet accusantium. Exercitationem, consequuntur.


+

Accusamus molestias iusto quasi nostrum quae velit aliquid pariatur id non voluptas est, sint exercitationem modi dolorum. Sequi voluptatum voluptatibus aliquam molestiae, tempora quis dolorum velit dolores laudantium doloribus quaerat.


+
+ +
+ + + + + \ No newline at end of file diff --git a/Recursos/Bloques Web/img/logo.svg b/Recursos/Bloques Web/img/logo.svg new file mode 100644 index 0000000..5e06d03 --- /dev/null +++ b/Recursos/Bloques Web/img/logo.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Recursos/Bloques Web/tables.html b/Recursos/Bloques Web/tables.html new file mode 100644 index 0000000..222802b --- /dev/null +++ b/Recursos/Bloques Web/tables.html @@ -0,0 +1,91 @@ + + + + + + + Tables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreApellidoEdad
JuanPérez25
MariaGómez30
Total55
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Celda 1
colspan rowspan		Celda 3Celda 4Celda 5Celda 6
Celda 3Celda 4
Rowspan		Celda 5Celda 6
Celda 1Celda 2Celda 3Celda 5Celda 6
Celda 1Celda 2Celda 3Celda 5Celda 6
Celda 1Celda 2Celda 3Celda 4Celda 5
Colspan
Celda 1Celda 2Celda 3Celda 4Celda 5Celda 6
+ + + + + \ No newline at end of file