Son tres columnas y las tres en conjunto ocupan el 80% del espacio y están centradas. Son 15 cajas que están flotando.
<!DOCTYPE html>
<html>
<head>
<title>Listas flotantes</title>
<style>
body {
color:blue;
}
.contenedor {
width:80%;
margin:0px auto;
}
ul,ol {
float:left;
width:28%;
}
ul.flecha {
list-style-image: url("flecha.png");
clear:left;
}
ul.flecha2 {
list-style-image: url("flecha_abajo.png");
}
ul.flecha3 {
list-style-image: url("flecha_arriba.png");
}
</style>
</head>
<body>
<div class="contenedor">
<ul style="list-style-type: square">
<li>3 elementos tipo cuadrado</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ul style="list-style-type:circle">
<li>3 elementos tipo círculo</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ul style="list-style-type:disc">
<li>3 elementos tipo disco</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ol style="list-style-type: lower-roman">
<li>3 elementos tipo romano</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type: decimal-leading-zero;">
<li>3 elementos tipo ordenado</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:armenian;">
<li>3 elementos tipo armenio</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:cjk-ideographic;">
<li>3 elementos tipo ideográfico</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:hebrew;">
<li>3 elementos tipo hebreo</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:hiragana;">
<li>3 elementos tipo japonés</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:katakana;">
<li>3 elementos tipo katakana</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>3 elementos tipo normal</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol style="list-style-type:none;">
<li>3 elementos tipo nada</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ul class="flecha">
<li>3 elementos tipo flecha</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ul class="flecha2">
<li>3 elementos tipo flecha</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ul class="flecha3">
<li>3 elementos tipo flecha</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario