简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

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

WBOY
發布： 2016-06-24 11:50:00
原創
1039 人瀏覽過

要写一个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>
登入後複製

经过测试，在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>
登入後複製

这个很简单吧

相關標籤：
HTML、CSS中的网页页面布局问题
來源：php.cn
上一篇：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnose 下一篇：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
OAuth 2.0 配置設定 我使用phpmailer透過smtp.google.com伺服器發送郵件，但現在它無法正常運作，因為他們說使用OAuth2.0設定。我參考了一些範例並使用使用PhpMailer和G...
來自於 2024-04-06 11:12:57
0
1
408
強制刷新是Next.js中存取未定義路徑或錯誤頁面的後果 存取未定義的路徑或錯誤頁面會導致Next.js進行硬刷新，從而導致我的上下文回到預設狀態（即儲存在userProfile狀態變數中的值變為null）我有一個佈局，使用{stuctu...
來自於 2024-04-05 08:32:46
0
1
400
CSS中無法顯示和移除根節點中的列表項符號（<ul>和<ol>），同時也無法移除overflow-x: hidden的問題 我目前正在處理網頁，但我的清單項目遇到了問題。通常出現在每個清單項目旁邊的點和數字沒有顯示。另外，當我刪除overflow-x:hidden;時在我的CSS屬性中，列表項目數字和點...
來自於 2024-04-04 16:38:22
0
1
3617
三.JS 3D模型已新增但不可見 我正在嘗試將3D模型添加到我的網站。我正在使用三個.js。我盡了一切努力，但無法使3D模型可見。在開發者工具的網路標籤中，我可以看到MTL和OBJ檔案已加載，但頁面只是空白。我嘗試...
來自於 2024-04-03 19:06:13
0
1
264
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！