Diferentes líneas arrastradas para html. ¿Quién corre y dónde? Servicios de postales confeccionados.
¿Por qué se tomó la decisión de actualizar y rehacer la línea existente? El caso es que anteriormente, para crear una línea rastrera, se utilizaba una etiqueta HTML, que ahora se considera obsoleta y no se recomienda su uso porque ya no existe en HTML5.
Los navegadores todavía lo admiten, pero ¿por cuánto tiempo? marquesina¿Será procesado? Por eso, para no correr riesgos, debes abandonarlo, y si aún necesitas una línea rastrera, entonces puedes hacerlo con usando CSS. El resultado será algo como esto:
Como puede ver, el resultado es el mismo que cuando se utiliza la antigua etiqueta de marquesina. Crear una línea rastrera es muy sencillo. Debes encerrar el elemento que debe moverse por la pantalla en un bloque al que le asignaremos una clase. marquesina. También encerramos todo lo que hay dentro del bloque de marquesina en una etiqueta. .
Marquesina( ancho:100%; espacio en blanco:nowrap; desbordamiento:oculto; ) .marquee span ( color:#212121; tamaño de fuente:25px; display:inline-block; padding-left:100%; -webkit-animation : marquesina 10s infinita lineal; animación: marquesina 10s infinita lineal; ) @-webkit-keyframes marquesina ( 0%(-webkit-transform: traducir(0, 0);) 100%(-webkit-transform: traducir(-100% , 0);) ) @keyframes marquee( 0%(transformar: traducir(0, 0);) 100%(transformar: traducir(-100%, 0)) )
Aquí hay varios parámetros principales, puedes cambiar el resto y agregar los tuyos propios. Primero los estilos para el bloque principal.
- ancho: 100%;- Establecer el ancho de nuestro bloque de marquesina principal.
- espacio en blanco:nowrap;- Prohibimos la transferencia de palabras a otra línea.
- desbordamiento: oculto;- Cortamos con una línea continua todo lo que se extiende más allá de nuestra manzana, para que no haya incidentes.
- pantalla: bloque en línea;- hacer de nuestro tramo un elemento de bloque en línea
- relleno-izquierda: 100%;- haga una sangría a la izquierda a lo largo de todo el ancho del bloque principal.
- -webkit-animación y animación- aplicar animación al bloque. El tiempo de ejecución de la animación es de 10 segundos. Puedes cambiar el valor por el tuyo propio.
- Marco @-webkit-keyframes y marco @keyframes- la animación en sí.
Se trata de los principales parámetros. Como dije anteriormente, puedes agregar cualquier otro estilo que desees.
Aún así, muchos consideran que el ticker es un elemento obsoleto. Después de todo, con desarrollo de HTML y CSS, se han abierto nuevas oportunidades y hacer algún tipo de animación en el sitio se ha vuelto mucho más fácil. El ticker simplemente está desactualizado. Sin embargo, muchos continúan usándolo y, como muestra la práctica, lo que alguna vez fue, a menudo vuelve a ser tendencia.
Eso es todo, gracias por su atención. 🙂
En este artículo hablaré sobre cómo hacer una línea rastrera en un sitio web usando un especial etiqueta HTML -
En mi opinión, en las condiciones actuales es mejor no utilizar tickers en absoluto. En casos extremos, sólo se pueden utilizar para una mejor visibilidad. información importante(Por ejemplo, promociones actuales, descuentos). Hay muchos otros métodos modernos¿Cómo puedes transmitirlo al usuario? información útil(animación flash, pancartas).
También vale la pena señalar que hay otra forma de crear un ticker además de la etiqueta de marquesina. Este método se implementa a través de JavaScript, pero debido a su uso inadecuado (carga la página), ni siquiera lo consideraremos.
etiqueta HTML
Entonces en HTML hay etiqueta especial para crear un ticker: . Tiene una gran cantidad de atributos con opciones bastante simples, por lo que no debería haber ningún problema con la configuración. A continuación analizaré en detalle todos los atributos y parámetros de la etiqueta de marquesina. Por cierto, puede contener no sólo texto, sino también imágenes y otros elementos del sitio web. Por lo tanto, este artículo también responde a la pregunta de cómo crear una imagen, un objeto, etc. en ejecución.
Sintaxis de etiquetas
Atributos y parámetros
1. ancho="número/porcentaje"- establece el ancho de la línea progresiva en píxeles/porcentajes. Aquellos que estén familiarizados con HTML probablemente estén familiarizados con este atributo. Por ejemplo:
- width="240px" - establece el ancho en 240 píxeles;
- width="40%" - establece el ancho en 40% dependiendo del ancho del bloque en el que se encuentra el objeto;
2. altura="número/porcentaje"- establece la altura de la línea progresiva en píxeles/porcentaje. El ejemplo se puede dar igual que con el primer atributo. Por ejemplo:
- height="400px" - establece la altura en 400 píxeles;
- height="30%" - establece la altura al 30% dependiendo de la altura del bloque en el que se encuentra el objeto;
Nota: si la línea rastrera consta de una sola línea, entonces no se puede especificar la altura, ya que se determinará automáticamente dependiendo del tamaño de fuente, que se especifica mediante el parámetro font-size: Npx.
3. bgcolor="color" - establece el color de fondo del contenedor. Puedes elegir un color en la página: códigos de color html. Nota: si atributo bgcolor no se especifica, el color de fondo predeterminado será el color de fondo de la página.
4. comportamiento="parámetro" - este es uno de los más atributos importantes corazón. Define el comportamiento del ticker. tiene bastante varias opciones:
. alternativo: el ticker se mueve cíclicamente: de derecha a izquierda, luego de izquierda a derecha (corre entre los bordes). Por ejemplo:
Y así es como se ve esta línea en el sitio web:
Cadena con atributo de comportamiento = "alternativo"
Desplazamiento: la línea progresiva se mueve fuera del área en la dirección indicada por el atributo de dirección (con un parámetro) y luego se repite cíclicamente. En mi opinión, esta opción es la más común. Por ejemplo:
. diapositiva: muy similar al desplazamiento, sin embargo, al final la línea se detiene y no se repite. Por ejemplo:
Cadena con atributo de comportamiento="deslizamiento" dirección="derecha"
5. dirección="parámetros"- establece la dirección del movimiento de la línea progresiva. Puede tomar los siguientes valores:
. abajo - movimiento de arriba a abajo. Por ejemplo:
Línea con atributo de comportamiento="desplazamiento" dirección="abajo"
. arriba - movimiento de abajo hacia arriba. Por ejemplo:
Cadena con atributo de comportamiento="desplazamiento" dirección="arriba"
. izquierda: movimiento de derecha a izquierda. Nota: la izquierda es la opción predeterminada. Por ejemplo:
Línea con atributo comportamiento="desplazamiento" dirección="izquierda"
. derecha: movimiento de izquierda a derecha. Por ejemplo:
Línea con atributo de comportamiento="desplazamiento" dirección="derecha"
6. hspace="número" - establece la sangría horizontal de la línea en otros objetos. La popular etiqueta img tiene un atributo similar.
7. vspace="número" - establece la distancia vertical a otros objetos.
8. loop="number" - cuántas veces necesitas desplazarte por el contenido. El parámetro especifica un número que especifica el número de repeticiones. Nota: el número -1 significa bucle sin fin voluta. El valor predeterminado es -1.
9. scrollamount="número" - velocidad de movimiento de la línea progresiva. El número especifica el número de píxeles que se moverá el objeto en un ciclo de reloj. Nota: La velocidad predeterminada es 6 píxeles/seg. Por ejemplo:
Cadena con atributo scrollamount="10"
10. scrolldelay="número": establece el retraso entre los pasos del ticker en milisegundos. Por ejemplo:
Cadena con atributo scrolldelay="500"
Finalmente, daré 2 ejemplos del uso de líneas progresivas. Ejemplo usando objeto div:
Ejecutando elemento div
Ejemplo de una imagen en ejecución:
Haz un ticker en HTML No podría ser más fácil. Frontpage es responsable de esto. efecto dinámico.
No es necesario utilizar códigos ni insertar scripts en el sitio para ello. El programa hará todo por usted. Pero antes de pasar a la lección, unas pocas palabras sobre el ticker.
Cómo hacer un ticker en html
A menudo se puede ver cómo en las páginas de un sitio web se resaltan en negrita frases individuales y, a veces, frases enteras, como en este sitio web. Esto se hace para centrar la atención de los visitantes en los puntos importantes y clave del artículo. Pero muchas veces esto no es suficiente.
Por ejemplo, vende una gran variedad de tipos de productos en su sitio web. PERO primero debes vender uno de ellos rápidamente. O desea destacar una oferta de precio favorable entre otras. O desea colocar un anuncio en su sitio web para que llame su atención de inmediato. Sí, nunca se sabe para otros propósitos...
Para hacer una línea tan progresiva, hacemos lo siguiente:
1. Escribe cualquier texto que quieras presentar como teletipo. Configure el texto con el tamaño y color de fuente deseado. Por ejemplo, mi ticker tiene los siguientes parámetros: Fuente - Verdana, Tamaño - 12, negrita, color - rojo
Ahora seleccione el texto completo y luego
Haga clic en el botón "Insertar" en el panel en la parte superior y seleccione "Componente web" en el menú contextual. 2. Se abrirá la ventana "Insertar componente del sitio web". En el lado izquierdo de la ventana, seleccione Efectos dinámicos, en el lado derecho, seleccione Ticker y haga clic en Listo. 3. Tienes una nueva ventana "Propiedad de línea de rastreo". Esta ventana contiene el texto que se ha escrito y resaltado, así como la configuración de las líneas progresivas:
Dirección, velocidad, comportamiento.
etcétera. No cambiaremos nada y dejaremos la configuración predeterminada. Haga clic en Aceptar.
Después de abrir la página en el navegador, verá que el ticker se mueve de derecha a izquierda. Así es como se verá después de que la página se publique en Internet.
Entonces es cuando el ticker viene al rescate. 5. Ahora cambiemos el movimiento del ticker de izquierda a derecha. Para hacer esto, seleccione el texto y haga clic derecho en el texto. En el menú, seleccione"Propiedades del billete" En la ventana que se abre, coloque un punto al lado de la palabra"A la derecha
", prensa "
6. Si desea que la línea progresiva se mueva hacia un lado y se detenga, debe seleccionar la opción " Cambio", en prensa " En la ventana que se abre, coloque un punto al lado de la palabra" y guarda los cambios en la página. .
Ahora abrimos la página en el navegador y vemos el efecto de la línea que sale y se detiene.
Ahí es cuando el ticker viene al rescate.
7. Y si selecciona la opción "Alternativamente", la línea progresiva se moverá de izquierda a derecha y de derecha a izquierda dentro de los límites de la celda en la que se coloca la línea progresiva.
Así se moverá ahora nuestra línea con este efecto:
Ahí es cuando el ticker viene al rescate.
8. Si es necesario, puede agregar un fondo al teletipo. Salgamos por la ventana nuevamente por esto."Propiedad de línea de ticket".
Haga clic en "Color de fondo" y seleccione un color. Por ejemplo, amarillo. Haga clic en "Aceptar" y guarde los cambios.
Ahí es cuando el ticker viene al rescate.
Ver la página usando un navegador. El ticker ahora tiene un fondo amarillo.
9. Si desea eliminar el fondo, vaya a "Color de fondo" y seleccione el color "Automático".
10. Para eliminar una línea progresiva, simplemente selecciónela y presione "Eliminar" en el teclado.
Antes de pasar a estudiar el siguiente gran capítulo, te contaré un poco sobre algunas pequeñas cosas que de alguna manera se salen del orden general, pero que a veces no puedes prescindir de ellas. Estos elementos, en sentido figurado, del lenguaje html ayudarán a resolver una serie de problemas que a menudo surgen al crear una página en particular, por lo que no debes tratarlos con desdén.
Caracteres especiales< и "больше чем"- >A veces, y a veces incluso a menudo, como por ejemplo en este sitio, el texto no puede prescindir de los signos "menos que":<слово>, pero ¿qué pasa si los navegadores detectan<тег>¿O una frase encerrada entre estos caracteres como etiqueta y por lo tanto no se mostrará en el monitor? O digamos que realmente necesitas escribir algo en el texto.
, pero no para dar otro comando al navegador, sino para dar un ejemplo de cómo escribirlo a los visitantes de la página.
Para ello se inventaron los llamados caracteres especiales. < Por ejemplo, un carácter especial< а спецсимвол > - significará que en este lugar del texto debes poner un cartel
se indica con el símbolo >.
Todos los caracteres especiales comienzan a escribirse con el signo & - ampersand, este signo le indica al navegador que seguirá el nombre del carácter especial y debe percibirse no como texto, sino como un comando. Aquí surge otra pregunta: ¿cómo poner realmente el signo & - ampersand - en el texto destinado a mostrarse en la pantalla? &
El signo & también tiene su carácter especial:
Aquí es donde entra la confusión... Además, tal vez atención especial merece un carácter especial: este ya lo hemos encontrado. El hecho es que cuando escribes texto en un bloc de notas o editor html Puede colocar tantos espacios "simples" entre palabras como desee, pero cuando un navegador lee la página, todos se "eliminan" y no habrá más de un espacio entre palabras en la página. Esto a menudo conduce a problemas con el diseño del texto, por ejemplo, no hay forma de crear una línea roja... por eso a la gente se le ocurrió un carácter especial que el navegador no percibe como un espacio, sino sólo como un signo; invisible al ojo humano.
Y se llama irrompible porque un grupo de esos espacios se percibe como una palabra completa y, por lo tanto, no se transfiere a siguiente línea, si la propuesta se ajusta a los marcos establecidos o al borde de la ventana. Entonces puede aparecer la ventana raya horizontal desplazamiento, si no lo necesita, coloque espacios regulares entre ellos
Ejemplo de uso de caracteres especiales:
| <
/td> | < HTML > < cabeza > < título > mi primera pagina < /título > < /cabeza > < cuerpo > < centro >< h2 > ¡¡¡Hola Mundo!!! < /h2 >< /centro > < hermano > ¡Esta es mi primera página! < /cuerpo > < /html > |
Un ejemplo dentro de un ejemplo... evoca pensamientos filosóficos sobre el infinito...
Bueno, ahora sabes aproximadamente cómo se ven todos estos ejemplos en el “otro lado de la pantalla”. Por cierto, desde que comencé a revelar secretos militares, este ejemplo es una tabla de dos celdas, una delgada a la izquierda realiza una función puramente decorativa... así que si te enfrentas a la tarea de dibujar una celda de la tabla sin ningún contenido, inserta un carácter de espacio en ella. recuerda la regla<тег>debe haber algo aquí? El carácter de espacio especial es una de las salidas en este caso.
Además de lo anterior, hay toda una serie de símbolos especiales, que no están ahí: signos del zodíaco, palos de cartas, palos, puntos, árboles de Navidad, círculos, fracciones... Ya no están destinados a algunas tareas “especiales”. , pero simplemente cumplen su función ante la ausencia de estos caracteres en el teclado. Puedes ver mi “colección” de personajes especiales.
línea horizontal
Simple nueva etiqueta
Dibuja una línea horizontal en la ventana, no requiere una etiqueta de cierre. A menudo se utiliza en el diseño de páginas como elemento decorativo.
Tiene una serie de atributos, alinear-alineación con uno de tres significados (centro, izquierda, derecha) se puede aplicar si se especifica el atributo de longitud de línea ancho en píxeles o porcentajes. También puede configurar el atributo de grosor de línea: tamaño, atributo de color - color, y si es necesario desactivar la sombra de línea sombra .
Esta es sólo la línea predeterminada:
Esta es la línea sin sombra:
Esta es una línea pintada en color grulla:
Línea de 250 píxeles de largo:
Línea de 250 de largo y 5 píxeles de grosor:
Línea 500 de largo, 50 de grosor, azul:
Ejemplos de alineación:
En mi opinión es bastante sencillo y eficaz.
línea progresiva
Etiqueta hace que el texto colocado en él se mueva en una dirección u otra, en otras palabras, lo convierte en una línea progresiva. La línea progresiva tiene una serie de configuraciones de desplazamiento, que se establecen mediante los siguientes atributos:
comportamiento- define el tipo de desplazamiento, puede tener los siguientes valores:- alternar- movimientos oscilatorios de borde a borde
- voluta- texto desplazable. el texto desaparecerá de la pantalla y reaparecerá en el lado opuesto de la misma
- deslizar- desplazamiento de texto con parada.
bucle establece el número de desplazamientos del ticker.
dirección- dirección del movimiento del texto. valores:
- arriba- arriba,
- abajo- abajo,
- izquierda- izquierda,
- bien- A la derecha.
altura- altura de la línea,
ancho- ancho de línea.
Líneas corrientes
Ticker predeterminado
Línea que corre de izquierda a derecha
El ticker va de borde a borde
Ticker a velocidad 10
Teletipo a velocidad 1
Esta línea solo se desplazará dos veces
Línea de carrera con parada.
Línea progresiva con fondo
Ticker con limitación de ancho de desplazamiento
Línea que corre de abajo hacia arriba
Línea progresiva con sangrías de los bordes.
Bueno, creo que descubrirás por ti mismo qué es qué. Intenta usar varias combinaciones atributos para lograr el efecto que necesitas. Sólo añadiré que con el texto de una línea continua se puede hacer lo mismo que con el texto normal: cambiar el tamaño, el color, el estilo, la fuente, convertir una frase de una línea en un enlace... escribiendo etiquetas necesarias dentro de la etiqueta
