1. Header y menu compartido por todos los enlaces
Hay una parte de html y css común a todos los enlaces de las pestañas incluido el de inicio el cual varía un poco, se trata del header y el menu. A continuacion voy a mostrar la pantalla de inicio y de la siguiente pestaña que es la de servicios para que se pueda apreciar:
Por tanto el codigo html que coloco a continuación es el correspondiente al header y al menú que están definidos mediante div's en todos los documentos html de la página ya que son comunes. Tambien muestro el css que da forma a la vista que se puede apreciar arriba:
Para terminar de realizar la página correspondiente a la pestaña inicio cree una etiqueta div llamada centralinicio la cual incluye la foto del dibujo del taxi y la frase de al lado y por ultimo un párrafo de bienvenida:
En este punto comentar la utilización de float en el css para colocar el coche y la frase en paralelo.
Y a continuación muestro el código html y css del párrafo de bienvenida:
Y la ĺa última parte que van a tener en común todos los enlaces es el pie definido con una etiqueta div que lleva dicho nombre:
2. Estructura seguida por el resto de pestañas del menu
A continuacíon voy a mostrar la estructura común que tienen las pestañas de los enlaces servicios, contacta, información y tarifas:
- La etiqueta h3 hace referencia en todos los enlaces al nombre o utilidad de esa pestaña en la pagina y va colocada debajo del menú.
- A continuación y subrallado en color verde se diferencian dos etiquetas div, una llamada colizda y otra coldcha, las cuales pongo una en parelelo de la otra mediante la utilización de float.
- Y a su vez cada uno de esots dos div contiene en su interior un encabezado h4 que se coloca arriba y justo debajo y en paralelo también me diante la utilización de float coloco una imagen y un texto explicativo.
Esta estructura solo se ve modificada por una cosa en las pestañas del menú contacta y tarifas, las cuales llevan una pequeña lista en parte de arriba llamada con la id=opciones para poderla referenciar en el documento css:
Y por último en esta entrada, comentar la realización de 4 tablas que indican los precios del taxi y sus horarios. Todas ellas se ven dentro de la pestaña tarifas y van colocadas en la página a izda y dcha utilizando float y la creación de los div colizda y coldcha antes comentada:



















No hay comentarios:
Publicar un comentario