導航:首頁 > 萬維百科 > 網頁設計盒子布局是div

網頁設計盒子布局是div

 發布時間：2020-11-04 23:14:28

1、怎樣才能用div和css把網頁布局的很美觀？

div+css不僅起到網頁布局製作的功能還能起到代碼優化，怎樣才能以最快的速度打開網頁。
在用打開速度方面我們就要考慮到用背景定位技術，這樣無論你製作的頁面含有多少小圖標或小圖片都可以統一放在一個圖片里，這樣減少瀏覽器網客戶端讀取的次數。。參考：www.qq.com 你右擊把qq網站的背景圖片，凌晨一下，在看一下那個圖片，就會明白了。
div+css布局製作網頁時還要考慮到瀏覽器兼容性的問題。比如怎樣兼容IE6、7、8、及火狐瀏覽器等常用瀏覽器。
其實網頁製作布局還有很多，我只一些例子而已。
我是做網頁製作布局的大家可以一起探討一下啊。

2、求一個網頁製作高手用div+css做一個網頁布局 急 謝謝！！！！！！！！！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

3、網頁設計中採用div+css布局，這里的DIV是什麼意思？

DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。
DIV在編程中又叫做整除，即只得商的整數。 DIV元素是用來為HTML（標准通用標記語言下的一個應用）文檔內大塊（block-level）的內容提供結構和背景的元素。

4、網頁設計的一個問題。使用div+css不能成功布局.div布局設計如圖所示.

給你個大概的思路，因為沒有代碼也不好分析你那裡出問題了
你A沒問題，我們就不管他了
做B的時候你先用一個總的DIV，然後把你的B1 B2 B3都寫在B裡面，記得給浮動，這樣就OK了
下面是代碼
.B{width:980px; height:500px; float:left;}
.B1{width:500px; height:500px; float:left;}

.B2{width:480px; height:250px; float:left;}

.B3{width:480px; height:250px; float:left;}

<div class="B">
<div class="B1"></div>
<div class="B2"></div>
<div class="B3"></div>
</div>

5、網頁設計為什麼要用DIV布局

說起來我干網頁設計和網站製作也有六七年的時間了，當初DIV剛剛興起的時候，曾和朋友們試過用DIV，但因為當時DIV+CSS這種技術還不成熟，所以也就沒太在意，依然用TABLE，但，時至今日，DIV+CSS已把TABLE+CSS淘汰了，我們這些常用TABLE的人，也得慢慢熟悉DIV了。首先來說，DIV的好處在於樣式與主體內容分離，大量減少網頁代碼量，使網頁下載速度更快。而且對於後期網站維護來說，也是相當便捷的，這是DIV最大的優勢。但個人認為，DIV也不一點缺點都沒有，比如一個大型且架構復雜的網站來說，採用DIV布局對團隊合作來說就是一個不小的折磨。因為全是DIV標簽，如果不是本人做的，根本找不到需要的內容，當然可以添加註釋，但這並不能完全解決這個問題。對於用習慣了TABLE的人來說，DIV確實很難適應，這就像學習武功，你本來學習的少林的功夫，如果再學武當的，興許裡面就有些沖撞，除非你忘了原來的基礎，從頭再來。DIV來說也是這樣，對我來說對於用DIV控制盒子的各項屬性就是一個不小的難題，興好現在通過練習逐漸攻克了這個難關。

6、網頁設計頁面布局使用div+css是什麼意思，還有怎麼插入圖片，謝謝各位大神

div模型，搭上css樣式
用<img src="圖片地址" alt="顯示不出來的時候的文字" />插入圖片

7、網頁製作中框架結構和div是都可以給一個網頁布局么？

一般都是用框架做，導航鏈接裡面設置href="主顯示界面的target名稱"就可以了；
如果不想用框架那就只有隻用第三方JS框架了，推薦一個：jquery easyui的框架，這個框架就是完全用div，後台用JS控制。

8、html+css+div網頁設計與布局怎麼樣

方法/步驟

一個網頁設計時，我們可以將一個頁面設置為頭部，中間，和底部三部分； 頭部有分為店招（logo）和導航等
中間既內容部分，內容也可一個整體，也可左右分離，
底部來頁面結尾，一般寫版權信息，友情鏈接等

END
頭部編輯

店招：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">導航</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

導航：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

END
內容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

END
底部

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============內容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/

</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

9、網頁製作。做網頁圖文電影介紹，如何將文本(div)盒子置於圖片(a)盒子下方,做出如圖效果

你那種寫法，可以直接將a標簽設置為block就可以了。如：
<a href="#" title="諜影重重5" style="display:block";>
<img src="img/1-1.jpg"/>
<div style="display:block">aaa</div>
</a>

但是那張圖片效果，可以用<dl></dl>去布局，如：
<dl>
<dt>
<a href="#" title="諜影重重5" style="display:block">
<img src="img/1-1.jpg"/>
</a>

</dt>

<dd>aaaa</dd>

</dl>

10、網頁製作中這樣的方格布局是用什麼工具排的？表格？DIV？apdiv？

用div做 然後 做一下 div:hover{} 這樣
比如 <div class="biao"></div>
樣式就是
.biao{各種屬性}
.biao:hover{滑鼠移入的屬性 紅色邊框等}
如果回是a標簽 直接用a:hover 一樣的答

與網頁設計盒子布局是div相關的知識