Desarrollo y diseño

Duda listas html

B
[Borrado] #1 Abr '17

Buenas,

Estoy cursando un curso de html y estoy haciendo un ejercicio de listas. Tengo una duda respecto a como utilizar una serie de listas y para eso os pongo la imagen que seguro que sera de gran ayuda. Tengo que copiar la siguiente imagen

spoiler

.

Mi codigo es el siguiente:

<ul>
		<li type="circle">Cabecera
		<ul>
		<li>Title.</li> 
		<li>Link.</li>
		<li>Style.</li>
		</ul>
		</li>

	
	<li type="circle">Cuerpo
	<ol type="a">
	<li>Secciones
	</ol>
	<ul>
	<ul>
	<li>header</li>
	<li>footer</li>
	<li>section</li>
	<li>article</li>
	</ul>
	</ul>
	</li>

	<ol>
	<li>Texto
	</ol>
	<ul>
	<ul>
	<li>strong</li>
	<li>em</li>
	<li>data</li>
	<li>time</li>
	</ul>
	</ul>
	</li>

	<ol type="c">
	<li>Multimedia
	</ol>
	<ul>
	<ul>
	<li>img</li>
	<li>audio</li>
	<li>video</li>
	</ul>
	</ul>
	</ul>
	</li>


	<ul>
	<li type="circle">Sripting
	<ul>
	<li>script</li>
	<li>noscript</li>
	</ul>
	</li>

El problema viene dado en que las secciones (a,b,c) no se muestra como tal, sino que solo se me muestra la "a".

Alguien puede ayudarme?

Beavis
Beavis #2 Abr '17

Hay varias cosas mal en el código: por un lado tienes etiquetas de abrir lista duplicadas y debes tener en cuenta que al anidar listas estas deben ir dentro de una etiqueta li del padre.
Primero ten clara la jerarquría de padres-hijos, es más fácil si primero construyes bien las listas padre y después vas insertando nivel a nivel los hijos donde toque.
Para pedir ayuda con ejemplos así te recomiendo que uses alguna web estilo http://codepen.io/pen/ o https://jsfiddle.net/ donde puedes poner el código y ver sus resultados directamente

1 respuesta
B
[Borrado] #3 Abr '17

#2 Una duda que me surge ahora mismo....

Tengo que crear 3 paginas web (sencillas) con un mismo archivo de css.

Cada pagina tiene un cuerpo diferente. Como aplico esa diferencia en cada pagina en un único archivo de css?

1 respuesta
B
[Borrado] #4 Abr '17

#3 con ids o clases, ahora te pongo un ejemplo.

Te iba a decir lo de #5 pero ya te lo ha explicado muy bien.

Un apunte, es que si quieres que por ejemplo que cada vez que abras un

<h1>

y quieres que te salga de un estilo en especial, pones en el CSS

h1 {
    text-align: center;
	color: blue;
}

Por ejemplo.

Sin necesidad de poner el . delante.

Bajo mi poca experiencia en HTML y CSS, lo que más suelo usar son clases.

NickNack
NickNack #5 Abr '17 :psyduck:

Tienes que diferenciar entre cabeceras, cabeceras secundarias y tipos de listas (ul, ol, etc). Otro repaso a los apuntes no te vendra mal (esto es lo más básico que puedes hacer)

Respecto a tu segunda pregunta, puedes hacerlo de muchas maneras. UN simple ejemplo:

.contenedor.pagina_a {
Estilo 1
}

.contenedor.pagina_b {
Estilo 2
}

.contenedor.pagina_c {
Estilo 3
}

Y luego en cada pagina seria por ejemplo:

<div class="contenedor pagina_a>
<div class="contenedor pagina_b>
<div class="contenedor pagina_c>

Usuarios habituales

Tags