Pengantar konten terkait struktur dan kinerja
Struktur HTML, kinerja css, perilaku javascript, tata letak halaman web harus mempertimbangkan prinsip pemisahan struktur, kinerja, dan perilaku. Pertama fokus pada struktur dan semantik, lalu pertimbangkan CSS, JS, dll. untuk memfasilitasi pemeliharaan dan analisis selanjutnya...
Gagasan pemisahan struktur dan ekspresi
Ide dan metode produksi pengembang junior: div disarangkan lapis demi lapis; Ide dan metode produksi pengembang perantara: hapus div yang berlebihan dan sederhanakan; Ide dan metode produksi pengembang tingkat lanjut: sederhanakan struktur html semaksimal mungkin, lalu Gunakan css untuk mengaturnya guna mengurangi kesesuaian antara html dan css. meluap:
nilai default yang terlihat. Konten tidak akan dipangkas dan akan ditampilkan di luar kotak elemen.
konten tersembunyi dipangkas dan konten lainnya tidak terlihat.
gulir Konten akan dipangkas, tetapi browser akan menampilkan bilah gulir untuk melihat konten lainnya.
otomatis Jika konten dipangkas, browser menampilkan bilah gulir untuk melihat konten lainnya.
mewarisi menentukan bahwa nilai atribut overflow harus diwarisi dari elemen induk.
text-indentTeks diindentasi ke posisi target, dan tidak perlu menambahkan label tambahan pada teks. Kurangi kode yang berlebihan
Saat Anda mendapatkan gambar desain web, pertama-tama perhatikan konten teks halaman web dan hubungan antar modul konten.
Fokus pada penulisan kode HTML semantik daripada terlalu memikirkan gaya gambar desain.
Tunggu hingga html ditulis sesuai dengan isinya, lalu pertimbangkan penerapan gayanya.
Lengkapi efek visual yang dibutuhkan oleh gambar desain tanpa mengubah struktur yang ada.
Margin bisa menjadi nilai negatif, dan melalui nilai negatif, konten bisa dipindahkan! Mencapai gerakan dalam empat arah.
Dalam struktur (HTML) dan gaya (css), Anda dapat menulis konten dalam HTML terlebih dahulu, lalu menggunakan margin untuk memindahkan posisi guna mencapai penyusunan huruf, mengurangi sambungan antara gaya dan struktur, dan mengurangi kode
Pengupasan dan ringkasan halaman web
Minimalkan ketergantungan html pada css
Skinning halaman web: struktur html yang sama, gaya css berbeda
Di bawah ini adalah beberapa sharing dari mahasiswa Gray Niu WEB
Ketika kami pertama kali berhubungan dengan produksi halaman web, kami mengetahui bahwa html mewakili struktur, css mewakili gaya, dan javascript mewakili perilaku. Dalam produksi halaman web, kami selalu menekankan prinsip pemisahan struktur dan kinerja ke HTML. Selain itu, pemisahannya adalah Apakah Anda berbicara tentang menulisnya dalam file yang berbeda dan mereferensikannya? Tentu saja tidak. Dari pembelajaran di sini saya belajar bahwa pemisahan bukan hanya sebuah metode tetapi juga sebuah ide. Singkatnya, itu adalah koordinat dua dimensi, dimana sumbu x melambangkan perkembangan teknologi dan sumbu y melambangkan halaman web kebutuhan produksi. Pemisahan Selesai sesuai perkembangan teknologi dan kebutuhan produksi halaman web kami!
Misalnya: Misalnya, jika kita membangun sebuah rumah, HTML setara dengan struktur rumah, dan CSS setara dengan dekorasi selanjutnya. Semua halaman web didasarkan pada satu efek. Saat kita menjelajahi halaman web, gayanya akan berbeda tergantung pada renderingnya, jadi kami Ada berbagai jenis halaman untuk dijelajahi, jadi bagaimana cara kami menata halaman web? Pertama-tama, jangan terlalu memikirkan gaya CSS, cobalah membuat struktur HTML kita masuk akal, ringkas, dan semantik, lalu tambahkan dan tingkatkan gaya CSS!
Ketika kami mendapatkan halaman tersebut, produser yang berbeda memiliki tautan berbeda ke struktur dan gaya Berdasarkan kedalaman pemahaman yang berbeda tentang struktur dan gaya, untuk sementara dibagi menjadi tiga tingkatan berbeda: primer, menengah, dan lanjutan;
Misalnya, kotak dialog umum memiliki tiga unit. Pertama, kita perlu menyelesaikan satu unit dan melakukan CTRL+V pada halaman lainnya. Jika produser junior mendapatkan halamannya, dia biasanya membaginya sesuai dengan kotak di atas div berisi 2 div kecil, mengambang di kiri dan kanan, img di kiri, p, h dan tag lainnya di kanan. Sedangkan untuk faktor waktu diimplementasikan melalui positioning atribut position.
<div kelas="demo1">
<div kelas="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div kelas="fr">
<span>10 menit yang lalu</span>
<h6>Saat kita melakukan perjalanan semakin jauh, tidak ada lagi buku</h6>
<p>
Apakah Anda memiliki banyak pikiran yang tertinggal di benak Anda setiap hari dan merasa sangat sibuk? Jika dipikir-pikir baik-baik, Anda tidak tahu apa yang sebenarnya Anda sibukkan. Hanya dengan mengembangkan kebiasaan baik, menjaga diri dengan baik, dan mengikuti impian Anda, bisakah Anda Meningkatkan produktivitas, yang juga berarti meningkatkan hubungan Anda dengan keluarga dan teman, karena ketika Anda berubah, segala sesuatu di sekitar Anda berubah. Kebiasaan apa dari orang-orang yang sangat efektif yang patut dipelajari?
</p>
</div>
</div>
<div kelas="demo2">
<img src="../../images/head02.jpg" alt="">
<div kelas="fr">
<span>10 menit yang lalu</span>
<h6>Saat kita melakukan perjalanan semakin jauh, tidak ada lagi buku</h6>
<p>
Apakah Anda memiliki banyak pikiran yang tertinggal di benak Anda setiap hari dan merasa sangat sibuk? Jika dipikir-pikir baik-baik, Anda tidak tahu apa yang sebenarnya Anda sibukkan. Hanya dengan mengembangkan kebiasaan baik, menjaga diri dengan baik, dan mengikuti impian Anda, bisakah Anda Meningkatkan produktivitas, yang juga berarti meningkatkan hubungan Anda dengan keluarga dan teman, karena ketika Anda berubah, segala sesuatu di sekitar Anda berubah. Kebiasaan apa dari orang-orang yang sangat efektif yang patut dipelajari?
</p>
</div>
</div>
<div kelas="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">10 menit yang lalu</span>
<h6>Saat kita melakukan perjalanan semakin jauh, tidak ada lagi buku</h6>
<p>
Apakah Anda memiliki banyak pikiran yang tertinggal di benak Anda setiap hari dan merasa sangat sibuk? Jika dipikir-pikir baik-baik, Anda tidak tahu apa yang sebenarnya Anda sibukkan. Hanya dengan mengembangkan kebiasaan baik, menjaga diri dengan baik, dan mengikuti impian Anda, bisakah Anda Meningkatkan produktivitas, yang juga berarti meningkatkan hubungan Anda dengan keluarga dan teman, karena ketika Anda berubah, segala sesuatu di sekitar Anda akan berubah. Kebiasaan apa dari orang-orang yang sangat efektif yang patut dipelajari?
</p>
</div>
</div>=>3 demo berbeda mewakili 3 struktur halaman berbeda ||. Tampilan bagian publik dari struktur halaman penulisan:
/*mengatur ulang*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pra,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0; padding: 0;gaya daftar: tidak ada;font:12px/1.5 "Arial", "sans-serif", "Microsoft Yahei", "宋体", "Tahoma"}
/*Gaya publik*/
.demo1,.demo2{
lebar: 600 piksel;
margin-atas: 20 piksel;
meluap: tersembunyi;
margin-bawah: 20 piksel;
}
P{
perataan teks: ratakan;
indentasi teks: 2em;
tinggi garis: 24 piksel;
}=>Produser Junior css
/*utama*/
.demo1{
lebar: 600 piksel;
margin-atas: 20 piksel;
meluap: tersembunyi;
}
.demo1 .fl{
lebar: 100 piksel;
mengapung: kiri;
}
.demo1 .fl img{
margin-kiri: 20px;
bantalan: 10 piksel;
batas: 1px padat #ccc;
}
.demo1 .fr{
lebar:488px;
mengapung: benar;
batas: 1px padat #ccc;
posisi: relatif;
bantalan: 5 piksel;
}
.demo1 .fr rentang{
posisi: mutlak;
kanan:18 piksel;
atas: 5 piksel;
}=>Css pengembang perantara memiliki struktur yang disederhanakan dibandingkan dengan tingkat dasar, menghilangkan div di sebelah kiri dan mempertahankan bagian di sebelah kanan;
/*intermediat*/
.demo2 .fr{
lebar:488 piksel;
mengapung: benar;
batas: 1px padat #ccc;
posisi: relatif;
bantalan: 5 piksel;
}
.demo2 .fr rentang{
posisi: mutlak;
kanan:18 piksel;
atas: 5 piksel;
}
.demo2 gambar{
margin-kiri: 20px;
bantalan: 10 piksel;
batas: 1px padat #ccc;
}=>Produser css tingkat lanjut: pertama tulis kode sesuai dengan struktur dan semantik, lalu atur gaya css, yang mengurangi kesesuaian antara css dan html (pergerakan dokumen, pergerakan gambar keluar, atribut pemosisian)
/*canggih*/
.demo3{
batas: 1px padat #ccc;
lebar: 488 piksel;
margin-kiri: 100 piksel;
bantalan: 5 piksel;
posisi: relatif;
}
.demo3 gambar{
mengapung: kiri;
margin:-6 piksel 0 0 -86 piksel;
bantalan: 10 piksel;
batas: 1px solid #CCCCCC;
}
.demo3 rentang{
posisi: mutlak;
atas: 10 piksel;
kanan: 20 piksel;
}Kesimpulan: Saat Anda mendapatkan gambar desain web, Anda harus mengamati terlebih dahulu hubungan antara teks dan modul konten, fokus pada penulisan kode HTML semantik, dan jangan terlalu memikirkan gaya tata letak ruangan desain, tunggu sampai kode HTML selesai diedit Setelah selesai, pertimbangkan bagaimana menerapkannya, dan berusaha untuk menyelesaikan efek visual yang diperlukan oleh karya seni desain tanpa mengubah struktur halaman yang ada! (Klik untuk mengunduh struktur lengkap dan kode prinsip kinerja tata letak halaman web sederhana)
Di atas adalah detail isi berbagi struktur dan prinsip kinerja tata letak halaman web sederhana. Untuk informasi lebih lanjut tentang struktur dan prinsip kinerja tata letak halaman web sederhana, harap perhatikan artikel terkait lainnya di downcodes.com!