Membina Laman Web Responsif Pertama Anda dengan HTML dan CSS-tutorial css-php.cn

Building Your First Responsive Website with HTML and CSS

Membuat tapak web responsif ialah kemahiran penting untuk mana-mana pembangun bahagian hadapan. Tapak web responsif melaraskan reka letak dan kandungannya berdasarkan peranti dan saiz skrin, memastikan pengalaman pengguna yang hebat merentas semua peranti. Dalam artikel ini, kami akan membimbing anda melalui proses membina tapak web responsif asas menggunakan HTML dan CSS.

Prasyarat

Sebelum anda bermula, anda harus mempunyai pemahaman asas tentang HTML dan CSS. Kebiasaan dengan CSS Flexbox dan pertanyaan media juga akan memberi manfaat.

Langkah 1: Menyediakan Projek Anda

Mulakan dengan mencipta folder projek baharu dan menambah fail berikut:

index.html: Fail HTML utama.
styles.css: Fail CSS untuk menggayakan tapak web.

Langkah 2: Menstrukturkan HTML Anda

Buka index.html dan tambahkan struktur HTML asas yang anda inginkan ia boleh menjadi apa sahaja:

     Responsive Website  
   My Responsive Website
   Home
 About
 Services
 Contact
 
 
 
   Welcome to My Website
 This is a simple responsive website built with HTML and CSS.
 
  About Us
 We provide excellent web development services.
 
  Our Services
 We offer a wide range of web development services.
 
  Contact Us
 Feel free to reach out to us for any inquiries.
 
 
  © 2024 My Responsive Website

Salin selepas log masuk

Langkah 3: Menggayakan Laman Web Anda

Seterusnya, buka styles.css fail dan mulakan dengan menambah beberapa gaya asas:

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; } header { background: #333; color: #fff; padding: 1rem 0; } header h1 { text-align: center; } nav ul { display: flex; justify-content: center; list-style: none; } nav ul li { margin: 0 1rem; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 2rem; } section { margin-bottom: 2rem; } footer { background: #333; color: #fff; text-align: center; padding: 1rem 0; position: fixed; width: 100%; bottom: 0; }

Salin selepas log masuk

Langkah 4: Jadikan Ia Responsif

Untuk menjadikan tapak web responsif, kami akan menggunakan pertanyaan media. Ini membolehkan kami menggunakan gaya berbeza berdasarkan saiz skrin. Tambahkan Pertanyaan media berikut pada styles.css:

@media (max-width: 768px) { nav ul { flex-direction: column; align-items: center; } nav ul li { margin: 0.5rem 0; } main { padding: 1rem; } } @media (max-width: 480px) { header h1 { font-size: 1.5rem; } nav ul li { margin: 0.25rem 0; } main { padding: 0.5rem; } }

Salin selepas log masuk

Langkah 5: Menguji Laman Web Anda

Buka index.html dalam penyemak imbas web dan ubah saiz tetingkap penyemak imbas untuk melihat cara susun atur menyesuaikan untuk saiz skrin yang berbeza. Anda seharusnya melihat susunan menu navigasi secara menegak dan pelapik di sekeliling kandungan berkurangan apabila lebar skrin berkurangan.

Akhirnya

Anda kini telah membina tapak web responsif yang mudah menggunakan HTML dan CSS! Contoh ini merangkumi asas penstrukturan halaman web dan menggunakan pertanyaan media untuk mencipta reka bentuk responsif. Sambil anda memperoleh lebih banyak pengalaman, anda boleh meneroka teknik lanjutan seperti Grid CSS, Flexbox dan imej responsif untuk mencipta reka letak yang lebih kompleks dan dinamik.

Nantikan!!!

Atas ialah kandungan terperinci Membina Laman Web Responsif Pertama Anda dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!