Post on 23-Jul-2020
Disciplina:
http://edmilsoncampos.net
edmilson.campos@ifrn.edu.br
Edmilson Campos, Prof. MsC.
Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.
Autoria Web
AULA 09
▪Full Property Table
▪
»
»
»
»
»
»
Edmilson Campos (edmilson.campos@ifrn.edu.br)2
▪
»
»−
Edmilson Campos (edmilson.campos@ifrn.edu.br)3
▪
»
»
−
−
»−
Edmilson Campos (edmilson.campos@ifrn.edu.br)4
▪»
»
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)5
▪»
»
−
▪
»
»−
Edmilson Campos (edmilson.campos@ifrn.edu.br)6
▪
▪p {
font-family: Verdana, Helvetica, sans-serif;font-size: 1.5em;font-style: italic;font-weight: bold;text-decoration: overline;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)7
▪»
»
−
»
−−
−−
−−
−−
h1 {
text-transform: capitalize;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)8
▪»
»
−
▪»
▪»
▪»
▪»
Edmilson Campos (edmilson.campos@ifrn.edu.br)9
▪
▪p {
text-align: justify;text-indent: 30px;line-height: 20px;letter-spacing: -1px;word-spacing: 5px;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)10
▪»
»
▪»
»
▪»
»
−
»
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)11
▪»
»
▪»
»
−
▪
»
»−
Edmilson Campos (edmilson.campos@ifrn.edu.br)12
▪
▪
body {background-image: url(“planoDeFundo.jpg”);background-repeat: no-repeat;background-position: center;
}
h1 {color: yellow;background-color: rgb(50%,50%,50%);
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)13
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)14
▪
»
▪
»
»−
−
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)15
▪
▪p {
border-top: 3px dotted red;border-right: 1px dotted red;
}
p {border: 4px double green;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)16
▪»
▪»
▪
p {margin-top: 50px;margin-left: 100px;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)17
▪
»
▪
»
▪p {
padding-left: 50px;padding-bottom: 100px;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)18
▪»
»
−
−
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)19
▪»
▪»
»
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)20
▪• Cadastro
• Pacientes
• Médicos
• Convênios
• Consultas
• Atendimento por período
• Atendimento por convênio
• Atendimento por médico
• Relatórios
• Atraso de repasses
• Retorno de pacientes
• Produção por médico
• Sair
Edmilson Campos (edmilson.campos@ifrn.edu.br)22
<ul>
<li><a href="#">Cadastro</a>
<ul>
<li><a href="#">Pacientes</a></li>
<li><a href="#">Médicos</a></li>
<li><a href="#">Convênios</a></li>
</ul>
</li>
<li><a href="#">Consultas</a>
<ul>
<li><a href="#">Atendimento por período</a></li>
<li><a href="#">Atendimento por convênio</a></li>
<li><a href="#">Atendimento por médico</a></li>
</ul>
</li>
<li><a href="#">Relatórios</a>
<ul>
<li><a href="#">Atraso de repasses</a></li>
<li><a href="#">Retorno de pacientes</a></li>
<li><a href="#">Produção por médico</a></li>
</ul>
</li>
<li><a href="#">Sair</a></li>
</ul>
Depois de definida a estrutura, criaremos uma
lista não-ordenada e os submenus serão
representados por uma outra lista não-
ordenada dentro da primeira
Edmilson Campos (edmilson.campos@ifrn.edu.br)23
▪
▪
ul { margin: 0; padding: 0; list-style: none; width: 175px; font-family: Arial;font-size: 10pt;border-bottom: 1px solid #ccc;
}
ul li {position: relative;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)24
▪
▪
li ul { position: absolute; left: 174px; top: 0; display: none;
}
ul li a {display: block;text-decoration: none;color: white;background: #50AF52;padding: 5px;border: 1px solid #ccc;border-bottom: 0;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)25
▪
▪
li:hover ul, li.over ul { display: block;
}
a:hover {background-color: navy;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)26
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)27
Edmilson Campos (edmilson.campos@ifrn.edu.br)28
1)
2)
3)
Edmilson Campos (edmilson.campos@ifrn.edu.br)29
▪<ul>
...
<li><a href="#">Consultas</a>
<ul>
<li><a href="#">Atendimento por período</a></li>
<li><a href="#">Atendimento por convênio</a>
<ul>
<li><a href="#">Amil</a></li>
<li><a href="#">Unimed</a></li>
</ul>
</li>
<li><a href="#">Atendimento por médico</a></li>
</ul>
</li>
...
</ul>
Edmilson Campos (edmilson.campos@ifrn.edu.br)30
▪
▪
▪
li:hover ul,
li li:hover ul {
display: block;
}
li li ul a:hover {background-color: black;
}
li:hover ul ul {display: none;
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)31
▪
»−
−
−
−
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)32
▪http://www.maujor.com/tutorial/ddownmenu/horizontal-pt3.html
▪http://www.maujor.com/tutorial/ddownmenu-a.php
▪
▪
▪
▪
▪
▪
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)33