Analisis sebab kedudukan tetap tidak boleh digunakan dalam HTML-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

Analisis sebab kedudukan tetap tidak boleh digunakan dalam HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 28, 2023 pm 02:17 PM

penghuraian html Tidak disokong Kedudukan tetap

Analisis sebab kedudukan tetap tidak boleh digunakan dalam HTML

HTML ialah bahasa penanda yang digunakan untuk membina halaman web Ia menyediakan teg dan atribut yang kaya untuk mencapai pelbagai kesan reka letak halaman web. Antaranya, kedudukan tetap ialah kaedah susun atur yang biasa digunakan, yang membolehkan elemen dipaparkan pada kedudukan tetap berbanding tetingkap penyemak imbas atau elemen induk, dan tidak terjejas oleh menatal. Walau bagaimanapun, tidak semua elemen HTML menyokong kedudukan tetap Artikel ini akan menganalisis sebab kedudukan tetap tidak disokong dalam HTML dan memberikan contoh kod tertentu.

Pertama, kita perlu memahami sintaks kedudukan tetap. Dalam HTML, gaya CSS digunakan untuk mengawal kedudukan tetap Kita boleh menukar kedudukan elemen melalui atribut kedudukan dalam CSS. Kaedah penentududukan tetap ialah menggunakan position: fixed;, yang boleh membetulkan elemen pada kedudukan tertentu pada skrin atau elemen induk.

Walau bagaimanapun, tidak semua elemen HTML menyokong kedudukan tetap. Mengikut piawaian W3C, elemen berikut tidak menyokong kedudukan tetap:

Unsur sebaris: Elemen sebaris tidak menyokong kedudukan tetap. Elemen sebaris termasuk , , , dsb. Ciri mereka ialah mereka tidak menduduki baris secara lalai, tetapi dipaparkan bersama elemen lain dalam satu baris. Oleh kerana kedudukan tetap mengalih keluar elemen daripada aliran dokumen biasa, elemen sebaris tidak dapat mencapai kesan kedudukan tetap.

Kod sampel adalah seperti berikut:

<span style="position: fixed; top: 20px; left: 20px;">This is a fixed inline element!</span>

Salin selepas log masuk

Elemen jadual: Elemen jadual tidak menyokong kedudukan tetap. Elemen jadual termasuk , , , dsb. Membetulkan beberapa elemen jadual akan memusnahkan struktur jadual dan membawa kepada susun atur yang tidak teratur.

Kod sampel adalah seperti berikut:

<table>
    <tr>
        <td style="position: fixed; top: 20px; left: 20px;">This is a fixed table cell!</td>
    </tr>
</table>

Salin selepas log masuk

Elemen bentuk (elemen bentuk): Elemen bentuk tidak menyokong kedudukan tetap. Elemen borang termasuk , , dsb. Ia biasanya digunakan untuk mengumpul maklumat input pengguna dan kedudukan tetap boleh memusnahkan interaksi pengguna dengan elemen borang. </li></ol><p>Kod sampel adalah seperti berikut: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><form style="position: fixed; top: 20px; left: 20px;"> <input type="text" name="name" placeholder="Your name"> </form></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>Perlu diambil perhatian bahawa walaupun beberapa elemen HTML menyokong kedudukan tetap, mungkin terdapat isu keserasian dalam beberapa versi penyemak imbas yang lebih lama. Dalam pembangunan sebenar, adalah disyorkan untuk menggunakan elemen peringkat blok seperti div sebagai bekas, dan kemudian melakukan kedudukan tetap di dalamnya. </p> <p>Ringkasnya, sebab utama kedudukan tetap tidak disokong dalam HTML ialah ciri beberapa elemen tidak sesuai untuk kedudukan tetap. Elemen sebaris tidak menduduki baris eksklusif, tetapi kedudukan tetap memerlukan baris eksklusif struktur khas elemen jadual dan elemen bentuk tidak sesuai untuk susun atur kedudukan tetap. Dalam pembangunan sebenar, elemen yang sesuai harus dipilih untuk susun atur mengikut keperluan, dan elemen yang tidak menyokong kedudukan tetap harus dielakkan. </p> <p>Saya berharap melalui analisis dan contoh kod artikel ini, pembaca dapat memahami mengapa kedudukan tetap tidak disokong dalam HTML dan membuat pilihan yang munasabah dalam pembangunan sebenar. </p><p>Atas ialah kandungan terperinci Analisis sebab kedudukan tetap tidak boleh digunakan dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </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> <div class="AI_ToolDetails_main4sR"> <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> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <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>Artikel Panas</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796789525.html" title="Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini" class="phpgenera_Details_mainR4_bottom_title">Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796783009.html" title="Assassin's Creed Shadows - Cara Mencari Orang Panda" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - Cara Mencari Orang Panda</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785857.html" title="Di mana untuk mencari kad kunci kawalan kren di atomfall" class="phpgenera_Details_mainR4_bottom_title">Di mana untuk mencari kad kunci kawalan kren di atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796784440.html" title="<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/article.html">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>7638</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>1391</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>90</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>71</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>32</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>150</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/567360.html" title="Cara menggunakan fungsi JSoup untuk penghuraian HTML dalam Java" 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/168775809643559.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan fungsi JSoup untuk penghuraian HTML dalam Java" /> </a> <a href="https://www.php.cn/ms/faq/567360.html" title="Cara menggunakan fungsi JSoup untuk penghuraian HTML dalam Java" class="phphistorical_Version2_mids_title">Cara menggunakan fungsi JSoup untuk penghuraian HTML dalam Java</a> <span class="Articlelist_txts_time">Jun 26, 2023 pm 01:41 PM</span> <p class="Articlelist_txts_p">HTML ialah perwakilan asas halaman web. Jika anda ingin mendapatkan dan memanipulasi kandungan dokumen HTML dalam Java, anda perlu menggunakan alat penghuraian sumber terbuka, seperti fungsi JSoup. JSoup ialah perpustakaan Java untuk memproses dokumen HTML Ia menyediakan cara yang sangat mudah untuk mengekstrak data dan elemen tertentu daripada dokumen HTML. Artikel ini akan memperkenalkan penggunaan JSoup dalam Java. Mengimport JSoup Pertama, anda perlu mengimport perpustakaan JSoup dalam projek Java anda. Anda boleh menggunakan Mave</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/622388.html" title="Apakah kedudukan tetap css" 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/25/2023102517010987133.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kedudukan tetap css" /> </a> <a href="https://www.php.cn/ms/faq/622388.html" title="Apakah kedudukan tetap css" class="phphistorical_Version2_mids_title">Apakah kedudukan tetap css</a> <span class="Articlelist_txts_time">Oct 25, 2023 pm 05:06 PM</span> <p class="Articlelist_txts_p">Kedudukan tetap dalam CSS ialah teknik reka letak yang dicapai dengan menetapkan atribut "kedudukan" elemen kepada "tetap". bermakna elemen kedudukan tetap akan kekal dalam kedudukan tetap dalam port pandangan tidak kira bagaimana pengguna menatal halaman. Kedudukan tetap memerlukan perhatian kepada keserasian, peranti mudah alih, kesan prestasi, dsb. Kedudukan tetap digunakan secara meluas dalam senario seperti bar navigasi, sepanduk pengiklanan, butang kembali ke atas dan bar alat terapung.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/765392.html" title="Bagaimana untuk meletakkan elemen dalam css" 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/202404/26/2024042610242114765.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk meletakkan elemen dalam css" /> </a> <a href="https://www.php.cn/ms/faq/765392.html" title="Bagaimana untuk meletakkan elemen dalam css" class="phphistorical_Version2_mids_title">Bagaimana untuk meletakkan elemen dalam css</a> <span class="Articlelist_txts_time">Apr 26, 2024 am 10:24 AM</span> <p class="Articlelist_txts_p">Terdapat empat kaedah penentududukan elemen CSS: kedudukan statik, relatif, mutlak dan tetap. Kedudukan statik adalah lalai dan elemen tidak dipengaruhi oleh peraturan kedudukan. Kedudukan relatif menggerakkan elemen relatif kepada dirinya sendiri tanpa menjejaskan aliran dokumen. Kedudukan mutlak mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada unsur nenek moyangnya. Kedudukan tetap meletakkan elemen berbanding dengan port pandangan, sentiasa mengekalkannya dalam kedudukan yang sama pada skrin.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/688283.html" title="Apakah susun atur susun atur?" 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/170875820510561.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah susun atur susun atur?" /> </a> <a href="https://www.php.cn/ms/faq/688283.html" title="Apakah susun atur susun atur?" class="phphistorical_Version2_mids_title">Apakah susun atur susun atur?</a> <span class="Articlelist_txts_time">Feb 24, 2024 pm 03:03 PM</span> <p class="Articlelist_txts_p">Susun atur merujuk kepada kaedah penetapan taip yang diguna pakai dalam reka bentuk web untuk menyusun dan memaparkan elemen halaman web mengikut peraturan dan struktur tertentu. Melalui reka letak yang munasabah, halaman web boleh dibuat lebih cantik dan kemas, dan mencapai pengalaman pengguna yang baik. Dalam pembangunan bahagian hadapan, terdapat banyak kaedah susun atur untuk dipilih, seperti susun atur meja tradisional, susun atur terapung, susun atur kedudukan, dll. Walau bagaimanapun, dengan promosi HTML5 dan CSS3, teknologi susun atur responsif moden, seperti susun atur Flexbox dan susun atur Grid, telah menjadi</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/637570.html" title="klien dan pelayan win11 tidak menyokong ssl yang biasa digunakan" 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/170383018189055.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="klien dan pelayan win11 tidak menyokong ssl yang biasa digunakan" /> </a> <a href="https://www.php.cn/ms/faq/637570.html" title="klien dan pelayan win11 tidak menyokong ssl yang biasa digunakan" class="phphistorical_Version2_mids_title">klien dan pelayan win11 tidak menyokong ssl yang biasa digunakan</a> <span class="Articlelist_txts_time">Dec 29, 2023 pm 02:09 PM</span> <p class="Articlelist_txts_p">Jika pelanggan mahupun pelayan tidak melaksanakan teknologi penyulitan SSL, sangat mudah untuk maklumat dicuri oleh penyerang perantara semasa proses penghantaran, sekali gus menyebabkan risiko serius kepada keselamatan data. Atas sebab ini, langkah-langkah yang sepadan harus diambil dengan segera untuk memastikan keselamatan data sensitif anda boleh merujuk kepada kaedah berikut untuk beroperasi. Pelanggan dan pelayan win11 tidak menyokong SSL1 yang biasa digunakan semasa menaik taraf dan mengubah sistem pelayan, anda boleh memberi keutamaan untuk menaik taraf dan mengoptimumkan sistem pelayan, atau menambah komponen yang diperlukan untuk memastikan ia dapat menyokong protokol SSL terkini dengan lancar. . 2. Gunakan sijil SSL Anda boleh membeli dan menggunakan sijil SSL yang dikeluarkan oleh pusat pensijilan berprestij, dan memasangnya dalam pelayan untuk mencapai fungsi ini. 3. Dayakan protokol SSL</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/636492.html" title="Adakah Tong Kitar Semula Kucing tidak serasi dengan sistem pengendalian win11?" 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/000/164/170365285361543.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah Tong Kitar Semula Kucing tidak serasi dengan sistem pengendalian win11?" /> </a> <a href="https://www.php.cn/ms/faq/636492.html" title="Adakah Tong Kitar Semula Kucing tidak serasi dengan sistem pengendalian win11?" class="phphistorical_Version2_mids_title">Adakah Tong Kitar Semula Kucing tidak serasi dengan sistem pengendalian win11?</a> <span class="Articlelist_txts_time">Dec 27, 2023 pm 12:54 PM</span> <p class="Articlelist_txts_p">Baru-baru ini, terdapat tong kitar semula kucing yang sangat popular menyokong win11? Adakah Tong Kitar Semula Kucing menyokong win11. Jawapan: Tong Kitar Semula Kucing menyokong win11? Walau bagaimanapun, win11 tidak menyokong kesan animasi, hanya ikon yang boleh diubah. Tutorial penetapan tong kitar semula kucing Win11: 1. Pertama, klik kanan pada desktop dan buka "Peribadi" 2. Kemudian buka tetapan "Tema" di sebelah kanan. 3. Kemudian buka "Desktop Icon Settings" di bawah tetapan yang berkaitan 4. Kemudian pilih "Recycle Bin (full)" dan klik "Change Icon" 5. Selepas dibuka, klik "Browse" 6. Cari balasan kucing yang kami muat turun pada komputer</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/656276.html" title="Optimumkan reka bentuk bar navigasi bawah untuk meningkatkan fungsi kedudukan tetap aplikasi mudah alih" 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/170571488170585.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Optimumkan reka bentuk bar navigasi bawah untuk meningkatkan fungsi kedudukan tetap aplikasi mudah alih" /> </a> <a href="https://www.php.cn/ms/faq/656276.html" title="Optimumkan reka bentuk bar navigasi bawah untuk meningkatkan fungsi kedudukan tetap aplikasi mudah alih" class="phphistorical_Version2_mids_title">Optimumkan reka bentuk bar navigasi bawah untuk meningkatkan fungsi kedudukan tetap aplikasi mudah alih</a> <span class="Articlelist_txts_time">Jan 20, 2024 am 09:41 AM</span> <p class="Articlelist_txts_p">Pengoptimuman kedudukan tetap bagi reka bentuk bar navigasi bawah bagi aplikasi mudah alih memerlukan contoh kod khusus Dengan populariti telefon pintar dan perkembangan pesat aplikasi mudah alih, orang ramai semakin menggunakan telefon bimbit untuk pelbagai aktiviti, seperti bersosial, membeli-belah, belajar dan hiburan. . Untuk memudahkan operasi dan navigasi pengguna, aplikasi mudah alih biasanya mereka bentuk bar navigasi bawah. Walau bagaimanapun, bar navigasi bawah akan muncul secara berbeza pada saiz skrin dan peranti yang berbeza, jadi kami perlu menggunakan kaedah penentududukan tetap untuk mengoptimumkan reka bentuk bar navigasi bawah untuk memastikan konsistensi dan mesra pengguna pada peranti yang berbeza.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/656176.html" title="Tingkatkan kesan kedudukan tetap bagi fungsi bar navigasi atas pada platform media sosial" 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/170571152478168.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tingkatkan kesan kedudukan tetap bagi fungsi bar navigasi atas pada platform media sosial" /> </a> <a href="https://www.php.cn/ms/faq/656176.html" title="Tingkatkan kesan kedudukan tetap bagi fungsi bar navigasi atas pada platform media sosial" class="phphistorical_Version2_mids_title">Tingkatkan kesan kedudukan tetap bagi fungsi bar navigasi atas pada platform media sosial</a> <span class="Articlelist_txts_time">Jan 20, 2024 am 08:45 AM</span> <p class="Articlelist_txts_p">Kedudukan Tetap Meningkatkan Kefungsian Bar Navigasi Teratas pada Platform Media Sosial Pada zaman media sosial hari ini, mempunyai bar navigasi teratas yang berkuasa adalah penting untuk platform media sosial. Bar navigasi teratas bukan sahaja menyediakan pengguna dengan kemudahan menavigasi tapak web, tetapi juga meningkatkan pengalaman pengguna. Artikel ini menerangkan cara untuk meningkatkan fungsi bar navigasi teratas platform media sosial dengan kedudukan tetap dan menyediakan contoh kod khusus. 1. Mengapa bar navigasi atas harus diletakkan dengan tetap? Kedudukan tetap membolehkan bar navigasi atas sentiasa berada di bahagian atas skrin, tidak kira pengguna menatal ke bawah</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> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745297923"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); 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> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>