HTML5 y CSS3 pt. 2: Posic. listas y navegación 03
Posicionamiento listas y menu de navegación, posicionamiento de encabezado de página. Quitando estilos predefinidos del navegador 'reset.css'. Posicionamiento 'relative' y 'absolute'.
This commit is contained in:
parent
9d14f91ccb
commit
21b068be85
GPG Key ID:
E070ECF4A754FDB1
@ -84,3 +84,10 @@ estilo.[css](./html_css_parte1/style.css).
|
|||||||
|
|
||||||
#### Parte 2 - Posicionamiento, listas y navegación
|
#### Parte 2 - Posicionamiento, listas y navegación
|
||||||
|
|
||||||
|
Página [productos](./html_css_parte2/productos.html) y
|
||||||
|
[estilo](./html_css_parte2/productos.css).
|
||||||
|
|
||||||
|
- Base de un archivo HTML.
|
||||||
|
- Lista html no ordenada.
|
||||||
|
- Posicionamiento listas y 'menu' de navegación.
|
||||||
|
- Posicionamiento encabezado de página.
|
||||||
|
|||||||
@ -1,5 +1,18 @@
|
|||||||
header {
|
header {
|
||||||
background: #046dfc;
|
background: #046dfc;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caja {
|
||||||
|
width: 80%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 118px;
|
||||||
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav li{
|
nav li{
|
||||||
|
|||||||
@ -4,18 +4,21 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<title>Barbería Alura - Productos</title>
|
<title>Barbería Alura - Productos</title>
|
||||||
|
<link rel="stylesheet" href="./reset2.css"/>
|
||||||
<link rel="stylesheet" href="./productos.css"/>
|
<link rel="stylesheet" href="./productos.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1><img src="./imagenes/logo.png"></h1>
|
<div class="caja">
|
||||||
<nav>
|
<h1><img src="./imagenes/logo.png"></h1>
|
||||||
<ul>
|
<nav>
|
||||||
<li><a href="./index.html">Home</a></li>
|
<ul>
|
||||||
<li><a href="./productos.html">Productos</a></li>
|
<li><a href="./index.html">Home</a></li>
|
||||||
<li><a href="./contacto.html">Contacto</a></li>
|
<li><a href="./productos.html">Productos</a></li>
|
||||||
</ul>
|
<li><a href="./contacto.html">Contacto</a></li>
|
||||||
</nav>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
52
004_primeras_paginas/html_css_parte2/reset.css
Normal file
52
004_primeras_paginas/html_css_parte2/reset.css
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
|
||||||
|
*PROBAR* version fork actual:
|
||||||
|
https://github.com/elad2412/the-new-css-reset
|
||||||
|
https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
99
004_primeras_paginas/html_css_parte2/reset2.css
Normal file
99
004_primeras_paginas/html_css_parte2/reset2.css
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
/***
|
||||||
|
The new CSS reset - version 1.8.4 (last updated 14.2.2023)
|
||||||
|
GitHub page: https://github.com/elad2412/the-new-css-reset
|
||||||
|
***/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
|
||||||
|
- The "symbol *" part is to solve Firefox SVG sprite bug
|
||||||
|
*/
|
||||||
|
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
|
||||||
|
all: unset;
|
||||||
|
display: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preferred box-sizing value */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reapply the pointer cursor for anchor tags */
|
||||||
|
a, button {
|
||||||
|
cursor: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove list styles (bullets/numbers) */
|
||||||
|
ol, ul, menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For images to not be able to exceed their container */
|
||||||
|
img {
|
||||||
|
max-inline-size: 100%;
|
||||||
|
max-block-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* removes spacing between cells in tables */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
|
||||||
|
input, textarea {
|
||||||
|
-webkit-user-select: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* revert the 'white-space' property for textarea elements on Safari */
|
||||||
|
textarea {
|
||||||
|
white-space: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* minimum style to allow to style meter element */
|
||||||
|
meter {
|
||||||
|
-webkit-appearance: revert;
|
||||||
|
appearance: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* preformatted text - use only for this feature */
|
||||||
|
:where(pre) {
|
||||||
|
all: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reset default text opacity of input placeholder */
|
||||||
|
::placeholder {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove default dot (•) sign */
|
||||||
|
::marker {
|
||||||
|
content: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix the feature of 'hidden' attribute.
|
||||||
|
display:revert; revert to element instead of attribute */
|
||||||
|
:where([hidden]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* revert for bug in Chromium browsers
|
||||||
|
- fix for the content editable attribute will work properly.
|
||||||
|
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
|
||||||
|
:where([contenteditable]:not([contenteditable="false"])) {
|
||||||
|
-moz-user-modify: read-write;
|
||||||
|
-webkit-user-modify: read-write;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
-webkit-line-break: after-white-space;
|
||||||
|
-webkit-user-select: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* apply back the draggable feature - exist only in Chromium and Safari */
|
||||||
|
:where([draggable="true"]) {
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Revert Modal native behavior */
|
||||||
|
:where(dialog:modal) {
|
||||||
|
all: revert;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user