Carregar apresentação
A apresentação está carregando. Por favor, espere
1
TECNOLOGIA PARA INTERNET 1 – Aula 8
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS RONNISON REGES VIDAL Ceará, 13 de Maio de 1989
2
CONTEÚDO Posicionamento
3
OBJETIVOS Desenvolver páginas HTML5 com posicionamento de elementos pré-determinados;
4
POSICIONAMENTO As propriedades CSS position e float determinam como um box será posicionado no modelo visual de formatação de um documento. As recomendações do W3C para as CSS 2.1 prevêem a existência de três esquemas de posicionamento: normal, float e absoluto.
5
ESQUEMA NORMAL Este esquema segue o fluxo normal onde os elementos são exibidos um após o outro de cima para baixo. Exemplo de utilização: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type="text/css"> EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } </STYLE> </HEAD> <BODY> <P>Several <EM>emphasized words</EM> appear here.</P> </BODY> </HTML>
6
ESQUEMA NORMAL
7
Exemplo de utilização: Exemplo 1
ESQUEMA FLUTUANTE Definido pela regra float de posicionamento juntamente com as regras left, right, none e inherit (herdado). O box é deslocado para uma nova posição e seu espaço original é preenchido por outro elemento, na medida do possível. Exemplo de utilização: Exemplo 1 p { width: 10em; border: solid aqua; } span { float: left; width: 5em; height: 5em; border: solid blue; } ... <p> <span> </span> Supercalifragilisticexpialidocious </p>
8
ESQUEMA FLUTUANTE Exemplo 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.png alt="This image will illustrate floats"> Some sample text that has no other... </BODY> </HTML>
9
ESQUEMA ABSOLUTO Definido pela regra position com valores absolute e fixed. O box é removido do fluxo completamente sem impactar nos elementos posteriores.
10
ESQUEMA ABSOLUTO Exemplo de utilização:
height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; right: 0; left: 10em; #footer { width: 100%; height: 100px; top: auto; bottom: 0; Exemplo de utilização: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>A frame document with CSS</TITLE> <STYLE type="text/css" media="screen"> BODY { height: 8.5in } /* Required for percentage heights below */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { width: 10em; </STYLE> </HEAD> <BODY> <DIV id="header"> ... </DIV> <DIV id="sidebar"> ... </DIV> <DIV id="main"> ... </DIV> <DIV id="footer"> ... </DIV> </BODY> </HTML>
11
Exemplo de utilização:
TRANSIÇÕES Normalmente, quando o valor de um CSS é alterado, o resultado da renderização é instantâneo, esta regra permite atualizar uma propriedade suavemente do estado antigo para o novo estado. Exemplo de utilização: Esta regra define a mudança para o valor “opacity” em um período de 2 segundos. div { transition-property: opacity; transition-duration: 2s; }
12
transition: background-color linear 1s; background: blue; } li:hover {
TRANSIÇÕES Este regra define que a cor do elemento <li> por default é azul. Quando o mouse for posicionado sobre o elemento, ele mudará sua cor para verde em um período de tempo de 2 segundos. li { transition: background-color linear 1s; background: blue; } li:hover { background-color: green; transition-duration: 2s; /* applies to the transition *to* the :hover state */
13
Desenvolva uma página de formulário de cadastro, especificando:
ÉXERCÍCIOS Desenvolva uma página de formulário de cadastro, especificando: Primeiro nome Último nome país
14
ÉXERCÍCIOS
15
ÉXERCÍCIOS <!DOCTYPE html> <html> <style>
input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { background-color: #4CAF50; color: white; padding: 14px 20px; border: none; cursor: pointer; input[type=submit]:hover { background-color: #45a049; div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> <body> <h3>Using CSS to style a HTML Form</h3> <div> <form action="action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname"> <label for="country">State</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form> </div> </body> </html>
Apresentações semelhantes
