- Element de llista
- Subllista:
- Element de subllista
- Element de subllista
- Element de llista
- Element de llista
|
<ul class="basica"> <li>Element de llista</li> <li>Subllista: <ul class="subllista"> <li>Element de subllista</li> <li>Element de subllista</li> </ul> </li> <li>Element de llista</li>
<li>Element de llista</li> </ul> |
.contingut ol, .contingut ul { margin: 5px 0; } .contingut ul.basica, .contingut .basica ul { border-left: 1px dotted #CCC; padding-left: 8px; } .contingut .basica li { padding: 5px 11px; } .contingut .basica li li { padding: 3px 11px; } .subllista { padding: 0 30px 0 40px; }
|
|
<ul class="decorada"> <li><a href="#">Element de llista</a></li> <li>Element de llista</li> <li>Element de llista</li> <li class"ultim">Element de llista</li>
</ul> |
.decorada li {
border-bottom: 1px dotted #CCC;
padding: 8px 2px;
height: 1%;
}
li.ultim, ul.destacat li.ultim {
border-bottom: none;
}
|
|
<ul class="decorada llistaBlock"> <li class="noLink">
Element de llista
</li> <li>
<a href="#" class="link">Element de llista</a>
</li> <li>
<a href="#" class="link">Element de llista</a>
</li> <li>
<a href="#" class="link">Element de llista</a>
</li>
</ul>
|
.llistaBlock li, .decorada .llistaBlock {
padding: 0;
}
.llistaBlock .link, .decorada .link, .desplegable .desplegar .link {
display: block;
padding: 8px 2px;
}
.llistaBlock .noLink { padding: 8px 2px; }
|
|
<ul class="decorada llistaBlock desplegable">
<li> <a href="#" class="link nodesplegable">
Element de llista
</a>
</li> <li> <a href="#" class="imatgeLlista"> <img alt="desplega" src="/UOC/mc-icons/general/baixa.png"> </a> <a href="#" class="link"> Element de llista
</a>
</li> <li> <a href="#" class="imatgeLlista"> <img alt="desplega"src="/UOC/mc-icons/general/baixa.png"> </a> <a href="#" class="link"> Element de llista
</a> </ul> |
.desplegable li, li.desplegable, .llistacheck li, li.llistacheck {
position: relative;
}
.desplegable .nodesplegable {
padding-left: 2px;
}
.imatgeLlista, .llistacheck .check {
left: 2px;
padding: 0;
position: absolute;
top: 0.6em;
}
|
|
<ul class="decorada llistacheck noLink">
<li>
<input id="element1" class="check" type="checkbox" />
<label for="element1">Element de llista 1</label>
<ul class="subllista">
<li class="ultim">
<input class="check" id="element11" type="checkbox" />
<label for="element11">Subelement</label>
</li>
</ul>
</li>
<li>
<input id="element2" class="check" type="checkbox"/>
<label for="element2">Element de llista</label>
</li>
</ul>
|
|
- Element de llista
- Element de llista
- Element de llista
- Element de llista
|
<ul> <li class="odd">Element de llista</li> <li class="even">Element de llista</li> <li class="odd">Element de llista</li> <li class="even">Element de llista</li> </ul> |
.odd, .even { padding: 5px 10px; margin-bottom: 1px; }
.even { background-color: #EEEDED; } .odd { background-color: #F7F6F6; }
|