hujung hadapan web
html tutorial
Cara membuat susun atur blog responsif menggunakan HTML dan CSS
Cara membuat susun atur blog responsif menggunakan HTML dan CSS
Cara membuat susun atur blog responsif menggunakan HTML dan CSS
Pada zaman Internet sekarang, blog telah menjadi cara orang ramai berkongsi ilmu , pengalaman dan cerita platform penting. Mereka bentuk blog yang menarik dan responsif akan membolehkan kandungan anda dipaparkan dengan lebih baik pada saiz dan peranti yang berbeza, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak blog responsif, sambil memberikan contoh kod khusus.
1. Struktur HTML
Pertama sekali, kita perlu membina struktur HTML asas blog. Berikut ialah susun atur blog yang ringkas:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的博客</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">文章</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
</section>
<aside>
<h3>侧边栏</h3>
<ul>
<li>最新文章</li>
<li>热门文章</li>
<li>相关链接</li>
</ul>
</aside>
</main>
<footer>
版权所有 © 2021 我的博客
</footer>
</body>
</html>Di atas ialah struktur susun atur blog asas, yang merangkumi pengepala, nav, utama, bahagian, artikel, teg tepi dan pengaki.
2. Gaya CSS
Seterusnya, kita perlu menambah beberapa gaya CSS pada blog untuk menjadikannya reka letak yang menarik dan responsif. Berikut ialah contoh helaian gaya ringkas:
/* style.css */
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1, h2, h3 {
color: #333;
}
a {
text-decoration: none;
color: #333;
}
/* 布局样式 */
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-left: 10px;
}
main {
display: flex;
flex-wrap: wrap;
}
section {
flex: 3;
padding: 20px;
}
section article {
margin-bottom: 20px;
}
aside {
flex: 1;
background-color: #f2f2f2;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 响应式样式 */
@media (max-width: 768px) {
main {
flex-direction: column;
}
section, aside {
flex: 1;
}
}
Helaian gaya di atas mengandungi gaya global, gaya reka letak dan gaya responsif.
Gaya global menetapkan fon halaman web, mengalih keluar garis bawah lalai pautan dan menetapkan warna pautan. Gaya reka letak menetapkan gaya pengepala, nav, utama, bahagian, artikel, ketepikan dan pengaki, termasuk warna latar belakang, padding, penjajaran teks, dsb. Gaya responsif menetapkan pelarasan reka letak pada skrin kecil (lebar kurang daripada 768px) melalui pertanyaan media. Pada skrin kecil, kandungan utama dan bar sisi akan disusun secara menegak.
3. Ringkasan
Dengan contoh kod HTML dan CSS di atas, kami boleh mencipta blog yang ringkas dan responsif dengan reka letak yang responsif. Apabila pengguna mengakses blog pada peranti yang berbeza, reka letak dan tipografi akan melaraskan secara automatik mengikut perubahan dalam saiz peranti, memberikan pengalaman pengguna yang lebih baik.
Sudah tentu, contoh di atas hanyalah titik permulaan untuk susun atur blog yang mudah Anda juga boleh membuat reka bentuk yang lebih kaya dan diperibadikan mengikut keperluan dan pilihan anda. Saya harap artikel ini membantu anda membuat reka letak blog responsif. Semoga berjaya mereka bentuk blog yang mengagumkan!
Atas ialah kandungan terperinci Cara membuat susun atur blog responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara melumpuhkan elemen bentuk dalam html
Aug 30, 2025 am 08:45 AM
Untuk melumpuhkan elemen borang HTML, anda boleh menggunakan atribut kurang upaya, yang boleh menghalang interaksi pengguna dan nilai elemen tidak akan dikemukakan dengan borang tersebut. Atribut ini adalah jenis boolean dan boleh ditambah secara langsung untuk membentuk tag elemen seperti input, Textarea, Select, atau Button. Sebagai contoh, ia juga boleh dikawal secara dinamik melalui JavaScript, seperti Document.GetElementById ("MyInput"). Dilumpuhkan = benar. Jika elemen tidak dapat diedit tetapi nilai masih dihantar, anda harus menggunakan atribut readonly. Atribut kurang upaya adalah mudah dan berkesan dan disokong secara meluas.
Cara menghubungkan ke bahagian tertentu halaman menggunakan sauh dalam html
Aug 31, 2025 am 06:52 AM
Tolinktoaspecificpartofapageusinganchorsinhtml, AssignauniqueidTothetargetelement, suchas, thencreateahyperlinkwithhref = "#seksyen1" toscrolltothatsection, danforcross-pagelinking, usethefullurlurepage.html#bectra
Cara Melaksanakan Peta Imej Side Klien Asas di HTML
Aug 26, 2025 am 08:08 AM
Untuk melaksanakan pemetaan imej klien asas, anda perlu mengikuti langkah -langkah berikut: 1. Gunakan tag dengan atribut useMap, yang nilainya adalah "nama #map", seperti
Apakah aria dalam html untuk aksesibiliti?
Aug 27, 2025 am 04:57 AM
AriaisneededtoenhanceWebaccessibilityfordynamiccontentandcustomuicomponentsThatlacknativeHtmlsemantics.1) ariarolesDefineanelement'spurpose (mis., Role = "Dialog")
Cara menyelaraskan teks secara menegak dalam CSS
Aug 28, 2025 am 08:10 AM
ThemostreliablewaytoverticallyaligntextinCSSisusingFlexboxwithalign-items:center,whichworksforbothsingleandmultiplelinesoftextwithinacontainerofdefinedheight;alternatively,CSSGridwithplace-items:centerofferssimilarbenefitsforgrid-basedlayouts,whileli
Cara menggunakan tag sumber dengan video dan audio dalam html
Aug 28, 2025 am 02:42 AM
Thetagisusedtospecifymultiplemediasourceswithinorelements, memastikanbroaderbrowserercipatibility.1.itallowslistingdifferentfileFormatssothebrowsercanplaythefirstsuportedone.2.ThetypeatTributeHelpsbrowsersDetectCompativility
Cara Membuat Ruang Tidak Memecah Dalam HTML
Sep 01, 2025 am 07:40 AM
Gunakannya untuk membuat ruang pemecah garis di HTML, seperti menghalang paparan nombor dan cawangan unit; 1. Digunakan untuk mengelakkan pemecahan garis antara nama, nilai dan unit; 2. Mengekalkan format teks dalam talian; 3. Ia boleh digunakan sebagai pemegang tempat kosong, tetapi CSS disyorkan; Watak -watak ruang lain seperti, dan sebagainya sesuai untuk senario khas, tetapi dalam kebanyakan kes ia mencukupi; Berhati -hati untuk tidak menyalahgunakan susun atur, CSS harus digunakan sebaliknya, dan pelbagai tidak akan digabungkan, dan pembaca skrin dapat mengenalinya secara normal, jadi perlu digunakan dengan munasabah untuk memastikan teks dipaparkan secara koheren.
Cara Menggunakan Properti Mix-Blend-Mode di CSS
Aug 29, 2025 am 07:37 AM
Mix-Blend-Mode mengawal kaedah pencampuran kandungan elemen dan warna elemen di belakang. 1. Harus ada latar belakang (seperti gambar atau warna) untuk menunjukkan kesannya; 2. 3. Beri perhatian kepada konteks menyusun untuk mengelakkan pengasingan ibu bapa: mengasingkan daripada mencegah pencampuran; 4. Elakkan terlalu banyak dalam prestasi, terutamanya dalam unsur -unsur besar atau animasi; 5. Pelayar moden mempunyai sokongan yang baik, sesuai untuk membuat kesan teks, penapis imej, interaksi hover dan susun atur artistik. Adalah disyorkan untuk memulakan dengan membiak dan skrin dan menggabungkan latar belakang kontras tinggi untuk menguji kesannya.
