導航:首頁 > 萬維百科 > 網頁設計中的div怎麼用

網頁設計中的div怎麼用

 發布時間：2021-01-03 04:41:58

1、請問，網頁設計中怎樣用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>

2、網頁設計中div是起什麼作用的？

div是塊狀標簽，可以把網頁分成一塊一塊的，方便排版，明確層次。
比用table等更好。

3、網頁設計里的，html、css、div是什麼意思？

html就是做網頁頁面的標簽語言
css是控制顯示樣式的
div是層
psd格式的模板需要用Photoshop打開
====================================
PSD模板就整個頁面布局和樣式的設計原稿,需要切片才能應用到網頁上去

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

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

5、網頁設計，div中title的作用是?

提示信息，滑鼠放到該元素上顯示的提示信息。


舉例：

下圖中，將滑鼠放到新浪圖標上，將顯示提示信息，這個提示信息就是title的值。


6、網頁設計中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樣式，實現美工圖布局樣式。

7、網頁設計中DIV有什麼作用?

div是用來做網頁布局的，一個<div></div>就相當於一個矩形框，可以用id，class來控制它的樣式
麻煩採納，謝謝!

8、在Dreamweaver中 怎樣用DIV+CSS來製作網頁

你主要是想問什麼？dreamweaver的操作還是不清楚div+css，或者說你不懂怎麼寫一個頁面，div+css也只是內一個思想，首先如果要寫容一個網頁的話，你根據需要，首先寫出結構，可以一部分一部分的實現，然後用css控制結構的樣式，達到你希望的樣子。
dreamweaver的操作的話，首先創建一個站點，（站點即是一個文件夾）然後根據需要在站點文件夾下創建相應的文件夾，比如存放圖片的文件夾，css樣式的文件夾，網頁的話，一般直接存放在站點文件夾最外面。

建議你問的更詳細點。

9、網頁設計 html 怎麼在div圖片里插入文字

第一種方法：
添加一個DIV，採用絕對定位，圖片所屬DIV為基準
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二種方法：圖片作為背景圖片
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>

10、網頁設計裡面，<div>到底是干什麼用的

?

與網頁設計中的div怎麼用相關的知識