Web Design: mudanças entre as edições
De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 5: | Linha 5: | ||
===CSS=== | ===CSS=== | ||
* [[hover|hover css]] | * [[hover|hover css]] | ||
====Tabelas com DIV==== | |||
Construir uma tabela com a tag div ao invés de usar a tag table | |||
<pre><!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<style> | |||
#table{ | |||
display: table; | |||
width: 50%; | |||
} | |||
.tr{ | |||
display: table-row; | |||
} | |||
.direita{ | |||
float: right; | |||
width:40%; /* esse número pode ser em % ou em px */ | |||
display: table-cell; | |||
} | |||
.esquerda{ | |||
float: left; | |||
width:40%; | |||
display: table-row; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="table"> | |||
<p>div que representa table</p> | |||
<div class="tr"> | |||
<p>div que representa tr</p> | |||
<div class="esquerda"> | |||
<p>div que representa uma coluna(td)</p> | |||
</div> | |||
<div class="direita"> | |||
<p>div que representa outra coluna(td)</p> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
</pre> | |||
==2º Bimestre== | ==2º Bimestre== | ||
Edição das 19h18min de 17 de setembro de 2013
Aulas
1º Bimestre
CSS
Tabelas com DIV
Construir uma tabela com a tag div ao invés de usar a tag table
<!DOCTYPE HTML>
<html>
<head>
<style>
#table{
display: table;
width: 50%;
}
.tr{
display: table-row;
}
.direita{
float: right;
width:40%; /* esse número pode ser em % ou em px */
display: table-cell;
}
.esquerda{
float: left;
width:40%;
display: table-row;
}
</style>
</head>
<body>
<div id="table">
<p>div que representa table</p>
<div class="tr">
<p>div que representa tr</p>
<div class="esquerda">
<p>div que representa uma coluna(td)</p>
</div>
<div class="direita">
<p>div que representa outra coluna(td)</p>
</div>
</div>
</div>
</body>
</html>
