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

網頁設計div布局

 發布時間：2020-08-03 20:07:43

1、網頁設計採用div+css有什麼好處？

網頁設計採用div+css的好處：
1、div+css有利於搜索引擎爬蟲：一般而言相同網頁頁面html文件table布局位元組大於div+css布局的位元組，所以可以節約搜索引擎爬蟲爬行下載頁面內容時間。
2、重構頁面修改方便（div+css改版方便）：一般DIV+CSS頁面都是html和css文件分開的也就是說一個網頁的內容與表現形式的分離，一般修改小小部分的css文件里css樣式屬性就可以修改真站的樣式版面，如背景顏色、字體顏色、網站寬度等具有table不具備的方便性。
3、div+css頁面增加網頁打開速度：這里是特性決定了他們的性能，因為div+css頁面是div的html和css文件分開的，而瀏覽器打開該網頁的時候是同時下載html和css，所以可以提高網頁打開速度，而table還有個特性就是瀏覽器打開的時候必須是瀏覽器下載以<table>開始,並</table>結束後才顯示該塊的內容，而div的html是邊載入邊將內容呈現到瀏覽器上，div+css網站大大增強用戶體驗作用。大家都知道網頁多等1秒鍾都會降低瀏覽者的等待時間。

2、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>

3、Dreamweaver 怎麼網頁布局 div css布局

Dreamweaver（以下簡稱DW）只是一個代碼編輯工具，這樣的工具有很多，而且大多數都比DW好用，只是DW有個可視編輯功能，但一般也只是給初學div+css的人來用的，真正有一定經驗的，其實都已經不用DW了，大神用記事本一樣可以寫div+css頁面，推薦一款很好用的編輯軟體給你：webstorm，用過之後你就會覺得DW簡直弱爆了！
還有，關於div+css的布局，要多學、多看、多練。
1、學習html每個標簽的含義和用法，多種css如何組合才能達到最佳效果
2、多看別人寫好的頁面，同樣的版塊是如何實現的，代碼結構有哪些優秀的地方
3、對比別人的頁面或找案例，自己練習布局

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

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

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

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

6、用div+css設計一個頁面布局

<style>
.head{
width:100%;
height:60px;
}
.main{
width:70%;
height:400px;
float:left;
}
.main{
width:30%;
height:400px;
float:right;
}
.footer{
width:100%;
height:60px;
}
</style>

<div class ="head">這里是head區域</div>
<div class ="main">這里是主要內容區域</div>
<div class="main_left">這里是右側區域</div>
<div class="footer">這里是頁腳區域</div>

7、請問，網頁設計中怎樣用div+css進行如下圖的分塊，謝謝。

如果有成圖的話，可以考慮PS切圖

手寫的話，代碼就比較多了

<!DOCTYPE html>
<html>
<head>
<title>手寫代碼</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin: 0;}
.w1260{width: 1260px;margin: 12px auto;margin-top: 0;}
.h-1{border: 1px solid #bbb;height: 120px;}
.h-2{border: 1px solid #bbb;height: 80px;}
.h-3{border: 1px solid #bbb;position: relative;overflow: hidden;}
.h-3 .h3-l{float: left;width: 33%;border-right: 1px solid #bbb;padding:1%;}
.h-3 .h3-l .h3-l1{border: 1px solid #bbb;height: 200px;}
.h-3 .h3-l .h3-l2{border: 1px solid #bbb;height: 200px;margin-top: 12px;}
.h-3 .h3-r{float: right;width: 62.6%;padding: 1%;padding-left: 0;}
.h-3 .h3-r .h3-r1{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;}
.h-3 .h3-r .h3-r1 .h3-r1-l{float: left;height: 80px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r1 .h3-r1-r{float: right;height: 80px;width: 24%;}
.h-3 .h3-r .h3-r2{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;height: 100px;margin-top: 12px;}
.h-3 .h3-r .h3-r3{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;margin-top: 12px;}
.h-3 .h3-r .h3-r3 .h3-r3-l{float: left;height: 200px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r3 .h3-r3-r{float: right;height: 200px;width: 24%;}
.h-4{border: 1px solid #bbb;height: 80px;}
</style>
</head>
<body>
<div class="h-1 w1260"></div>
<div class="h-2 w1260"></div>
<div class="h-3 w1260">
<div class="h3-l">
<div class="h3-l1"></div>
<div class="h3-l2"></div>
</div>
<div class="h3-r">
<div class="h3-r1">
<div class="h3-r1-l"></div>
<div class="h3-r1-r"></div>
</div>
<div class="h3-r2"></div>
<div class="h3-r3">
<div class="h3-r3-l"></div>
<div class="h3-r3-r"></div>
</div>
</div>
</div>
<div class="h-4 w1260"></div>
</body>
</html>

8、網頁設計採用div+css有什麼好處

1.大大縮減頁面代碼，提高頁面瀏覽速度,縮減帶寬成本;
2.結構清晰，容易被搜索引擎搜索到，天生優化了seo
3.縮短改版時間。只要簡單的修改幾個CSS文件就可以重新設計一個有成百上千頁面的站點。
4.強大的字體控制和排版能力。CSS控制字體的能力比糟糕的FONT標簽好多了，有了CSS，我們不再需要用FONT標簽或者透明的1 px GIF圖片來控制標題，改變字體顏色，字體樣式等等。
5.CSS非常容易編寫。你可以象寫html代碼一樣輕松地編寫CSS。
6.提高易用性。使用CSS可以結構化HTML，例如：
標簽只用來控制段落，heading標簽只用來控制標題，table標簽只用來表現格式化的數據等等。你可以增加更多的用戶而不需要建立獨立的版本。
7.可以一次設計，隨處發布。你的設計不僅僅用於web瀏覽器，也可以發布在其他設備上，比如PowerPoint。
8.更好的控制頁面布局。不用多說。
9.表現和內容相分離。將設計部分剝離出來放在一個獨立樣式文件中，你可以減少未來網頁無效的可能。
10.更方便搜索引擎的搜索。用只包含結構化內容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的內容，並可能給你一個較高的評價(ranking)。
11.Table 布局靈活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 還可以 ul li ……但標准語法最好有序的寫。
12.另外如果你不是javascrput的高手，你可以不必去寫ID，只用class就可以。當客戶端程序員寫完程序，需要調整時候，你可以在利用他的ID進行控制。
13.Table 中布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利於直觀。而Div 更能體現樣式和結構相分離，結構的重構性強。
14.在幾乎所有的瀏覽器上都可以使用。
15.以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。
16.使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。
17.你可以輕松地控制頁面的布局 。
18.你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那麼整個站點的所有頁面都會隨之發生變動。

9、求一個網頁製作高手用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>

10、網頁設計中DIV是什麼意思？

在HTML網頁源代碼中DIV是什麼意思，出現很多DIV，究竟有什麼作用和功能？

在網頁html中查看源代碼會看到很多代碼，包括DIV、span、h1、b加粗、strong等標簽組成。

html中div使用截圖一段HTML源代碼截圖其中包括div span h1標簽使用

培訓是針對那些有條件的人來說，很多小夥伴更喜歡的是自學。但是一個人自學畢竟力量是有限的，為了讓想學習的人可以更好的學習，給大家推薦一個裙，前面是6 5 7，中間是壹 三  七，最後面就是九 0 六，這里有很多想學習的人和你一起交流，也有大牛每天晚上免費教學，想要學習的人都可以加入我們，但是我們只歡迎想學習的人，不是來學習，隨便看看的就不要進了。

DIVSPNANH1是什麼意思呢？
這些標簽是包裹內容作用，有的是起到布局各種各樣樣式而使用DIV標簽，有的是為了內容加粗比如strong標簽、表達是標題h1標簽。

div作用
讓內容包裹在DIV內，實現各式各樣的美化，比如對div設置邊框，這樣內容就區就有邊框樣式、對div設置字體顏色這樣對應DIV內字體就有了各式各樣的顏色；對div設置背景顏色或背景圖片，這樣內容就有了漂亮的css背景。

div標簽內使用樣式實現各式各樣排版，對div設置不同的css樣式，實現美工圖布局樣式。

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