masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Tag Marquee HTML

Tag Marquee HTML

王林
Lepaskan： 2024-09-04 16:23:04
asal
1157 orang telah melayarinya

Teg Marquee dalam HTML digunakan untuk membuat tatal ke atas teks atau imej dalam halaman web, yang membenarkan semua jenis tatal seperti kiri ke kanan, kanan ke kiri, atas ke bawah dan bawah ke atas. Sintaks untuk teg ini dalam HTML ialah Ini ialah menatal teks…< /marquee>, di mana teg 'marquee' digunakan untuk menerangkan sifat tatal yang diperlukan. Beberapa atribut marquee lain yang biasa digunakan ialah kelakuan, hspace, scrollamount, scrolldelay, truespeed, vspace, dll.

Sintaks:

Marquee boleh digunakan dengan menggunakan unsur. Sintaks boleh ditulis seperti yang ditunjukkan di bawah:

<html>
<body>
<marquee direction="up" height="150" width="250" bgcolor="white">This is scrolling of the text...</marquee>
</body>
</html>
Salin selepas log masuk

Atribut HTML Marquee Tag

Berikut ialah atribut yang disokong oleh tag.

  1. tingkah laku: Tindakan menatal teks yang boleh menjadi salah satu nilai, termasuk berselang-seli, tatal dan slaid.
  2. bgcolor: Ia memberikan warna latar belakang.
  3. arah: Ia menentukan arah untuk menatal teks dengan nilai kiri, kanan, atas dan bawah. Nilai arah lalai ditinggalkan.
  4. ketinggian: Ia mentakrifkan ketinggian untuk tenda.
  5. hspace: Atribut ini menyediakan ruang mendatar di sekeliling elemen marquee.
  6. gelung: Ia mentakrifkan berapa kali teks boleh ditatal. Marquee akan gelung secara berterusan jika nilai lalai ialah -1.
  7. jumlah tatal: Ia menentukan jumlah tatal untuk setiap selang waktu. Jika tiada jumlah tatal ditentukan, maka nilai lalai ialah 6.
  8. kelewatan tatal: Ia memberikan kelewatan penatalan dalam milisaat. Jika tiada jumlah tatal ditentukan, maka nilai lalai ialah 6.
  9. truespeed: Ia digunakan untuk menunjukkan nilai tunda tatal 60.
  10. vspace: Atribut ini menyediakan ruang menegak di sekeliling elemen marquee.
  11. lebar: Ia mentakrifkan lebar untuk tenda.

Contoh HTML Marquee Tag

Berikut ialah contoh teg tenda HTML yang diterangkan di bawah:

Contoh #1 – Marquee Kiri

Jenis tenda ini boleh digunakan untuk mengalihkan kandungan dari sebelah kiri.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Left Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "left" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

  • Simpan kod di atas dalam fail dengan sambungan .html
  • Jalankan fail HTML dalam penyemak imbas, dan anda akan mendapat output seperti yang ditunjukkan dalam imej di bawah

Tag Marquee HTML

Contoh #2 – Marquee Right

Jenis tenda ini boleh digunakan untuk mengalihkan kandungan ke sebelah kanan.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Right Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "right" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Contoh #3 – Marquee Up

Jenis marquee ini boleh digunakan untuk mengalihkan kandungan ke bahagian atas.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Up Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "up" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Contoh #4 – Marquee Down

Jenis marquee ini boleh digunakan untuk mengalihkan kandungan ke bahagian bawah.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Down Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Contoh #5 – Nested Marquee

Marquee jenis ini boleh digunakan untuk menyarangkan kandungan.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee behavior="alternate"><div class="txt">Welcome to EDUCBA...</div></marquee>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Contoh #6 – Perbandingan Kelajuan untuk Marquee

Kelajuan elemen marquee boleh ditentukan dengan menggunakan atribut tunda tatal.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee scrolldelay="80" scrollamount="7">Welcome to EDUCBA...(normal speed)</marquee>
<marquee scrolldelay="60" scrollamount="12" truespeed>Welcome to EDUCBA...(This is very speed)</marquee>
<marquee scrolldelay="250" scrollamount="4">Welcome to EDUCBA...(This is very slow)</marquee>
</marquee>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Contoh #7 – Warna dan Ruang Latar Belakang Marque

Jenis marquee ini boleh digunakan untuk menetapkan warna latar belakang dan ruang untuk elemen marquee.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1"  bgcolor="#d9d9ff" hspace="50" vspace="20">
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>
Salin selepas log masuk

Output:

Tag Marquee HTML

Kesimpulan

Setakat ini, kami telah mengkaji bagaimana teg marquee akan digunakan untuk membuat teks menatal pada halaman web. Pengguna boleh dengan mudah membuat teks menatal secara mendatar atau menegak dengan mudah di tapak web. Elemen ini telah ditamatkan dan tidak akan digunakan lagi. Untuk membuat kesan penatalan, CSS atau JavaScript akan digunakan.

Atas ialah kandungan terperinci Tag Marquee HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
html html5 HTML Tutorial HTML Properties HTML tags
sumber：php
Artikel sebelumnya：peta Tag dalam HTML Artikel seterusnya：Tag Pengaki dalam HTML
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved