Dar una buena acogida.
Ahora que tenemos la funcionalidad básica de nuestra aplicación Lista de tareas pendiente, es hora de que nos concentremos en hacer
que se vea así.
Así que definitivamente tenemos bastante camino por recorrer.
Y vamos a atacar esta pieza de una en una.
Trataré de hacer esto en el orden más lógico posible.
más grandes, como los colores de fondo y las fuentes, asegurándonos de que tengamos el margen y el relleno correctos
en este gran contenedor aquí y luego nos centraremos en algunos de los elementos más matizados.
Comenzaremos con algunas de las piezas
OK, comencemos aquí.
Lo primero que haremos será hacer una pantalla completa.
Comencemos presionando esto hacia abajo.
Este es nuestro contenedor div.
Añadiremos un margen a la parte superior para que tengamos más espacio aquí.
Entonces volveremos a nuestro C S y podemos cerrar o javascript por ahora.
Nuestro div tiene una idea de contenedor y luego vamos a seleccionar eso aquí que ya has hecho.
Y en lugar de un margen de cero OTTO Bueno, dale cien píxeles en la parte superior e inferior.
Y recuerda que necesitamos la x si tenemos cero, no necesitamos X pero si tenemos un número lo hacemos.
Echemos un vistazo ahora.
OK, entonces ahora están comenzando en el mismo lugar.
Ellos tienen el mismo margen allí.
Lo siguiente que haremos es agregar un color de fondo a este contenedor que este tiene.
Es un poco difícil de ver, pero cuando elimino algo, se ve en la parte posterior.
Es este color aquí mismo.
Entonces eso otra vez
Entonces continuaremos y agregaremos eso.
Entonces, en lugar de un contenedor, di el fondo y el color.
Lo leeré en F 7 7 después de las 7.
Así.
Y veamos cómo se ve.
DE ACUERDO.
Entonces tenemos el mismo color gris que tenemos aquí.
Es el mismo gris claro.
Lo siguiente que haremos es trabajar en la frontera.
Y esto en realidad no tiene un borde.
Lo que sí tiene es una sombra de caja muy leve.
Así que no hemos visto sombra de caja todavía.
Lo demostraré aquí y entraré en MT-NW y es solo una forma de agregar un efecto de sombra.
Así que si me desplazo hacia abajo puedes ver que aquí hay algunas sombras de caja diferentes y vamos a
tener una muy clara, pero si te das cuenta de esto, hay una sombra muy leve.
Entonces, la sintaxis y la sombra que vamos a usar nos desharán de nuestro borde, es sombra de cuadro de tablero 0 0 3
píxeles y luego un color y nuestro color va a ser básicamente negro, pero es R. GRAMO. Y luego vamos a hacerlo realmente realmente transparente.
Así que apenas se nota.
Y si me actualizo
No tenemos frontera ahora, pero hay una pequeña sombra alrededor de este elemento.
DE ACUERDO.
Eso es todo lo que haremos con el contenedor por el momento.
Ataquemos al H-1.
Así que esta partida aquí.
Así que eso es en nuestra edad, solo lo considero un H1.
No tiene una identificación ni nada y está bien.
Vayamos al archivo CSSA y comencemos agregando un color de fondo.
Así que seleccionaremos cada uno y el fondo
es un color que es 2 9 8 0 ser 9 y guardarán y actualizarán y ahora tenemos el tono azul correcto.
Así que también cambiaremos el color de la
fuente a blanco y rápidamente le mostraremos eso.
Todo bien.
Poco a poco avanzando más cerca aquí.
Lo siguiente que haremos es no darle margen y ahora nos desharemos de este espacio que teníamos aquí.
Como puede ver aquí, no hay margen.
Este es nuestro H-1.
Hay relleno aquí.
Entonces el texto no va directo al borde como lo hace aquí.
Pero no hay margen en el exterior de la caja azul.
Esta es nuestra entrada de texto y también ha aumentado el relleno, pero tampoco hay margen para eso.
Comenzaremos agregando algo de relleno alrededor de nuestra lista de tareas pendientes.
H-1 Así que aquí vamos a
agregar 10 píxeles en la parte superior e inferior y 20 píxeles a la izquierda y derecha y guardar.
Puedes ver que nos estamos acercando.
Necesitamos cambiar el tamaño de la fuente.
Necesita cambiar la fuente
También vamos a mayúsculas de todo eso y podemos hacerlo a estas alturas.
Debes saber que uno de mis favoritos es el texto transformado en mayúsculas.
Solo creo que es genial.
Ahí vamos, obtenemos todo en mayúsculas, el
tamaño de la fuente debe ser de 24 píxeles, por lo que el tamaño de la fuente es 24 xy guardamos bien. Lo último que haremos es asegurarnos de que sea un peso de fuente normal.
Entonces, un H1 predeterminado es en negrita y no queremos eso.
Así que haremos Funt way normal o también podríamos escribir font weight 400.
Aquí vamos.
deshacerse de estos puntos.
Ahora solo se trata de cambiar la fuente, lo que volverá a ser lo siguiente que quiere abordar es
Puede ver si no tenemos ningún punto aquí.
Esos puntos se consideran el estilo de navegador predeterminado.
Así que vamos a anular eso.
Vamos a seleccionar la UL en la que están dentro y decir estilo de lista ninguno.
Y si volvemos y actualizamos, ahora no tenemos ningún punto.
en cero y se actualizará aquí y no solo eliminar el espacio en los lados
del pozo. Tenemos espacio aquí que necesita trabajar, pero esa es la mentira, no la UL en sí misma.
Otra cosa que voy a hacer es honrarlo y establecer el margen en cero y el relleno
Así que volveremos a eso.
Ahora agreguemos la fuente correcta y el nombre de esta fuente es rubato y es parte de las fuentes de Google.
Así que tengo eso abierto aquí y lo buscaré rubato.
Y aquí vamos.
Agregar a la colección y luego usar.
Y vamos a querer la manera normal.
Añadiremos en negrita y también medio.
Ahora sigamos y copiemos este enlace a nuestra HMO y podemos cerrar esta ventana.
Regrese a donde cada equipo aquí y arriba arriba pegue
eso y guarde, luego iremos a ver para evaluar y agregaremos algunos estilos al cuerpo.
Todo usa esta fuente, así que agregaremos la familia de fuentes de manera robótica.
Así.
Y si volvemos ahora y refrescamos nuestro H-1 está más o menos allí.
Aparte de este botón que no hemos tocado en todas las fuentes,
el color es el mismo, el espaciado es bueno.
Y nuestros aliados están llegando allí.
Ellos tienen la fuente correcta.
Necesitamos trabajar en algunos de los problemas de espaciado y relleno.
Lo siguiente que abordaremos son los colores de fondo de las mentiras.
Así que cada otra mentira.
Va desde un blanco de color blanco puro a este color gris que tenemos como fondo del the.
Entonces podemos usar el SS para agregar estilos a cada otro aliado.
Así que hagámoslo ahora.
Lo primero que haremos es
seleccionar todos los aliados y darles un fondo de blanco para que podamos hacerlo con F F F o blanco o R-GA 255 255 a 55 y luego haremos las demás cosas.
Y la sintaxis para eso es una mentira y un niño para terminar.
Y eso también y bien definido un patrón de todos los demás.
Y si hiciéramos tres y dijera cada tercio, solo nos queremos mutuamente.
Y haremos que el color de fondo sea
el mismo f7 f7 f7 que utilizamos para el fondo del contenedor y la actualización.
Ahora es difícil de ver porque son un poco pequeños, pero cualquier otra mentira ahora es de este color gris.
Así que agrega algunos más y puedes ver que se alternan perfectos.
Ahora abordemos el problema de la altura de las mentiras y también el relleno.
Lo primero que debe hacer es darles una
altura de 40 píxeles para que todos los aliados tengan una altura de 40 x y volveremos a actualizar.
OK para que ocupen la cantidad correcta de espacio.
Ahora si los comparamos, la fuente tiene algunos problemas.
Y también tenemos que agregar algo de relleno.
A continuación, cambiaremos la propiedad de altura de línea en las mentiras para que nuestro texto se centre verticalmente.
En este momento, la línea es básicamente así de alta.
Vamos a hacer que ocupe los 40 píxeles
completos que muestran la altura de la línea 40 x y eso no cambiará el tamaño de la fuente, solo cambia el tamaño de la línea.
Ahora es 40 píxeles.
Entonces la línea ocupa todo el área.
La siguiente cosa menor es el color que tenemos negro puro y el color que utilicé no es exactamente negro.
Es un poco más ligero.
Así que vamos a configurar el color y es seis seis seis actualización y luego vamos a abordar la entrada.
Entonces tenemos algunas cosas que debes hacer.
El primero de ellos es asegurarse de que ocupa la cantidad correcta de espacio.
Entonces, esta entrada es mucho más grande y no es solo un margen o margen, el tamaño de la fuente es mayor.
También tenemos un nuevo color de fondo.
Y hay un borde cuando hacemos clic.
Así que trabajemos en todos ellos y comenzaremos añadiendo un tamaño de letra más grande.
Así que seleccionaremos el tamaño de fuente de entrada
y estableceremos el tamaño de fuente en 18 píxeles.
Y mientras estemos aquí, haremos el color de
fondo y el color de fondo, y es el mismo f 7 7 1/2 7.
Así.
Y refresquemos.
DE ACUERDO.
Nos estamos acercando.
Lo siguiente que haremos es agregar un ancho y el ancho que le daremos es del 100 por ciento.
Así que en este momento solo va a ser parte del contenedor.
Si lo actualizamos, ahora llega hasta el final.
Pero tenemos algunos pequeños problemas.
Lo primero de lo que queremos ocuparnos es el relleno.
Así que vamos a agregar relleno de 13 píxeles en la parte superior de 13 píxeles en el lado de la derecha.
13 píxeles en la parte inferior y 20 píxeles en la izquierda.
Entonces puedes ver en este.
Tenemos arriba y abajo son 13.
Y a la izquierda hay 20 píxeles.
Entonces, si estuviera fresco, ahora tenemos una entrada más grande que ocupa la cantidad correcta de espacio.
Tenemos un problema, que es que la entrada ahora es demasiado larga.
Cuando dijimos que debería ser el 100 por ciento de eso, en
realidad solo era el contenido y no incluía el relleno y no incluía el margen, lo que significa que nuestra
información va más allá del final de la div y en lugar de ensuciar con el relleno.
Me refiero a mostrar otra forma de cambiarlo, que es una propiedad llamada Box sizing.
Entonces, con el tamaño del bloque tiene algunas opciones diferentes, pero
básicamente controla cómo se dimensiona la caja del modelo de caja.
Y vamos a cambiarlo a la casilla Dasch de la frontera.
Y lo que haga, lo leeré y dice
que las propiedades de ancho y alto incluyen el relleno y el borde, pero no el margen.
Entonces, si lo cambiamos a
la casilla de borde, lo cual haré ahora, vamos aquí solo agregue el cuadro de orden de tamaño de la caja y guárdelo antes de continuar.
Señalaré que esta es una de esas propiedades en las que queremos tener los prefijos.
Entonces, el Web Kit y Mozy son Moz y el desastre de Microsoft.
No voy a hacer eso ahora.
Estará en el código de la solución.
Pero solo lleva mucho tiempo escribir.
Así que funcionará exactamente como está en Chrome, al menos lo actualizo ahora.
Nuestra caja incluye el relleno en el borde, pero no incluye el margen.
Así que terminamos con un ajuste perfecto.
A continuación, le daré un color a la fuente cuando escriba allí.
Entonces todo lo que tenemos que hacer
color es ese color.
Voy a tomar el mismo color del H-1 y bajar a nuestra entrada y solo decir el
Y si actualizamos ahora y comenzamos a escribir Ahí vamos.
Ahora centrémonos en el efecto.
Cuando hacemos clic en lo que se llama enfocar en la entrada se puede ver que aquí obtenemos un borde alrededor.
Entonces tenemos que trabajar en eso.
En este momento tenemos el efecto de enfoque predeterminado.
Entonces, hay un selector para el foco de dos puntos de entrada, al igual que el pseudo selector hover.
Estas celdas solo se ejecutarán cuando nos hayamos enfocado en una entrada.
Así que voy a hacer que el fondo sea blanco cuando nos centremos en él.
También voy a darle un borde de tres píxeles
sólido. El color azul con el que hemos estado trabajando y le daremos un esquema
de no un contorno se refiere a este aspecto molesto que obtenemos del navegador en sí.
Ahora, si nos enfocamos en
la entrada obtenemos este nuevo borde azul y también cambiamos el color de fondo para que quede gris ahora que es blanco.
Así que eso es todo lo que tenemos que hacer para
la entrada, aunque deberíamos ir y agregar el texto de marcador de posición que tenemos aquí.
Así que iré al índice HTL y junto a la entrada o en la entrada agregaré el atributo marcador de posición.
Y esto puede ser lo que quieras.
Lo haré coincidir.
Por lo tanto, es agregar algo nuevo que hacer y actualizar.
Aquí vamos.