Cómo escribir el css para el adivinador número en su juego html5

Video: 22.Como Hice un Juego de Memorizacion [Curso javascript]

El HTML proporciona la base para el adivinador número en su juego HTML5, pero necesita algo de código CSS para hacer que tenga el aspecto que usted está apuntando. El CSS no es sólo por el bien de la belleza, sino que también añade algunas funciones. En concreto, uno de los botones aparecerá y desaparecerá en el comando. La visibilidad del botón se controla con un estilo CSS, que se cambia a través de código javascript.

Video: Juegos javascript - 02 Estructura HTML + CSS

Aquí es cómo construir el CSS para el juego:

1. Centrar el título.

   La mayor parte del contenido de esta página se centrarán, por lo que centre el h1 elemento. Selecciona el texto alineado a centrar.

2. Formatear el conjunto de campos.

   La página consta de un formulario con un conjunto de campos. Cambiar el ancho del conjunto de campos a un tamaño fijo y ajustar los márgenes a auto. Esto centrará grupo de campos en la página.

3. formatear la salida div.

   Hay una especial div llamado salida que contendrá las instrucciones para el usuario. El único formato necesario es centrar el texto con text-align: center. (Recuerde que centrar el contenido de un elemento con texto alineado. Centrar el propio elemento con margen: auto.)

4. Flotador las etiquetas y los elementos de entrada.

   Esta será una forma estándar con la etiqueta en los elementos izquierdo y de entrada a la derecha. Asignar los atributos necesarios para flotar y elementos de entrada.

5. Centrar los botones.

   Los botones se verá mejor si están centrados en la página. Convertir botones para el nivel de bloques y establecer los márgenes de auto para este efecto.

Video: Curso javascript - Crear juego adivina el numero (practica)

El código CSS completo está disponible aquí:

h1 {text-align: centro-} fieldset {width: 600px; margin-left: auto-margin-right: auto -} # de salida {text-align: centro-} etiqueta {float: left; anchura: 250 píxeles; claro: izquierda; text-align: right; padding-right: 1em-} entrada {float: left;} botón {display: block-clear: both-margin-left: auto-margin-right: auto}

Tenga en cuenta que el botón de reproducción es visible. Aunque el código CSS se utiliza para ocultar y mostrar el botón, ese código será generado a través de javascript.