...
Body
| Bloco de código |
|---|
|
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
min-width:300px;
} |
deck
Headings
effectDuration| Bloco de código |
|---|
|
h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
} |
List
| Bloco de código |
|---|
|
ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
| 0.5 |
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
| Card |
|---|
| body { font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: #D1D3D4; /* Background color */ color: #58595B; /* Foreground color used for text */ font-family: Helvetica; font-size: 14px; margin: 0; /* Amount of negative space around the outside of the body */ padding: 0; /* Amount of negative space around the inside of the body */
min-width:300px;
} |
| Card |
|---|
| h1 { margin: 0; padding: 0; background-color: #D1D3D4; color: #FFF; display: block; font-size: 18px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none; } |
| Card |
|---|
| |
ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
position:relative;
}
card
label
id| Bloco de código |
|---|
4 | label |
| label | .mylabel {
width: 28%;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display:inline-block;
position:relative;
float:left;
line-height:32px;
}
card
input text
id| Bloco de código |
|---|
5 | label | text |
input[type=text] {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} card |
textArea
id| Bloco de código |
|---|
6 | label | textArea |
textarea {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} card |
Select
id| Bloco de código |
|---|
7 | label |
select select {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
Você deve tratar no CSS todos os componentes que serão utilizados no seu HTML Mobile para que todos tenham o mesmo padrão, seu HTML Mobile com CSS deve ter essa estrutura:
| Deck of Cardscode |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
|
<html >
<head>
<title>Formulário de Compras </title>
<style <html > <head> <title>Formulário de Compras </title> <style type="text/css"> Aqui você deve incluir a estrutura do CSS de cada componente </style> </head> <body> </ body >
//Aqui você deve incluir a estrutura do CSS de cada componente
</style>
</head>
<body>
</ body >
</html> |
| Nota |
|---|
|
Essa é a estrutura básica, dentro de cada tag deve ter elementos e lógicas correspondentes a elas. |
...