TEMPLATE PRONTO
Página 1 de 1
TEMPLATE PRONTO
Tai, fiz um template simples pra gente usar na proxima aula.
O css utilizado:
um print da tela:
" />
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<link rel="stylesheet" href="resources/css/default.css" type="text/css" />
</h:head>
<h:body>
<h:form>
<div id="cabecalho">
TEMPLATE
</div>
<div class="panelLeft">
<fieldset>
<legend>Cadastro Cidades</legend>
<h:panelGrid columns="2" styleClass="panelGrid">
<h:outputLabel value="Nome: " styleClass="formLabel" for="nome" />
<h:inputText id="nome" size="30" styleClass="formInputText" />
<h:outputLabel value="Idade: " styleClass="formLabel" for="idade" />
<h:inputText id="idade" size="20" styleClass="formInputText" />
<h:commandButton value="enviar" styleClass="button" />
</h:panelGrid>
</fieldset>
</div>
<div class="panelMiddle">
<fieldset>
<legend>Pessoas Cadastradas</legend>
<h:panelGrid columns="3" styleClass="panelGrid" >
<h:outputLabel value="Cidade: " styleClass="formLabel" for="nome" />
<h:inputText id="pesquisaNome" size="30" styleClass="formInputText" />
<h:commandButton value="pesquisa" styleClass="button" />
</h:panelGrid>
</fieldset>
</div>
</h:form>
</h:body>
</html>
O css utilizado:
- Código:
body {
width: 940px;
margin-left: auto;
margin-right: auto;
}
#cabecalho {
border-bottom: 15px solid #0099FF;
background: #000066;
font-weight: bold;
font-family: ‘Lucida Console’, Monaco, monospace;
color: #FFF;
height: 50px;
padding: 5px;
border-radius: 2px;
font-size: 50px;
}
.formLabel {
font-weight: bold;
color: #003366;
font-family: Courier, monospace;
font-size: 12px;
}
.formInputText {
box-shadow: 1px 1px 1px 1px #eee;
color: #003366;
}
.saveButton {
background-image: url(./resources/imagens/icone_salvar.jpg.);
}
.button {
height: 20px;
width: 80px;
border: 0;
box-shadow: 1px 1px 1px 1px #eee;
background-color: #0099FF;
color: white;
font-family: Courier, monospace;
font-size: 12px;
font-weight: bold;
border-radius: 1px;
}
.panelGrid {
padding: 7px;
border-radius: 5px solid #0099FF;
}
fieldset {
border-radius: 10px;
}
legend {
background-color: #FFF;
border-bottom: 2px solid #0099FF;
border-top: 2px solid #0099FF;
font-weight: bold;
color: #003366;
font-family: Courier, monospace;
}
.panelLeft {
width: 300px;
margin-top: 20px;
}
.panelMiddle {
width: 600px;
position: absolute;
left: 550px;
top: 103px;
''
}
.dataTable {
position: relative;
margin-top: 20px;
border: 1px solid #0A1E29;
}
.cabecalho {
text-align: center;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: Snow;
background: #172D3A;
}
.linha1 {
background-color: #B9E9FB;
}
.linha2 {
background-color: #63B6D9;
}
.colunaId {
width: 5px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
.coluna2 {
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
}
.coluna3 {
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
}
.colunaEditarExcluir {
text-align: center;
width: 5px;
font-family: Arial, sans-serif;
font-size: 12px;
}
um print da tela:
" />
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|