Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify;...
33
Disciplina: http://edmilsoncampos.net [email protected] Edmilson Campos, Prof. MsC. Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas. Autoria Web AULA 09
Transcript of Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify;...
Disciplina:
http://edmilsoncampos.net
Edmilson Campos, Prof. MsC.
Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.
Autoria Web
AULA 09
▪
▪p {
font-family: Verdana, Helvetica, sans-serif;font-size: 1.5em;font-style: italic;font-weight: bold;text-decoration: overline;
}
Edmilson Campos ([email protected])7
▪
▪p {
text-align: justify;text-indent: 30px;line-height: 20px;letter-spacing: -1px;word-spacing: 5px;
}
Edmilson Campos ([email protected])10
▪
▪
body {background-image: url(“planoDeFundo.jpg”);background-repeat: no-repeat;background-position: center;
}
h1 {color: yellow;background-color: rgb(50%,50%,50%);
}
Edmilson Campos ([email protected])13
▪
▪p {
border-top: 3px dotted red;border-right: 1px dotted red;
}
p {border: 4px double green;
}
Edmilson Campos ([email protected])16
▪• 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 ([email protected])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 ([email protected])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 ([email protected])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 ([email protected])25
▪
▪
li:hover ul, li.over ul { display: block;
}
a:hover {background-color: navy;
}
Edmilson Campos ([email protected])26
Edmilson Campos ([email protected])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 ([email protected])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 ([email protected])32
▪http://www.maujor.com/tutorial/ddownmenu/horizontal-pt3.html
▪http://www.maujor.com/tutorial/ddownmenu-a.php
