简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:50:00
asal
1039 orang telah melayarinya

要写一个HTML页面，其中有6个

，用CSS实现其中
元素布局，格式如下所示：



那么在CSS中应该怎么写了？？求高手指教


回复讨论(解决方案)

<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style>  *{margin:0px;padding:0px;}  div{border:5px solid #000;margin-top:10px;}  .dc{border:none;}  .d1,.d6{width:500px;height:80px;}  .dc div{float:left;width:200px;height:100px;}  .d3,.d5{margin-left:90px;}  .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style>
Salin selepas log masuk

经过测试，在IE7下，楼上的代码显示如图

修改如下： 

<html><head>	<style>	  *{margin:0px;padding:0px;}	  div{border:5px solid #000;margin-top:10px;}	  .dc{border:none;width:600px;}	  .d1,.d6{width:500px;height:50px;}	  .dc div{float:left;width:200px;height:100px;}	  .d3{margin-left:90px;}	  .dc .d4,.dc .d5{width:220px;}	  .d5{margin-left:50px;}	  .dc:after{display: block;content: '';clear: both;visibility: hidden; }	</style></head><body><div class="d1">div_01</div><div class="dc">	<div class="d2">div_02</div>	<div class="d3">div_03</div></div><div class="dc">	<div class="d4">div_04</div>	<div class="d5">div_05</div></div><div class="d6">div_06</div></body></html>
Salin selepas log masuk

这个很简单吧

Label berkaitan：
HTML、CSS中的网页页面布局问题
sumber：php.cn
Artikel sebelumnya：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnose Artikel seterusnya：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose
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
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Tetapan konfigurasi OAuth 2.0 Saya menggunakan phpmailer untuk menghantar mel melalui pelayan smtp.google.com tetapi kin...
daripada 2024-04-06 11:12:57
0
1
408
Muat semula paksa adalah akibat daripada mengakses laluan tidak ditentukan atau halaman ralat dalam Next.js Mengakses laluan atau halaman ralat yang tidak ditentukan menyebabkan Next.js melakukan mu...
daripada 2024-04-05 08:32:46
0
1
400
Simbol item senarai (<ul> dan <ol>) dalam nod akar tidak boleh dipaparkan dan dialih keluar dalam CSS, dan masalah limpahan-x: tersembunyi tidak boleh dialih keluar. Saya sedang mengerjakan halaman web dan saya menghadapi masalah dengan item senarai saya. ...
daripada 2024-04-04 16:38:22
0
1
3617
3. Model JS 3D telah ditambahkan tetapi tidak kelihatan Saya cuba menambah model 3D pada tapak web saya. Saya menggunakan tiga .js. Saya mencuba s...
daripada 2024-04-03 19:06:13
0
1
264
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！