Hola a todos. Bienvenido de nuevo a otra revisión de código. Anteriormente, creé una barra de navegación que funcionaba verticalmente. Subió y bajó. Hoy, solo quiero mostrarles cómo puede usar el mismo código HTML pero crear una barra de navegación horizontal, en su lugar. Entonces, echemos un vistazo. Quiero ir a algo que se parezca un poco más a esto. Y, no solo he ido a una barra de navegación horizontal, quiero mostrarles un ejemplo de cómo mostrar qué página es la que estamos viendo actualmente. Por lo tanto, si nota, en la barra de navegación, el enlace de fotos se ve un poco diferente de los demás. Es muy común hacer esto para indicar a la gente que esta es la página que estás viendo en este momento. Así que echemos un vistazo al CSS y veamos cómo tomé HTML simple y lo convertí en algo donde tengo una barra de navegación muy bien diseñada. Muy bien, empezamos diciendo, ¿sabes qué? Queremos diseñar todos los enlaces que se encuentran en la barra de navegación. No quiero diseñar todos los enlaces, en su lugar, quiero indicar solo los enlaces que están dentro de la navegación. Y una vez que lo hacemos, fue bastante simple para mí seguir adelante y poner en que quiero una cierta altura, un cierto color de fondo, una cierta decoración de texto. Una de las cosas que agregué aquí es un radio de frontera. El radio del borde curva las cajas, así que si miras, todo está un poco curvado por aquí a lo largo del costado. No hay nada demasiado importante ahí. Lo siguiente que tengo, la nueva, es esta idea de tener una clase llamada actual. Lo que hace la clase actual, es básicamente una forma de etiquetar. Oye, ¿conoces todos los diferentes enlaces que hay en mi página? Quiero mostrarte cuál estoy viendo ahora mismo. Y todo lo que hice aquí fue que fui y lo puse para que tuviera un color de fondo diferente. Muy bien. Por lo tanto, fue bastante sencillo crear esta barra de navegación horizontal siempre y cuando tengas mucho cuidado al espaciar las cosas. Así que una vez más, sólo quiero mostrarles que cosas como el relleno y el margen son muy importantes y son muy aditivas. Por lo tanto, cuando usas porcentajes, en lugar de píxeles, va a evitar que sea que se vea bien en una pantalla grande y luego realmente malo en una pantalla pequeña. Lo último que puse aquí solo para divertirme y ayudar a mostrarle de nuevo algunas de las diferentes cosas que puede hacer con CSS, es que agregué un estado de desplazamiento para cualquiera de mis enlaces de navegación. Así que si miras, he entrado aquí y he dicho que cuando alguien pasa el cursor sobre la página, quiero cambiar el color del texto y quiero deshacerme de todo ese asunto del radio de la frontera. Así que echemos un vistazo. Ve aquí, voy a pasar el cursor sobre las recetas y el texto se convierte de blanco a negro, y va de círculo a cuadrado. Ahora de nuevo, mientras repaso todos estos ejemplos diferentes contigo, es muy importante que te des cuenta de que no soy un artista, y no soy muy artístico. Y espero que pueda tomar estos fragmentos de código y convertirlo en algo que se vea realmente genial y personalizado para la página que está tratando de crear. Así que adelante, diviértete un poco, y ahora trata de hacer una barra de navegación que vaya de diferentes maneras, arriba y abajo, de lado, o incluso combinaciones. Buena suerte.