Como escrever o css para o número guesser em seu jogo html5
Video: aula 2657 dhtml CSS vinculado arquivo externo
Conteúdo
O HTML fornece a base para o adivinhador número em seu jogo HTML5, mas precisa de algum código CSS para fazê-lo ter o olhar que você está buscando. O CSS não é apenas por causa da beleza, mas também adiciona algumas funcionalidades. Especificamente, um dos botões irá aparecer e desaparecer no comando. A visibilidade do botão é controlado com um estilo CSS, que é alterada através de código javascript.
Video: aula3 css link externo
Aqui é como construir o CSS para o jogo:
Centralize o título.
A maioria do conteúdo desta página será centrado, de modo a centrar h1 elemento. Colocou o alinhamento de texto para centro.
Formatar o conjunto de campos.
A página consiste em um formulário com um conjunto de campos. Alterar a largura do conjunto de campos para um tamanho fixo e definir as margens para auto. Isto irá centralizar o conjunto de campos na página.
formatar o saída div.
Há uma especial div chamado saída que conterá as instruções para o usuário. A única formatação necessária é para centralizar o texto com text-align: center. (Lembre-se, você centralizar o conteúdo de um elemento com alinhamento de texto. Centralize o próprio elemento com margin: auto.)
Flutuar as etiquetas e elementos de entrada.
Este será um formulário padrão com o rótulo sobre os elementos da esquerda e da entrada à direita. Atribuir os atributos necessários para flutuam e elementos de entrada.
Centralize os botões.
Os botões ficará melhor se eles estão centradas na página. Converter botões para bloquear-nível e definir as margens para auto para este efeito.
Video: Criando Uma Folha de Estilos CSS
O código CSS completo está disponível aqui:
h1 {text-align: center,} fieldset {width: 600px; margin-left: auto-margin-right: auto -} # saída {text-align: center,} label {float: left; width: 250px; claro: esquerda; text-align: right; padding-right: 1em-} entrada {float: left;} botão {display: block-clear: both-margin-left: auto-margin-right: auto-}Note que o botão Play Again é visível. Embora o código CSS é usado para ocultar e exibir o botão, esse código será gerado através de javascript.