La etiqueta <marquee> en HTML se usa para crear texto o imagen que se desplaza en una página web. Se desplaza horizontalmente de izquierda a derecha o de derecha a izquierda, o verticalmente de arriba hacia abajo o de abajo hacia arriba.
Sintaxis:
El elemento de marquesina viene en pares. Significa que la etiqueta tiene elementos de apertura y cierre.
<marquee> <--- contents ---> </marquee>
Atributos
| ATRIBUTOS | VALORES | DESCRIPCIÓN |
|---|---|---|
| bg color | Nombre del color | Defina el color de fondo de la marquesina. |
| dirección | Arriba, Abajo, Izquierda, Derecha | Definir la dirección de desplazamiento del contenido. |
| círculo | Número | Especifica cuántas veces se mueve el contenido. El valor predeterminado es infinito. |
| altura | px o % | Definir la altura de la marquesina |
| ancho | px o % | Definir el ancho de la marquesina |
| hespacio | píxeles | Especifique el espacio horizontal alrededor de la marquesina |
| espacio virtual | píxeles | Especifique el espacio vertical alrededor de la marquesina |
Métodos
- start(): este método se utiliza para iniciar el desplazamiento de la etiqueta de marquesina.
- stop(): este método se utiliza para detener el desplazamiento de la etiqueta de marquesina.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align:center;
}
.marq {
padding-top:30px;
padding-bottom:30px;
}
.geek1 {
font-size:36px;
font-weight:bold;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "main">
<marquee class="marq" bgcolor = "Green" direction = "left" loop="" >
<div class="geek1">GeeksforGeeks</div>
<div class="geek2">A computer science portal for geeks</div>
</marquee>
</div>
</body>
</html>
Salida:
etiqueta de marquesina
.principal { texto-alinear: centro; familia de fuentes: «Times New Roman»; } .marq { padding-top:30px; relleno inferior: 30px; } .geek1 { tamaño de fuente: 36px; fuente-peso:negrita; color blanco; relleno inferior: 10px; }
Un portal de informática para geeks
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align:center;
font-family:"Times New Roman";
}
.marq {
padding-top:30px;
padding-bottom:30px;
}
.geek1 {
font-size:36px;
font-weight:bold;
color:white;
text-align:center;
}
.geek2 {
text-align:center;
}
</style>
</head>
<body>
<div class = "main">
<marquee class="marq" bgcolor = "Green" direction = "up" loop="" >
<div class="geek1">GeeksforGeeks</div>
<div class="geek2">A computer science portal for geeks</div>
</marquee>
</div>
</body>
</html>
Salida:
etiqueta de marquesina
.principal { texto-alinear: centro; familia de fuentes: «Times New Roman»; } .marq { padding-top:30px; relleno inferior: 30px; } .geek1 { tamaño de fuente: 36px; fuente-peso:negrita; color blanco; alineación de texto: centro; } .geek2 { texto-alinear: centro; }
Un portal de informática para geeks
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align:center;
font-family:"Times New Roman";
}
.marq {
padding-top:30px;
padding-bottom:30px;
}
.geek1 {
font-size:36px;
font-weight:bold;
color:white;
text-align:center;
}
.geek2 {
text-align:center;
}
</style>
</head>
<body>
<div class = "main">
<marquee class="marq" bgcolor = "Green" direction = "down" loop="" >
<div class="geek1">GeeksforGeeks</div>
<div class="geek2">A computer science portal for geeks</div>
</marquee>
</div>
</body>
</html>
Salida:
etiqueta de marquesina
.principal { texto-alinear: centro; familia de fuentes: «Times New Roman»; } .marq { padding-top:30px; relleno inferior: 30px; } .geek1 { tamaño de fuente: 36px; fuente-peso:negrita; color blanco; alineación de texto: centro; } .geek2 { texto-alinear: centro; }
Un portal de informática para geeks
Navegadores compatibles
- Google Chrome 1.0
- Borde 12.0
- Firefox 65.0
- Internet Explorer 2.0
- Ópera 7.2
- Safari 1.2
Publicación traducida automáticamente
Artículo escrito por Naman_Garg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA