Rumah >hujung hadapan web >tutorial js >Cara membuat susun atur blog responsif menggunakan HTML, CSS dan jQuery
Cara membuat susun atur blog responsif menggunakan HTML, CSS dan jQuery
Dalam era Internet moden, mempunyai reka letak blog yang responsif Penting untuk kejayaan laman web anda. Reka bentuk responsif memastikan blog anda dipaparkan dengan baik pada peranti yang berbeza, memberikan pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta reka letak blog responsif yang mudah dan praktikal, dan menyediakan contoh kod khusus untuk rujukan.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>My Blog</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section class="post"> <h2>Post Title</h2> <p>Post content goes here...</p> </section> <!-- 更多博客文章 --> </main> <footer> <p>© 2022 My Blog. All rights reserved.</p> </footer> <script src="jquery.min.js"></script> <script src="script.js"></script> </body> </html>
/* Reset 样式 */ body, h1, h2, p, ul, li { margin: 0; padding: 0; } /* 布局样式 */ header { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style: none; } nav ul li { display: inline-block; margin-right: 10px; } main { margin: 20px; } .post { margin-bottom: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } /* 响应式样式 */ @media screen and (max-width: 600px) { header h1 { font-size: 24px; } nav ul li { display: block; margin: 10px 0; } }
$(document).ready(function() { // 点击菜单按钮时切换导航栏的显示状态 $('.menu-btn').click(function() { $('.nav ul').toggleClass('active'); }); // 当窗口大小改变时更新响应式样式 $(window).resize(function() { if ($(window).width() > 600) { $('.nav ul').removeClass('active'); } }); });
Dalam contoh kod di atas, kami menggunakan acara click
函数来切换导航栏的显示状态,并使用resize
jQuery untuk mengemas kini gaya responsif untuk memastikan saiz tetingkap berubah Gaya daripada bar navigasi dipaparkan dengan betul.
Pada ketika ini, kami telah menyiapkan susun atur blog responsif yang mudah dan praktikal. Anda boleh menambah lebih banyak ciri dan gaya mengikut keperluan anda. Saya harap artikel ini dapat membantu anda memahami cara menggunakan HTML, CSS dan jQuery untuk mencipta reka letak blog responsif dan membawa pengalaman pengguna yang lebih baik ke tapak web blog anda.
Atas ialah kandungan terperinci Cara membuat susun atur blog responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!