![Page 1: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/1.jpg)
Disciplina:
http://edmilsoncampos.net
Edmilson Campos, Prof. MsC.
Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.
Autoria Web
AULA 09
![Page 7: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/7.jpg)
▪
▪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
![Page 10: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/10.jpg)
▪
▪p {
text-align: justify;text-indent: 30px;line-height: 20px;letter-spacing: -1px;word-spacing: 5px;
}
Edmilson Campos ([email protected])10
![Page 13: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/13.jpg)
▪
▪
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
![Page 16: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/16.jpg)
▪
▪p {
border-top: 3px dotted red;border-right: 1px dotted red;
}
p {border: 4px double green;
}
Edmilson Campos ([email protected])16
![Page 22: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/22.jpg)
▪• 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
![Page 23: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/23.jpg)
<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
![Page 24: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/24.jpg)
▪
▪
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
![Page 25: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/25.jpg)
▪
▪
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
![Page 26: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/26.jpg)
▪
▪
li:hover ul, li.over ul { display: block;
}
a:hover {background-color: navy;
}
Edmilson Campos ([email protected])26
![Page 29: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/29.jpg)
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>
![Page 30: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/30.jpg)
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;
}
![Page 32: Texto; Cor e fundo; Contorno; Margem; Espaçamento; Listas.€¦ · p {text-align: justify; text-indent: 30px; line-height: 20px; letter-spacing: -1px; word-spacing: 5px;} 10 Edmilson](https://reader034.vdocuments.co/reader034/viewer/2022042921/5f69d7e759d27d6d2230b57b/html5/thumbnails/32.jpg)
Edmilson Campos ([email protected])32
▪http://www.maujor.com/tutorial/ddownmenu/horizontal-pt3.html
▪http://www.maujor.com/tutorial/ddownmenu-a.php