6个div+css页面布局入门教程和使用实例总结-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

6个div+css页面布局入门教程和使用实例总结

黄舟

Jun 05, 2017 am 11:54 AM

DIV+CSS是WEB设计标准，它是一种网页的布局方法，它可以实现网页页面内容与表现相分离，在Web开发中，DIV+CSS布局页面也是各种各样网页的样式表现元素之一，那么如何实现div+css页面布局呢？今天就给大家来总结下关于div+css页面布局！

div+css入门教程:

1.Div CSS布局入门教程

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

2.HTML div css 强制换行不换行

你好朋友朋友朋友我为什么不能看到效果啊,若是p嵌套，要使内层p根据内容自动换行，则可只设置外层的p宽，和 white-spance:nowrap即可,如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

3.div css background背景

背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性，甚至包括background-attachment，还为我们介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。

div+css使用实例;

1.div css表单布局的五个小技巧

p css表单布局的五个小技巧可以帮助你更灵活的控制表单，使页面更加满意。　　在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到中，一切就会变得简单多了!</p> <p><span style="font-size: 16px;">2.<a href="http://www.php.cn/div-tutorial-283624.html" target="_blank">DIV CSS布局实例：CSS标签切换代码 </a></span></p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/958/592/189/1496634725369505.png" class="lazy" title="1496634725369505.png" alt="200.png" style="max-width:90%" style="max-width:90%"></p> <p>DIV CSS布局实例：CSS标签切换代码，通俗说就是滑动门的制作教程，很不错的实例，希望对你学习CSS布局有帮助。</p> <p><span style="font-size: 16px;">3.<a href="http://www.php.cn/div-tutorial-282949.html" target="_blank">DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容</a></span></p> <p>在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！</p> <p><span style="font-size: 16px;"></span><br></p> <p><span style="color: rgb(255, 0, 0); font-size: 18px;"><strong>div+css相关问答：</strong></span></p> <p><span style="font-size: 16px;">1.<a href="http://www.php.cn/wenda/67181.html" target="_blank">html5 - 这效果用div+css怎么做？ </a></span></p> <p><span style="font-size: 16px;">2.<a href="http://www.php.cn/wenda/3533.html" target="_blank">div+css怎么强制换行和不换行？ </a></span></p> <p><span style="font-size: 16px;">3.<a href="http://www.php.cn/wenda/3128.html" target="_blank">怎样用html5的div+css布局进行图文混排 </a></span></p> <p><span style="font-size: 18px;"><strong><span style="color: rgb(255, 0, 0);">【相关文章推荐】：</span></strong></span></p> <p><span style="font-size: 16px;">1.<a href="http://www.php.cn/css-tutorial-363842.html" target="_blank">html+css 制作各种样式下拉菜单总结</a></span></p> <p><span style="font-size: 16px;">2.<a href="http://www.php.cn/css-tutorial-363744.html" target="_blank">div居中：最全的div居中方法总结</a></span></p> <p><span style="font-size: 16px;">3.<a href="http://www.php.cn/css-tutorial-363819.html" target="_blank">div滚动条的颜色设置以及一些问题的总结</a></span></p><p>Atas ialah kandungan terperinci 6个div+css页面布局入门教程和使用实例总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Kenyataan</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><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Artikel Berkaitan<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798225.html" title="Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494725297090.jpg?x-oss-process=image/resize,p_40" alt="Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798225.html" title="Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?" class="phphistorical_Version2_mids_title">Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:34 AM</span><p class="Articlelist_txts_p">Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798222.html" title="Bolehkah anda bersarang @media dan @support pertanyaan?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494713126665.jpg?x-oss-process=image/resize,p_40" alt="Bolehkah anda bersarang @media dan @support pertanyaan?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798222.html" title="Bolehkah anda bersarang @media dan @support pertanyaan?" class="phphistorical_Version2_mids_title">Bolehkah anda bersarang @media dan @support pertanyaan?</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:32 AM</span><p class="Articlelist_txts_p">Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798210.html" title="Cache Cache Pantas" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494659622512.jpg?x-oss-process=image/resize,p_40" alt="Cache Cache Pantas" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798210.html" title="Cache Cache Pantas" class="phphistorical_Version2_mids_title">Cache Cache Pantas</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:23 AM</span><p class="Articlelist_txts_p">Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798208.html" title="Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494653275062.jpg?x-oss-process=image/resize,p_40" alt="Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798208.html" title="Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS" class="phphistorical_Version2_mids_title">Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:22 AM</span><p class="Articlelist_txts_p">Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798185.html" title="Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilai" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494569472042.jpg?x-oss-process=image/resize,p_40" alt="Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilai" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798185.html" title="Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilai" class="phphistorical_Version2_mids_title">Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilai</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:08 AM</span><p class="Articlelist_txts_p">Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798179.html" title="Persidangan Depan di Zürich" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494539872257.jpg?x-oss-process=image/resize,p_40" alt="Persidangan Depan di Zürich" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798179.html" title="Persidangan Depan di Zürich" class="phphistorical_Version2_mids_title">Persidangan Depan di Zürich</a><span class="Articlelist_txts_time">Apr 18, 2025 am 11:03 AM</span><p class="Articlelist_txts_p">Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798170.html" title="Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494509287332.jpg?x-oss-process=image/resize,p_40" alt="Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798170.html" title="Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare" class="phphistorical_Version2_mids_title">Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare</a><span class="Articlelist_txts_time">Apr 18, 2025 am 10:58 AM</span><p class="Articlelist_txts_p">Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798161.html" title="Membuat Laluan Dinamik dalam Aplikasi NUXT" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174494479051056.jpg?x-oss-process=image/resize,p_40" alt="Membuat Laluan Dinamik dalam Aplikasi NUXT" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798161.html" title="Membuat Laluan Dinamik dalam Aplikasi NUXT" class="phphistorical_Version2_mids_title">Membuat Laluan Dinamik dalam Aplikasi NUXT</a><span class="Articlelist_txts_time">Apr 18, 2025 am 10:53 AM</span><p class="Articlelist_txts_p">Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil</p></div></div><a href="https://m.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat AI Hot</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.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://m.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.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://m.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.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://m.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.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://m.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>Menjana ai hentai secara percuma.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Artikel Panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796781206.html" title="Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)" class="phpgenera_Details_mainR4_bottom_title">Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 bulan yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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>4 minggu yang lalu</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat panas</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1557" title="mPDF" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/003/169206948656118.png" src="/static/imghw/default1.png" alt="mPDF" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1557" title="mPDF" class="phpmain_tab2_mids_title"><h3>mPDF</h3></a><p>mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1527" title="VSCode Windows 64-bit Muat Turun" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e2151b57e8e3927.png" src="/static/imghw/default1.png" alt="VSCode Windows 64-bit Muat Turun" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1527" title="VSCode Windows 64-bit Muat Turun" class="phpmain_tab2_mids_title"><h3>VSCode Windows 64-bit Muat Turun</h3></a><p>Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1492" title="EditPlus versi Cina retak" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e21527e79622256.png" src="/static/imghw/default1.png" alt="EditPlus versi Cina retak" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1492" title="EditPlus versi Cina retak" class="phpmain_tab2_mids_title"><h3>EditPlus versi Cina retak</h3></a><p>Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.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><div class="phpgenera_Details_mainR3_more"><a href="https://m.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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Topik panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7564</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1386</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>87</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>61</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>28</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>99</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/faq/zt">Tunjukkan Lagi</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></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' 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> 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> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>