Diccionario (09/06/2022)
<div class="ABC">
<a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#Ñ">Ñ</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a>
</div>
/* ==========================================
DICIONARIO
========================================== */
.ABC{padding:10px 20px;border:1px solid black;font:bold 1.2em Verdana;width:90%;text-align:center;background:#b2b3b1;border-radius:50px;line-height:1.7em;position:fixed;left:2px;bottom:2px;z-index:10000;}
.ABC a{text-decoration:none;color:darkblue;background:white;padding:2px 10px;border-radius:20px;}
.ABC a:hover{color:white;background:darkblue;}
.ABC-letra{text-align:center;background:black;}
.ABC-letra strong{color:white;font-size:1.5em;}
1.- Utilizando tabla con dos columnas
| A | |
| A-letra | Texto |
| A-texto | Texto |
| B | |
| B-letra | Texto |
| B-texto | Texto |
<table class="tablaVocabulario">
<tr id="A"><td colspan="2" class="ABC-letra"><strong>A</strong></td></tr>
<tr id="B"><td colspan="2" class="ABC-letra"><strong>B</strong></td></tr>
<tr id="C"><td colspan="2" class="ABC-letra"><strong>C</strong></td></tr>
<tr id="D"><td colspan="2" class="ABC-letra"><strong>D</strong></td></tr>
<tr id="E"><td colspan="2" class="ABC-letra"><strong>E</strong></td></tr>
<tr id="F"><td colspan="2" class="ABC-letra"><strong>F</strong></td></tr>
<tr id="G"><td colspan="2" class="ABC-letra"><strong>G</strong></td></tr>
<tr id="H"><td colspan="2" class="ABC-letra"><strong>H</strong></td></tr>
<tr id="I"><td colspan="2" class="ABC-letra"><strong>I</strong></td></tr>
<tr id="J"><td colspan="2" class="ABC-letra"><strong>J</strong></td></tr>
<tr id="K"><td colspan="2" class="ABC-letra"><strong>K</strong></td></tr>
<tr id="L"><td colspan="2" class="ABC-letra"><strong>L</strong></td></tr>
<tr id="M"><td colspan="2" class="ABC-letra"><strong>M</strong></td></tr>
<tr id="N"><td colspan="2" class="ABC-letra"><strong>N</strong></td></tr>
<tr id="Ñ"><td colspan="2" class="ABC-letra"><strong>Ñ</strong></td></tr>
<tr id="O"><td colspan="2" class="ABC-letra"><strong>O</strong></td></tr>
<tr id="P"><td colspan="2" class="ABC-letra"><strong>P</strong></td></tr>
<tr id="Q"><td colspan="2" class="ABC-letra"><strong>Q</strong></td></tr>
<tr id="R"><td colspan="2" class="ABC-letra"><strong>R</strong></td></tr>
<tr id="S"><td colspan="2" class="ABC-letra"><strong>S</strong></td></tr>
<tr id="T"><td colspan="2" class="ABC-letra"><strong>T</strong></td></tr>
<tr id="U"><td colspan="2" class="ABC-letra"><strong>U</strong></td></tr>
<tr id="V"><td colspan="2" class="ABC-letra"><strong>V</strong></td></tr>
<tr id="W"><td colspan="2" class="ABC-letra"><strong>W</strong></td></tr>
<tr id="X"><td colspan="2" class="ABC-letra"><strong>X</strong></td></tr>
<tr id="Y"><td colspan="2" class="ABC-letra"><strong>Y</strong></td></tr>
<tr id="Z"><td colspan="2" class="ABC-letra"><strong>Z</strong></td></tr>
</table>
2.- Utilizando Grilla con dos columnas
A
Item 1a
Item 1b
Item 1a
Item 1b
<div class="tableGrid">
<div class="tableGridGrup" id="A">
<div class="tableGridLiteral">A</div>
<div class="tableGridItem2">
<div class="tableGridCol1">Item 1a</div>
<div>Item 1b</div>
</div>
<div class="tableGridItem2">
<div class="tableGridCol1">Item 1a</div>
<div>Item 1b</div>
</div>
</div>
</div>
3.- Utilizando Grilla con tres columnas
A
Item A-1
Item A-2
Item A-3
Item B
Item B-1a
Item B-1b
Item B-2a
Item B-2b
Item B-3a
Item B-3b
<div class="tableGrid">
<div class="tableGridGrup" id="A">
<div class="tableGridLiteral">A</div>
<div class="tableGridItem">
<div class="tableGridCol1">Item A-1</div>
<div class="tableGridCol2">Item A-2</div>
<div class="tableGridCol3">Item A-3</div>
</div>
<div class="tableGridItemMul">
<div class="tableGridCol1">Item B</div>
<div class="tableGridColMul">
<div class="tableGridCol2">Item B-1a</div>
<div class="tableGridCol3">Item B-1b</div>
<div class="tableGridCol2">Item B-2a</div>
<div class="tableGridCol3">Item B-2b</div>
<div class="tableGridCol2">Item B-3a</div>
<div class="tableGridCol3">Item B-3b</div>
</div>
</div>
</div>
</div>
/* ==========================================
DICIONARIO CON DOS O TRES COLUMNAS CON GRILLA
========================================== */
.tableGrid{width:100%;margin:2em auto;}
.tableGridGrup{outline:1px solid #7c7b7b;}
.tableGridLiteral{color:white;background-color:#575555;font-size:2em;text-align:center;padding:2px;}
.tableGridItem{width:100%;display:grid;grid-template-columns:150px 200px auto;}
.tableGridItemMul{width:100%;display:grid;grid-template-columns:150px auto;}
.tableGridItem div,
.tableGridItemMul div{outline:1px solid #808080;}
.tableGridCol1{color:#5c0c0c;font:bold 1.2em 'Times New Roman';padding:5px;text-align:center;}
.tableGridCol2{color:#335c0a;font-weight:bold;padding:5px;text-align:center;}
.tableGridCol3{padding:5px;}
.tableGridColMul{width:100%;display:grid;grid-template-columns:200px auto;}
.tableGridItem:hover,.tableGridItemMul:hover,.tableGridItem2:hover{background-color:#faf4d2;}
.tableGridItem2{display:grid;grid-template-columns:200px auto;}
.tableGridItem2 div{outline:1px solid grey;padding:5px;}
