关于一道div+css 网站首页布局的课后作业_html/css

Jadual Kandungan

回复讨论(解决方案)

Rumah

hujung hadapan web

html tutorial

关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

susun atur laman web muka depan

<html><head > <style> .headbox{ width:25%; height:15%; margin:0.5%; border:solid 1px; float:left; } .headbox2{ width:46.5%; height:15%; margin:0.5%; border:solid 1px; float:left; } .daohang{ clear:both; //width:inherit; width:98.5%; height:5%; margin:0.5%;; border:solid 1px; } .bodybox{ width:73%; //height:73%; height:55%; margin:0.5%; border:solid 0px; float:left; } .neikuang1{ width:49%; height:49%; margin-right:1.5%; border:solid 1px; float:left; } .neikuang2{ width:49%; height:49%; margin:0%; border:solid 1px; float:left; } .neikuang3{ width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px; float:left; } .neikuang4{ width:23%; height:49%; margin:1.5% 0 0 0; border:solid 1px; float:left; } .fukuang{ width:24.5%; height:55%; margin:0.5%; border:solid 0px; float:left; } .fu1{ width:99%; height:31%; margin:0px; border:solid 1px; float:top; } .fu2{ width:99%; height:31%; margin:3.5% 0 0 0; border:solid 1px; float:top; } .foot{ width:99%; height:10%; margin:0.5px; border:solid 1px; float:left; } </style></head> <body> <div class="headbox">框（一）</div> <div class="headbox2">框（二）</div> <div class="headbox">框（三）</div> <div class="daohang">框（导航）</div> <div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang2">栏目二</div> <div class="neikuang3">栏目三</div> <div class="neukuang3">栏目四</div> <div class="neikuang3">栏目五</div> <div class="neikuang4">栏目六</div> </div> <div class="fukuang"> <div class="fu1">栏目七</div> <div class="fu2">栏目八</div> <div class="fu2">栏目九</div> </div> <div class="foot"></div> </body></html>

Salin selepas log masuk

栏目一

栏目二

栏目三

栏目四

栏目五

栏目六

这个地方老是布局不好，求指导。

回复讨论(解决方案)

图片为要求完成的样子。

你的position 呢。float呢。

float 有的啊，position没教吧。好像不需要的样子

过前端板块问吧，毕竟那边的人专业一些。

栏目一

栏目二

栏目三

栏目四

栏目五

栏目六

.neikuang1, .neikuang2 {
float:left;
}
.neikuang1 {
width:49%;
height:49%;
margin-right:1.5%;
border:solid 1px;
}
.neikuang2 {
width:23%;
height:49%;
margin-right:1.5% 1.5% 0 0;
border:solid 1px;
}

<div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang1">栏目二</div> <div class="neikuang2">栏目三</div> <div class="neukuang2">栏目四</div> <div class="neikuang2">栏目五</div> <div class="neikuang2">栏目六</div></div>.neikuang1, .neikuang2 { float:left;}.neikuang1 { width:49%; height:49%; margin-right:1.5%; border:solid 1px;}.neikuang2 { width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px;}

Salin selepas log masuk

相同的div 就用一个class 你这个css代码太冗余了

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

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

4 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

4 minggu yang lalu By DDD

Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7381

Tutorial Java

1628

Tutorial CakePHP

1357

Tutorial Laravel

1267

Tutorial PHP

1216

Tunjukkan Lagi

Related knowledge

Adakah terdapat laman web untuk mempelajari bahasa C? Jan 30, 2024 pm 02:38 PM

Laman web untuk mempelajari bahasa C: 1. Laman Web Bahasa C; 3. Forum Bahasa C 6. Tianji.com; 51 Rangkaian belajar kendiri; 9. Likou; Pengenalan terperinci: 1. Laman web bahasa C bahasa Cina, yang merupakan laman web khusus untuk menyediakan bahan pembelajaran bahasa C untuk pemula Ia kaya dengan kandungan, termasuk tatabahasa asas, petunjuk, tatasusunan, fungsi, struktur dan modul lain; Ini adalah laman web pembelajaran pengaturcaraan yang komprehensif dan banyak lagi.

Bagaimana untuk menyediakan halaman utama Google Chrome Mar 02, 2024 pm 04:04 PM

Bagaimana untuk menyediakan halaman utama Google Chrome? Google Chrome ialah perisian penyemak imbas web yang paling popular hari ini. dan sesetengah orang suka menetapkan halaman utama sebagai enjin carian lain, jadi di manakah ia harus ditetapkan? Seterusnya, editor akan membawakan anda kaedah pantas untuk menyediakan halaman utama Google Chrome saya harap ia boleh membantu anda. Cara cepat menetapkan halaman utama Google Chrome 1. Buka Google Chrome (seperti yang ditunjukkan dalam gambar). 2. Klik butang menu di penjuru kanan sebelah atas antara muka (seperti yang ditunjukkan dalam gambar). 3. Pilih pilihan "Tetapan" (seperti yang ditunjukkan dalam gambar). 4. Dalam menu tetapan, cari "Enjin Carian" (seperti

Cara menukar tapak web anda kepada apl Mac kendiri Oct 12, 2023 pm 11:17 PM

Dalam macOS Sonoma dan Safari 17, anda boleh menukar tapak web menjadi "apl web," yang boleh diletakkan dalam dok Mac anda dan boleh diakses seperti mana-mana aplikasi lain tanpa membuka penyemak imbas. Baca terus untuk mengetahui cara ia berfungsi. Terima kasih kepada pilihan baharu dalam penyemak imbas Safari Apple, kini anda boleh menukar mana-mana tapak web di Internet yang anda kerap lawati menjadi "apl web" kendiri yang tinggal dalam dok Mac anda dan sedia untuk anda akses pada bila-bila masa. Apl web berfungsi dengan Kawalan Misi dan Pengurus Peringkat seperti mana-mana apl, dan juga boleh dibuka melalui Launchpad atau SpotlightSearch. Bagaimana untuk menukar mana-mana laman web menjadi

Panduan untuk menyelesaikan salah jajaran halaman web WordPress Mar 05, 2024 pm 01:12 PM

Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan

Cara membuat susun atur karusel responsif menggunakan HTML dan CSS Oct 20, 2023 pm 04:24 PM

Cara membuat reka letak karusel responsif menggunakan HTML dan CSS Karusel ialah elemen biasa dalam reka bentuk web moden. Ia boleh menarik perhatian pengguna, memaparkan berbilang kandungan atau imej, dan bertukar secara automatik. Dalam artikel ini, kami akan memperkenalkan cara membuat reka letak karusel responsif menggunakan HTML dan CSS. Pertama, kita perlu mencipta struktur HTML asas dan menambah gaya CSS yang diperlukan. Berikut ialah struktur HTML ringkas: <!DOCTYPEhtml&g

Kemahiran aplikasi fleksibel atribut kedudukan dalam H5 Dec 27, 2023 pm 01:05 PM

Bagaimana untuk menggunakan atribut kedudukan secara fleksibel dalam H5 Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5.

Robot ETF (562500) mungkin membuka peluang susun atur yang baik kerana ia telah ditarik balik selama 3 hari berturut-turut! Dec 01, 2023 pm 04:01 PM

Pada awal dagangan pada 1 Disember 2023, tiga indeks saham utama dibuka lebih rendah. Robot ETF (562500) mula berdagang mengiring selepas jatuh pada awal sesi. Sehingga 10:20, Robot ETF (562500) jatuh 0.92%, dengan lebih daripada 60 daripada 82 pegangan jatuh. Teknologi Daheng dan Teknologi Shitou jatuh lebih daripada 5%, dan Teknologi Sukron, Perisikan Keda, Teknologi Xianhui dan Teknologi Hongxun jatuh lebih daripada 3%. Pada awal dagangan hari ini, Robot ETF (562500) telah membetulkan selama tiga hari berturut-turut. Mengimbas kembali keadaan pada bulan lalu, Robot ETF (562500) hanya mempunyai satu pembetulan selama tiga hari berturut-turut, dan kemudian membawa kepada lapan arah aliran positif berturut-turut. Penarikan balik ini mungkin merupakan peluang susun atur yang baik berikutan pengumuman oleh jabatan berkaitan pada awal November.

Bagaimana untuk menyemak pautan mati di tapak web anda Oct 30, 2023 am 09:26 AM

Kaedah untuk menyemak pautan mati di tapak web termasuk menggunakan alat pautan dalam talian, menggunakan alat juruweb, menggunakan fail robots.txt dan menggunakan alat pembangun penyemak imbas. Pengenalan terperinci: 1. Gunakan alat pautan dalam talian Terdapat banyak alat pengesan pautan mati dalam talian, seperti LinkDeath, LinkDefender dan Xenu secara automatik boleh mengesan pautan mati dalam tapak web sebagai Alat Juruweb Google, Alat Juruweb Baidu, dsb., semuanya menyediakan fungsi pengesanan pautan mati dan sebagainya.

See all articles