 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:46 Titlul subiectului: Css 6 liste si tabele |
|
|
| Citat: |
Liste
Diferite tipuri de liste neordonate(unordered)
<html>
<head>
<style>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Liste ordonate
<html>
<head>
<style>
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Setarea marker-ului de lista folosind o imagine
<html>
<head>
<style>
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Proprietati:
list-style-type
list-style-image
Tabele
Setarea layoutului (modul de afisare)
<html>
<head>
<style>
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>
<table>
<tr>
<td> 1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>
<br>
<table>
<tr>
<td> 1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Setarea distantei dintre celule
<html>
<head>
<style>
table.one
{
border-spacing: 10px
}
table.two
{
border-spacing: 10px 50px
}
</style>
</head>
<body>
<table>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br>
<table>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
</body>
</html>
Afisarea celulelor fara continut
Uneori am constat ca daca nu introducem nimic in celule acestea nu au border; cu empty-cells: show, putem vedea si bordura pentru acele celule.
<html>
<head>
<style>
table
{
empty-cells: show
}
</style>
</head>
<body>
<table>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
Proprietatile sunt:
table-layout border-spacing empty-cells |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
