Rumah hujung hadapan web tutorial css Masalah yang dihadapi dengan reka letak Insights_CSS/HTML yang sangat baik

Masalah yang dihadapi dengan reka letak Insights_CSS/HTML yang sangat baik

May 16, 2016 pm 12:12 PM

Kata Pengantar
Sebelum generasi seterusnya teknologi pembangunan WEB teknologi RIA matang, sudah tentu kita masih perlu melawan HTML. Beberapa ketika dahulu, "Pemfaktoran Semula Laman Web" sangat popular
Ini semua adalah kemajuan dan sememangnya memberi kita idea baharu. Berikut adalah ringkasan beberapa pengalaman dalam pembangunan.

Reka letak
1. Reka letak atas, bawah, kiri dan kanan
Saya baru mula belajar membuat halaman Saya menggunakan perisian DW MM, iaitu visual, supaya lebih ramai orang boleh belajar membuat web muka surat.
Saya masih ingat bahawa saya menggunakan DW semasa saya membuat halaman Seorang rakan pernah bertanya kepada saya ayat yang sama: "Apakah perbezaan antara membuat halaman web dengan lebih banyak borang atau menggunakan lebih banyak lapisan?".
Saya memberitahunya bahawa kami sebenarnya menggunakan Jadual Reka Letak-Layout dalam DW untuk melukis bingkai seluruh halaman dengan cepat, dan kemudian memperhalusinya langkah demi langkah. Membuat halaman adalah sangat pantas. Adalah disyorkan untuk menggunakan jadual Sukar untuk mengawal kedudukan menggunakan lapisan.
Sekarang apabila saya memikirkannya, ia benar-benar mengelirukan. Ha, tapi mungkin, kemajuan memerlukan proses.

"Pembinaan Semula Laman Web" Angin musim bunga bertiup, dan menggunakan lapisan untuk reka letak halaman sememangnya telah membawa idea baharu kepada pembangunan kami.
Kelebihan:
Halaman lebih jelas dan jumlah kod dikurangkan
CSS digunakan dengan lebih meluas.

Baris atas dan bawah, lapisan jelas, demo kod:











Anda boleh menggunakan kedudukan mutlak
#kepala{
kedudukan:mutlak
atas;10px;
kiri:200px; 🎜> }



Gunakan padding untuk mengawal pemisahan antara lapisan




5. Anda boleh menggunakan kurang imej menggunakan CSS


Demo susun atur halaman (kod sumber boleh dilihat, ia lebih jelas daripada susun atur JADUAL sebelumnya) :
http://davidblog.blogdriver.com/ davidblog/inc/demo_div.jpg
borang
1 Jidar dan padding borang
Dahulu, apabila memasukkan borang ke dalam halaman, saya sentiasa merasakan margin dan padding bukan 0. secara lalai, yang kadangkala mempengaruhi reka letak halaman
Anda boleh menggunakan CSS untuk menetapkannya kepada 0
bentuk{
margin:0 0 0 0px
padding:0 0 0 0px }
Anda juga boleh menentukan tag p atau tag lain

2 Pilih
aplikasi kumpulan pilihan

3 🎜>Hari ini


4. Butang
Projek sebelum ini menggunakan butang gambar. Secara beransur-ansur menemui kelemahan dalam aplikasi.
Adalah disyorkan untuk menggunakan CSS untuk mencantikkan.
Malah, CSS boleh mencapai butang yang lebih cantik


jadual
Anda masih perlu menggunakan jadual. meja sentiasa mempunyai pihak yang menang.
Sebagai contoh, sesetengah data memaparkan GRID atau strukturnya agak seragam, dan reka letak dibahagikan kepada baris dan lajur
kemahiran berkaitan jadual




Aplikasi. Ungkapan CSS Aplikasi CSS boleh mengurangkan penulisan kod

2


Markah yang patut diberi perhatian


Menu 1


Menu 2








    • Maklumat kesihatan:

    • Tinggi

      Berat

      superskrip

    Kenyataan Laman Web ini
    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

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Cara menghidupkan semula rakan sepasukan
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Mar 08, 2025 am 09:45 AM

    Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

    Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

    CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

    Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

    Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.

    Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

    Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

    Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

    API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

    Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

    Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP

    Tunjukkan, jangan beritahu Tunjukkan, jangan beritahu Mar 16, 2025 am 11:49 AM

    Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan

    Apa yang ada perintah npm? Apa yang ada perintah npm? Mar 15, 2025 am 11:36 AM

    Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.

    See all articles