整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
：語法
2：作用
div 標簽可以用來劃分 HTML 結構，從而配合 CSS 來整體控制某一塊的樣式。
div 標簽是塊級元素，它可用做組合其它 HTML 元素的容器。
div 標簽可以用作嚴格的組織工具，如果用 id 或 class 來標記 div 標簽，則 div 標簽的作用會更加完美。
3：例子
我們以 “堅持就是勝利” 這句話的中英文書寫方式為例，看一下 div 是如何劃分結構的
首先先看一下編輯器效果，如下
再來看一下瀏覽器的運行效果，如下
如果我們把 div 標簽去掉，只用段落標簽 p 來實現，其實瀏覽器的運行效果是一樣的，那我們為什么還要用 div 標簽呢 ，這不是多此一舉嗎？
其實不然，這是在代碼量比較少的情況下，兩者的差距不明顯，但如果代碼有成百上千行的時候，就體現到了 div 標簽劃分結構的作用，同時也使代碼更具有邏輯性。
總結來說，div 標簽最重要的用途是劃分區域，然后再結合 CSS ，針對指定區域進行樣式控制。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取
原文鏈接：https://blog.csdn.net/qq_42351033/article/details/102680545
、HTML 塊元素
二、HTML 內聯元素
三、HTML <div> 元素
四、div的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
.all{
width:500px;
height:500px;
margin:0 auto;
background-color:#000;
}
.one{
height:100px;
background-color:#89E1BF;
}
.two{
height:100px;
background-color:#DEE099;
}
.three{
height:100px;
background-color:#D7A1CE;
}
</style>
<body>
<!--父div，all是黑色-->
<div class="all">
<!--子div，one是綠色-->
<div class="one">
</div>
<!--子divtwo，是黃色-->
<div class="two">
</div>
<!--子div，three是紫色-->
<div class="three">
</div>
</div>
</body>
</html>
演示效果如圖所示：
這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。
這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.container::before {
content: "";
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5; /* 調整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內容
</div>
</div>
</body>
</html>這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
filter: opacity(0.5); /* 調整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。
在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
