查看: 6925|回復(fù): 0

[DIV+CSS 教程筆記02] 第十三課 div css當(dāng)中 DIV的基本格式和原理講解

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2014-12-1 21:30:44 | 只看該作者 |只看大圖回帖獎勵

|倒序?yàn)g覽 |閱讀模式

親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請您及時注冊登錄-www.bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號？立即注冊

本帖最后由 asp老師于 2014-12-1 22:51 編輯

那么前幾課程，我們是學(xué)習(xí)了css，那么從現(xiàn)在開始呢，我們就開始學(xué)習(xí)div的相關(guān)知識點(diǎn)了。那么請問div是個什么東西呢？
那么我來告訴大家，其實(shí)div大家可以理解為一個盒子，就是不同盒子的排列，而這個代碼標(biāo)簽都是可以放到盒子div里面的，
好此時呢，我們新建一個13.html 和13.css文件，同時呢把13.css引入13.html當(dāng)中，我們來給這個13.html寫如下代碼：

<font size="4"><!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=utf-8" />
<title>無標(biāo)題文檔</title>
<link href="13.css" rel="stylesheet" type="text/css">
</head>
<body>
<b>學(xué)習(xí)來道勤，<span>我們來一起努力！</span></b>
</body>
</html></font>

復(fù)制代碼

13.css里面我們目前還沒有寫任何代碼；
好效果如下;<b></b>是個加粗的標(biāo)簽

好此時我們寫這個div標(biāo)簽；代碼如下

<font size="4"><div>大家可以加入我們的QQ交流群 226547332</div>
</font>

復(fù)制代碼

效果如下;

大家此時可以看到在這個文字上面有個虛虛的，這個就是框架的，div就是個框架的好我們此時在加一個div

<font size="4"><b>學(xué)習(xí)來道勤，<span>我們來一起努力！</span></b>
<div>大家可以加入我們的QQ交流群 226547332</div>
<div>一起交流，論壇資源教程絕對不收費(fèi)</div></font>

復(fù)制代碼

那么大家此時可以看到，效果如下；會有4條虛線...那么這就是2個div的效果；
大家可以看到這里<div></div> 有個特性就是占據(jù)一行。好我們繼續(xù)加一個div
代碼如下;

<font size="4"><b>學(xué)習(xí)來道勤，<span>我們來一起努力！</span></b>
<div>大家可以加入我們的QQ交流群 226547332</div>
<div>一起交流，論壇資源教程絕對不收費(fèi)</div>
<div>免費(fèi)</div></font>

復(fù)制代碼

好此時我們把13.html的代碼改為：

<font size="4">
<body>
<div></div>
<div></div>
</body></font>

復(fù)制代碼

效果為;

此時我們會看到效果只有一個虛線，
看頁面效果的話，我們會發(fā)現(xiàn)什么都沒有，這是為啥呢？其實(shí)是有的就是<div></div><div></div>（我們可以通過查看源代碼看到)
好看源代碼；

<font size="4"><div class="aaa"></div>
<div class="bbb"></div>
</font>

復(fù)制代碼

13.css代碼

<font size="4">.aaa{background:#099;}
.bbb{ background:#F00;}</font>

復(fù)制代碼

此時呢，我們還是可以看到，此時頁面還是沒有發(fā)生任何的變化，但是如果我們在這2個div當(dāng)中加入我們自己的內(nèi)容的話，那么效果就有了

好此時我們來給這個div設(shè)定個高度和寬度看下效果

<font size="4">.aaa{background:#099; width:900px; height:300px;}
.bbb{ background:#F00;}</font>

復(fù)制代碼

我們來分析下這個代碼，就是讓類.aaa的div標(biāo)簽高度和寬度分別變化為： width:900px; height:300px;
效果如下：

此時呢，下面的代碼div仍然是暫居一行；
好我們此時重新定義我們的13.css樣式，代碼如下

<font size="4">.aaa{background:#099; width:200px; height:300px;}
.bbb{ background:#F00; width:50px; height:50px;}</font>

復(fù)制代碼

如果我們修改我們13.html代碼為這樣的話，看會出現(xiàn)什么情況

<font size="4"><body>
<div class="aaa"></font>

復(fù)制代碼

如果變?yōu)檫@樣呢：

<font size="4">
<body>
<div class="aaa">
<div class="bbb">222</div>
</div>
</body></font>

復(fù)制代碼

那次此時呢就是我們在類為.aaa的div盒子里面裝了一個類為.bbb的盒子，而且這個.bbb盒子里面有222的內(nèi)容
好效果如下;'

如果我們就這樣一直加div 一直加div那么大加可以自己看下效果。

道勤主機(jī)提供365天*24小時全年全天無休、實(shí)時在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) www.bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！