Senarai lengkap atribut DIV yang biasa digunakan yang dianjurkan sendiri_HTML/Xhtml_Pengeluaran halaman web-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

Senarai lengkap atribut DIV yang biasa digunakan yang dianjurkan sendiri_HTML/Xhtml_Pengeluaran halaman web

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

div

1. Senarai atribut

Salin kod

Kodnya adalah seperti berikut:

warna: #999999 Warna teks
keluarga fon: Fon gaya lagu
saiz fon: 10pt Saiz teks
gaya fon:itelik Gaya condong teks
varian fon:kecil -huruf kecil Fon
jarak-huruf: 1pt Jarak teks
tinggi baris: 200% Tetapkan ketinggian baris
berat fon:tebal Teks tebal
jalur-menegak:sub Subskrip
menegak - align:super Superscript
text-decoration:line-through Tambah ?h untuk membahagi baris
text-decoration:overline Tambah baris atas
text-decoration:underline Tambah garis bawah
text-decoration: none ? hKecuali untuk menyambungkan baris bawah
teks-transformasi: huruf besar Perkataan pertama ditulis dengan huruf besar
teks-transformasi: huruf besar Inggeris huruf besar
teks-transformasi: huruf kecil tulisan Inggeris
text-align:right Teks * kanan -aligned
text-align:left text*left alignment
text-align:center text center alignment
Ini ialah beberapa kesan teks ringkas yang boleh digunakan pada halaman CSS.
Latar Belakang
warna latar belakang: Warna latar belakang hitam
imej latar belakang: url(imej/bg.gif) Imej latar belakang
lampiran latar belakang: tetap Latar belakang tetap
latar belakang-ulang: ulang Ulang Susunan - lalai halaman web
latar belakang-ulang: tiada ulang susunan bukan ulangan
latar belakang-ulang: ulang-x mengulangi susunan pada paksi-x
latar belakang-ulang: ulang-y mengulangi susunan pada paksi-y
kedudukan-latar belakang: 90% 90% Kedudukan paksi x dan y imej latar belakang
Pautan
A Semua hiperpautan
A:pautan Format teks hiperpautan
A :dilawati Format teks pautan yang disemak imbas
A:aktif Tekan format sambungan
A:tuding Gerakkan tetikus ke sambungan
Sempadan
bahagian atas sempadan: 1px bingkai atas hitam pepejal
bahagian bawah sempadan : 1px pepejal #6699cc bingkai bawah
sempadan-kiri: 1px pepejal #6699cc sempadan kiri
sempadan-kanan: 1px pepejal #6699cc sempadan kanan
sempadan: 1px pepejal #6699cc empat sempadan
garis putus-putus

<br>Garis padat<br><TEXTAREA STYLE="border:1px solid pink"> sama dengan ketinggian baris teks, iaitu, garis- Sudah cukup bahawa nilai ketinggian dan ketinggian adalah sama Akhir sekali, berikan div aliran berlebihan: tersembunyi untuk menyembunyikan bahagian yang berlebihan. <br><br>
</div>
<br> 2. Atribut biasa <strong> </strong> <br><br><div class="msgheader">
<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));">Salin kod<u></u></span>Kod adalah seperti berikut:</div>
<div class="msgborder" id="phpcode95"> <br>1. Ketinggian: Tetapkan ketinggian DIV: Tetapkan lebar DIV. <br>2. Margin: digunakan untuk menetapkan margin lanjutan DIV, iaitu jarak ke bekas induk. jidar: diikuti dengan empat jarak, iaitu jarak dari bahagian atas, kanan, bawah dan kiri jidar induk: [atas][kanan][bawah][kiri] <br> boleh ditetapkan secara berasingan: jidar-kiri; : ke Jarak ke sempadan kiri bekas induk; sempadan bawah bekas induk. <br>3. pelapik: digunakan untuk menetapkan margin dalam DIV (jarak antara sub-elemen dalam dan sempadan DIV). padding: diikuti dengan empat jarak, iaitu jarak dari bahagian atas, kanan, bawah dan kiri jidar induk: [atas][kanan][bawah][kiri]: Perlu diingat bahawa jarak yang ditetapkan oleh padding tidak termasuk dalam Dalam lebar dan ketinggiannya sendiri (dalam IE7 dan FF), contohnya, jika lebar DIV ditetapkan kepada 100px, dan padding-left ditetapkan kepada 50px, maka DIV akan menjadi 150px lebar apabila dipaparkan pada halaman. <br>4. Tetapkan gaya sempadan paparan DIV: Tetapkan atribut paparan. Nilainya termasuk blok dan tiada apungan: Tetapkan arah aliran DIV pada halaman termasuk kiri (dipaparkan di sebelah kiri), kanan (dipaparkan di sebelah kanan), dan tiada latar belakang: Tetapkan gaya latar belakang DIV; selepas latar belakang, anda boleh terus mengikut warna latar belakang, imej latar belakang, kaedah jubin dan gaya lain. Ia juga boleh ditetapkan secara berasingan menggunakan sifat berikut. <br>Warna latar belakang: Tetapkan warna latar belakang; lampiran latar belakang: Kaedah lampiran imej latar belakang, nilainya adalah tatal dan imej latar belakang: Tentukan imej latar belakang yang sedia ada; kaedah jubin imej latar belakang. Nilainya termasuk tidak berulang (tidak berjubin), ulang (berjubin dalam dua arah), ulang-x (jubin mendatar), ulang-y (kedudukan latar belakang berjubin: Letakkan kedudukan latar belakang dalam DIV . Nilainya mempunyai kombinasi berbeza atas bawah kiri kanan. Anda juga boleh menentukan lokasi tertentu menggunakan koordinat. <br>5 Kedudukan: Tetapkan kaedah kedudukan DIV. Terdapat empat sifat kedudukan: statik, tetap, relatif, dan mutlak. Biasa digunakan relatif dan mutlak. Jika ia dinyatakan sebagai statik, DIV mengikut peraturan HTML jika ia dinyatakan sebagai relatif, anda boleh menggunakan atas, kiri, kanan dan bawah untuk menetapkan offset DIV dalam halaman (berbanding dengan offsetnya sendiri), tetapi lapisan tidak boleh digunakan pada masa ini ; Jika ia dinyatakan sebagai mutlak, anda boleh menggunakan atas, kiri, kanan, dan bawah untuk benar-benar meletakkan DIV (kepada elemen induk yang terdekat jika ia dinyatakan sebagai tetap, kedudukan ). DIV dalam IE7 dan FF ditetapkan relatif kepada skrin Tiada perubahan, ia tidak mempunyai kesan dalam IE6 (saya tidak tahu mengapa). <br>6. Fon: Tentukan gaya teks dalam DIV, yang boleh diikuti oleh berbilang gaya teks. font-family: Tetapkan nama font yang akan digunakan; Tentukan gaya teks, nilainya termasuk miring biasa, dsb. warna: menentukan warna teks: menentukan penjajaran mendatar teks, nilainya termasuk teks tengah (tengah); -penghias: digunakan untuk hiasan teks; nilainya tidak termasuk garis atas garisan dan Gabungan kelipan teks: menetapkan lekukan teks-transformasi: menetapkan huruf besar teks. Nilainya termasuk huruf besar huruf besar (huruf besar huruf pertama) tiada arah: arah aliran kandungan. Nilainya termasuk ltr (dari kiri ke kanan), rtl (dari kanan ke kiri); menentukan ketinggian baris teks; <br>7. Limpahan: Kawalan limpahan kandungan termasuk tatal (bar tatal sentiasa dipaparkan), boleh dilihat (bar tatal tidak dipaparkan, tetapi bahagian lebihan kelihatan), auto (bar tatal dipaparkan apabila kandungannya. melebihi), dan tersembunyi (bar tatal dipaparkan apabila kandungan melebihi kandungan). <br><br><br><strong>3. Beberapa kesan khas: <br><br></strong>1. Apabila menggunakan atribut indeks-z, kedudukan mesti dinyatakan sebagai mutlak. <br><br>2. Kursor: Tetapkan gaya kursor pada DIV. <br><br>3. Tetapkan segi empat tepat keratan. clip:rect(atas kanan bawah kiri); Tetapkan jarak antara atas, bawah, kiri dan kanan, tetapi pada masa ini, kedudukan mesti dinyatakan sebagai mutlak. <br><br>4. Penapis ketelusan kelegapan:alpha(opacity=value) cth: filter:alpha(opacity=50);opacity:0.5; <br><br><strong>4 </strong><br><br>Kedudukan mutlak dan kedudukan relatif (kedudukan) <strong> </strong><br>Kedudukan mutlak: <br><br>Atribut kedudukan akan menjadi kunci kebahagiaan bagi netizen: <br><br>H4 { kedudukan: mutlak; kiri: 100px atas: 43px } <br><br>Peraturan CSS ini membolehkan penyemak imbas menetapkan kedudukan permulaan <H4> 43 piksel dari atasnya. Ambil perhatian bahawa satu-satunya tetapan di sini ialah kiri dan atas Dalam erti kata lain, teks akan memasuki tetingkap penyemak imbas dari kiri ke kanan dan atas ke bawah. <br><br>Atribut kiri dan atas sangat intuitif. Kiri (kiri) menetapkan jarak dari sebelah kiri tetingkap penyemak imbas, dan atas (atas) menetapkan jarak dari bahagian atas tetingkap penyemak imbas. Apabila menetapkan jarak ini, anda boleh menggunakan pelbagai unit darjah atau nilai skala yang telah anda pelajari. Apabila menggunakan nilai skala, nilai skala adalah relatif kepada dimensi ciri induk. <br><br>Apa yang anda boleh sasarkan? apa sahaja! Perenggan, perkataan, imej GIF dan JPEG, filem QUICKTIME dan banyak lagi. <br><br>Kedudukan relatif: <br><br>Kedudukan mutlak membolehkan anda meletakkan elemen dengan tepat pada kedudukan bebasnya pada halaman, tanpa mengira tetapan kedudukan elemen lain pada halaman. Kedudukan relatif bermakna kedudukan ciri yang anda letakkan adalah relatif kepada kedudukan yang ditetapkan dalam fail. Contoh: <br><br>I { kedudukan: relatif; kiri: 40px atas: 10px } <br><br>Kunci kepada kedudukan relatif ialah kedudukan elemen yang diposisikan adalah relatif kepada tempat yang sepatutnya. . Unit penentududukan relatif muncul di antara barisan unit penentududukan statik biasa dan diletakkan tanpa mengasingkan diri sepenuhnya daripada unit penentududukan statik. Jika anda berhenti menggunakan kedudukan relatif, kedudukan paparan teks akan kembali normal. Berhati-hati apabila menggunakan kedudukan relatif, jika tidak ia boleh mengacaukan halaman dengan mudah. <br><br>Selain kedudukan relatif dan kedudukan mutlak, anda juga boleh menggunakan nilai parameter statik. Statik ialah nilai lalai untuk atribut kedudukan. Penggunaannya adalah sama seperti kaedah penentududukan dalam HTML biasa, dan tiada tetapan kedudukan khas boleh dilampirkan. Iaitu, tiada apa-apa lagi yang boleh menjejaskan kedudukan sel kecuali sifat margin, atau dengan mengapungkan sel menggunakan sifat terapung. <br><br><br>Kawalan unit penentududukan (lebar, tinggi, keterlihatan) <strong> </strong><br>Selain mengawal kedudukan sudut kiri atas unit penentududukan, anda juga boleh mengawal lebar dan ketinggian unit, dan unit Keterlihatan pada halaman. <br><br>Lebar: Elemen yang diposisikan masih akan dipaparkan dari kiri ke kanan apabila dipaparkan pada halaman. Anda boleh menggunakan atribut lebar untuk menetapkan sekatan pada aliran aksara ke kanan, iaitu, untuk menetapkan lebar elemen. <br><br>DIV { position: absolute left: 200px atas: 40px width: 150px } <br><br>Apabila pelayar menerima peraturan ini, ia akan memaparkan teks mengikut kesan yang ditentukan oleh peraturan , dan juga Hadkan saiz mendatar maksimum perenggan kepada 150 piksel. <br><br>Atribut lebar hanya digunakan pada ciri yang diletakkan secara mutlak. Anda boleh menggunakan mana-mana unit panjang yang kami pelajari, atau tetapkan lebar menggunakan nilai skala, yang relatif kepada ciri induk. Dalam IE 4, atribut ini juga tersedia untuk imej. Anda boleh melebarkan atau memampatkan imej secara buatan melalui tetapan lebar. <br><br>Ketinggian: Secara teori, ketinggian harus ditetapkan sama dengan lebar, tetapi dalam arah menegak: <br><br>DIV { kedudukan: mutlak kiri: 200px; } <br><br>Di sini saya menggunakan "secara teori" kerana sesetengah pelayar tidak menyokong atribut ketinggian. <br><br>Keterlihatan: Menggunakan CSS, anda boleh menyembunyikan elemen supaya ia tidak kelihatan pada halaman. Atribut ini digunakan untuk kedua-dua ciri terletak dan tidak terletak. <br><br>H4 { keterlihatan: tersembunyi } <br><br>Pilihan: <br><br>kelihatan menjadikan ciri kelihatan<br><br>tersembunyi menjadikan ciri disembunyikan<br><br>warisan Penunjuk bahawa ia akan mewarisi tetapan keterlihatan ciri induk. <br><br>Nilai yang diwarisi ialah nilai lalai. Ini menyebabkan sel mewarisi kebolehlihatan sel induk. Jadi, jika perenggan disembunyikan, mana-mana sel sebaris yang terkandung di dalamnya juga tersembunyi. Warisan ini boleh ditindih dengan keterlihatan yang dinyatakan secara eksplisit. Contohnya, jika sel EM dalam bahagian ditetapkan sebagai kelihatan, dan bahagian itu tersembunyi, semua kandungan lain dalam bahagian itu akan hilang dan hanya teks dalam sel EM akan kelihatan. <br><br>Apabila elemen disembunyikan, ia masih menempati ruang asal dalam tetingkap penyemak imbas. Jadi, jika anda membalut teks di sekeliling imej tersembunyi, ia akan kelihatan seolah-olah teks itu mengelilingi kawasan kosong. Berita ini <br><br>Atribut ini berguna apabila menulis bahasa dan menggunakan HTML dinamik Contohnya, anda boleh membuat perenggan atau imej tertentu hanya dipaparkan apabila tetikus berguling ke atasnya. <br><br><br>Aras unit (indeks-z) <strong> </strong><br>Atribut z-index digunakan untuk menyusun sel pada skrin. Secara lalai, unit disusun mengikut susunan ia muncul dalam penanda HTML—iaitu, unit yang muncul kemudian disusun di atas unit yang muncul lebih awal. Sifat Z-index sebenarnya mentakrifkan susunan susunan unit adik-beradik dan susunan unit berbanding dengan unit induknya. Mengikut spesifikasi draf, kumpulan unit dengan nilai indeks z positif disusun di atas unit induknya, dan susunan susunannya sendiri ditentukan oleh saiz nilainya (unit dengan nilai yang lebih besar dihidupkan atas). Begitu juga, kumpulan unit dengan nilai indeks z negatif disusun di bawah unit induk, dan susunan susunan mereka sendiri juga ditentukan oleh saiz nilai (unit dengan nilai yang lebih besar berada pada lapisan atas, contohnya , unit dengan nilai -1 berada di lapisan atas -2 di atas unit). <br><br>Gunakan integer tulen untuk nilai parameter ini. z-index digunakan untuk ciri kedudukan mutlak atau kedudukan relatif. Anda juga boleh menetapkan indeks-z imej. (Untuk Communicator, sebaiknya bungkus teg <IMG> dalam teg <SPAN> atau <DIV> dan kemudian gunakan indeks-z pada <SPAN> atau <DIV>.) <br><br> <strong>Klip unit berkedudukan mutlak (klip) <br></strong><br>Unit berkedudukan mutlak boleh dipotong - iaitu, klipkan kawasan yang dipaparkan kepada pengguna, hanya menunjukkan sebahagian unit dan menjadikan selebihnya telus . Ini bukan ciri yang sangat berguna untuk halaman web berasaskan teks dan imej tradisional. Tetapi ini berguna jika halaman multimedia diperlukan. Sebagai contoh, Netscape Communivator 4 dan Internet Explorer 4 kedua-duanya menyokong halaman multimedia secara dinamik melaraskan kawasan keratan di sekeliling unit melalui antara muka skrip dokumen, supaya teks baris pepejal "menyilang masuk" dan imej pudar dan ciri paparan lain. <br><br>Dalam CSS, keratan dikawal melalui ciri klip. Ciri ini hanya boleh digunakan untuk unit yang diposisikan secara mutlak. . Selain itu, kotak klip boleh ditetapkan dengan ungkapan berikut: <br><br>klip : rect(atas,kanan.bawah, kiri); kotak klip segi empat tepat Kedudukan tepi atas, kanan, bawah dan kiri berbanding dengan sudut kiri atas unit terpotong. Nilai untuk Atas, kanan, bawah dan kiri boleh menjadi sebarang nilai panjang mutlak atau relatif (tetapi bukan nilai peratusan), atau kata kunci auto. Nilai auto bermakna bahawa selepas semua sisi kawasan keratan diletakkan, sebarang kandungan dalam unit terpotong tidak akan melebihi kawasan ini. <br><br><br>Limpahan unit kawalan (limpahan) <br> <strong></strong>Betulkan lebar dan ketinggian unit penentududukan mutlak atau relatif Berkemungkinan kawasan yang ditentukan tidak dapat memenuhi keperluan kandungan sebenar unit Ini menyebabkan kandungan unit melimpah. Anda boleh menggunakan limpahan untuk menentukan cara penyemak imbas mengendalikan limpahan: nilai tiada (lalai) membolehkan penyemak imbas memaparkan kandungan limpahan, jadi sel boleh melimpah ke kawasan yang ditentukan. Klip nilai memerlukan penyemak imbas untuk memotong kandungan sel di bahagian bawah dan kanan sel, supaya kandungan sel di luar kawasan yang ditentukan tidak akan dipaparkan. Tatal nilai juga memerlukan penyemak imbas untuk menjepit kandungan sel di bahagian bawah dan kanan sel (sama seperti klip Walau bagaimanapun, penyemak imbas harus (jika boleh) menyediakan bar tatal untuk sel supaya pengguna boleh menatal melalui yang dipotong kandungan.</div>
</div>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
						<div>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</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Alat AI Hot</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>Gambar buka pakaian secara percuma</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>Penyingkiran pakaian AI</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Alat panas</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
													<h3>Notepad++7.3.1</h3>
												</a>
												<p>Editor kod yang mudah digunakan dan percuma</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 versi Cina</h3>
												</a>
												<p>Versi Cina, sangat mudah digunakan</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
													<h3>Hantar Studio 13.0.1</h3>
												</a>
												<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>Alat pembangunan web visual</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 versi Mac</h3>
												</a>
												<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Topik panas</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7621</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1389</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>89</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>70</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>31</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>136</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/500390.html" title="Cara menggunakan css untuk menyedari bahawa div tiada sudut" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202301/30/2023013009193331216.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan css untuk menyedari bahawa div tiada sudut" />
								</a>
								<a href="https://www.php.cn/ms/faq/500390.html" title="Cara menggunakan css untuk menyedari bahawa div tiada sudut" class="phphistorical_Version2_mids_title">Cara menggunakan css untuk menyedari bahawa div tiada sudut</a>
								<span class="Articlelist_txts_time">Jan 30, 2023 am	 09:23 AM</span>
								<p class="Articlelist_txts_p">Kaedah CSS untuk menyedari bahawa div tiada sudut: 1. Buat fail sampel HTML dan tentukan div 2. Tetapkan warna latar lebar dan ketinggian untuk div 3. Tambah kelas pseudo pada div yang perlu dipadamkan; sudut, dan tetapkan kelas pseudo kepada Gunakan warna yang sama dengan warna latar belakang, kemudian putarkannya 45 darjah, dan kemudian letakkannya ke sudut yang perlu dialih keluar.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/530809.html" title="Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/168292609556078.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT" />
								</a>
								<a href="https://www.php.cn/ms/faq/530809.html" title="Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT" class="phphistorical_Version2_mids_title">Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT</a>
								<span class="Articlelist_txts_time">May 01, 2023 pm	 03:28 PM</span>
								<p class="Articlelist_txts_p">Prakata Baru-baru ini, terdapat skrip pelayar berdasarkan ChatGPTAPI di GitHub, openai-translator Dalam tempoh yang singkat, bintang itu telah mencapai 12k Selain menyokong terjemahan, ia juga menyokong fungsi penggilap dan ringkasan -in, ia juga menggunakan pembungkusan tauri Jika anda mempunyai klien desktop, selain daripada fakta bahawa tauri menggunakan bahagian karat, bahagian pelayar masih agak mudah untuk dilaksanakan Hari ini kami akan melaksanakannya secara manual. Antara muka yang disediakan oleh openAI, sebagai contoh, kita boleh menyalin kod berikut dan memulakan permintaan dalam konsol penyemak imbas untuk melengkapkan terjemahan //Const constOPENAI_API_KEY="s</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/617459.html" title="Apakah model kotak div" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202310/09/2023100916235185066.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah model kotak div" />
								</a>
								<a href="https://www.php.cn/ms/faq/617459.html" title="Apakah model kotak div" class="phphistorical_Version2_mids_title">Apakah model kotak div</a>
								<span class="Articlelist_txts_time">Oct 09, 2023 pm	 05:15 PM</span>
								<p class="Articlelist_txts_p">Model kotak div ialah model yang digunakan untuk reka letak halaman web Ia menganggap elemen dalam halaman web sebagai kotak segi empat tepat Model ini mengandungi empat bahagian: kawasan kandungan, padding, sempadan dan margin. Kelebihan model kotak div ialah ia boleh mengawal reka letak halaman web dengan mudah dan jarak antara elemen Dengan melaraskan saiz kawasan kandungan, jidar dalam, jidar dan jidar luar, pelbagai kesan susun atur boleh dicapai model kotak juga menyediakan beberapa Sifat dan kaedah boleh mengubah gaya dan tingkah laku kotak secara dinamik melalui CSS dan JavaScript.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/599024.html" title="Apakah perbezaan antara iframe dan div" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202308/28/2023082811424957714.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah perbezaan antara iframe dan div" />
								</a>
								<a href="https://www.php.cn/ms/faq/599024.html" title="Apakah perbezaan antara iframe dan div" class="phphistorical_Version2_mids_title">Apakah perbezaan antara iframe dan div</a>
								<span class="Articlelist_txts_time">Aug 28, 2023 am	 11:46 AM</span>
								<p class="Articlelist_txts_p">Perbezaan antara iframe dan div ialah iframe digunakan terutamanya untuk memperkenalkan kandungan luaran, yang boleh memuatkan kandungan dari tapak web lain atau membahagikan halaman web kepada berbilang kawasan Setiap kawasan mempunyai konteks penyemakan imbas bebasnya sendiri, manakala div digunakan terutamanya untuk membahagikan dan mengatur kandungan untuk reka letak dan kawalan gaya.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/624838.html" title="Apakah perbezaan antara div dan span?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202311/02/2023110214291073075.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah perbezaan antara div dan span?" />
								</a>
								<a href="https://www.php.cn/ms/faq/624838.html" title="Apakah perbezaan antara div dan span?" class="phphistorical_Version2_mids_title">Apakah perbezaan antara div dan span?</a>
								<span class="Articlelist_txts_time">Nov 02, 2023 pm	 02:29 PM</span>
								<p class="Articlelist_txts_p">Perbezaannya ialah: 1. div ialah elemen peringkat blok, dan span ialah elemen sebaris; 2. div akan secara automatik menduduki baris, manakala span tidak akan secara automatik membalut; span digunakan untuk membalut Teks atau elemen sebaris lain 4. div boleh mengandungi unsur peringkat blok dan unsur sebaris lain, dan span boleh mengandungi unsur sebaris lain.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/686724.html" title="Petua jQuery: Kuasai cara menambah tag dalam div" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170866747358643.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Petua jQuery: Kuasai cara menambah tag dalam div" />
								</a>
								<a href="https://www.php.cn/ms/faq/686724.html" title="Petua jQuery: Kuasai cara menambah tag dalam div" class="phphistorical_Version2_mids_title">Petua jQuery: Kuasai cara menambah tag dalam div</a>
								<span class="Articlelist_txts_time">Feb 23, 2024 pm	 01:51 PM</span>
								<p class="Articlelist_txts_p">Tajuk: Petua jQuery: Kuasai kaedah menambah tag pada div Dalam pembangunan web, kita sering menghadapi situasi di mana kita perlu menambah tag secara dinamik pada halaman. Anda boleh menggunakan jQuery untuk memanipulasi elemen DOM dengan mudah dan mencapai fungsi penambahan label yang pantas. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah teg dalam div, dan melampirkan contoh kod tertentu. 1. Kerja penyediaan Sebelum menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery ke dalam halaman Anda boleh memperkenalkannya melalui pautan CDN atau memuat turunnya ke halaman ini.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/682562.html" title="Cara mudah untuk menambah elemen div dengan jQuery" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170834781149477.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara mudah untuk menambah elemen div dengan jQuery" />
								</a>
								<a href="https://www.php.cn/ms/faq/682562.html" title="Cara mudah untuk menambah elemen div dengan jQuery" class="phphistorical_Version2_mids_title">Cara mudah untuk menambah elemen div dengan jQuery</a>
								<span class="Articlelist_txts_time">Feb 19, 2024 pm	 09:03 PM</span>
								<p class="Articlelist_txts_p">Teknik penambahan elemen jQuerydiv yang ringkas dan mudah difahami jQuery ialah salah satu perpustakaan JavaScript yang biasa digunakan dalam pembangunan bahagian hadapan Ia menyediakan kaedah yang mudah untuk mengendalikan elemen DOM dan boleh menambah, memadam, mengubah suai dan fungsi lain elemen halaman dengan cepat. Apabila menggunakan jQuery, kita selalunya perlu mengendalikan elemen div Perkara berikut akan memperkenalkan beberapa teknik mudah dan mudah difahami untuk menambah elemen div dan menyediakan contoh kod tertentu. 1. Cipta dan tambah elemen div baharu</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ms/faq/624132.html" title="Bagaimana untuk memaparkan dua div sebelah menyebelah" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202311/01/2023110111343491842.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk memaparkan dua div sebelah menyebelah" />
								</a>
								<a href="https://www.php.cn/ms/faq/624132.html" title="Bagaimana untuk memaparkan dua div sebelah menyebelah" class="phphistorical_Version2_mids_title">Bagaimana untuk memaparkan dua div sebelah menyebelah</a>
								<span class="Articlelist_txts_time">Nov 01, 2023 am	 11:36 AM</span>
								<p class="Articlelist_txts_p">Kaedahnya ialah: 1. Tetapkan dua elemen div kepada atribut "float:left;" 2. Gunakan susun atur fleksibel CSS untuk memaparkan elemen bersebelahan dengan mudah.</p>
							</div>
													</div>

<a href="https://www.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a>
            <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a>
            <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>
</body>

</html>