1. <dd id="5jlnw"><center id="5jlnw"></center></dd>
    <dd id="5jlnw"><track id="5jlnw"></track></dd>

    <th id="5jlnw"></th>
    <em id="5jlnw"><acronym id="5jlnw"></acronym></em>
    1. 立即注冊 找回密碼

      QQ登錄

      只需一步,快速開(kāi)始

      查看: 5692|回復: 0
      打印 上一主題 下一主題

      [DIV+CSS 教程筆記02] 第十五課 div css當中DIV浮動(dòng)原理和應用詳解答

      [復制鏈接]
      跳轉到指定樓層
      樓主
      發(fā)表于 2014-12-3 23:09:26 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
      道勤網(wǎng)-數據www.bmrsportswear.com

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

      您需要 登錄 才可以下載或查看,沒(méi)有賬號?立即注冊

      x
      本帖最后由 asp老師 于 2014-12-4 14:23 編輯

      那么上節課我們講了在div 和css當中的 margin外邊距 和padding內邊距的設置方法以及關(guān)于如何去設置她們的數值的方法,如果您還對div css當中的知識不太清楚的話(huà),您可以參考這個(gè)文件:
      第十四課 div css當中 DIV內邊距和外邊距概念講解
      好,那么我們開(kāi)始今天的課程了,首先呢,我們新建一個(gè)15.html的文件以及15.css的文件,并且我們把這個(gè)15.css文件引入我們的15.html當中15.html當中的源代碼如下:
      1. <body>
      2. <div class="aaa">111</div>
      3. <div class="bbb">222</div>

      4. </body>
      復制代碼
      15.css文件代碼如下;
      1. .aaa{width:300px; height:150px; background:#F00;}
      2. .bbb{width:300px; height:150px; background:#0F0;}
      復制代碼
      那么此時(shí)的效果如下:

      此時(shí)呢,我們可以介紹下文本流的概念:我們寫(xiě)一排很多的文字,當我們文字占據了網(wǎng)頁(yè)的一行的時(shí)候,會(huì )自動(dòng)的往下面令一行開(kāi)始寫(xiě)起,那么這樣的文字如流水一般,我們統稱(chēng)為文本流。
      如果我們修改css代碼如下:
      1. .aaa{width:50px; height:50px; background:#F00;}
      2. .bbb{width:300px; height:150px; background:#0F0;}
      復制代碼
      效果如下;

      好,此時(shí)如果我們繼續把.aaa后面的css代碼加一個(gè)屬性為float:left; 那么此時(shí)的css代碼如下:
      1. .aaa{width:50px; height:50px; background:#F00; float:left;}
      2. .bbb{width:300px; height:150px; background:#0F0;}
      復制代碼


      效果如下:

      大家此時(shí)可以看到,這個(gè).aaa的div已經(jīng)好像是浮動(dòng)到.bbb的div的上方了,那么我們這個(gè)就是float:left; 的效果
      好,我們如果繼續把.bbb的屬性也添加一個(gè)float:left; 的屬性,我們來(lái)看下會(huì )有什么樣的效果出現呢!
      1. .aaa{width:50px; height:50px; background:#F00; float:left;}
      2. .bbb{width:300px; height:150px; background:#0F0; float:left;}
      復制代碼
      那么此時(shí)的效果如下:

      大家此時(shí)可以看到,我們出現了第二個(gè)的.bbb的div現在也是左浮動(dòng)但是呢,卻是和第一個(gè).aaa的div考到一起了,這個(gè)大家可以理解為,默認的沒(méi)有float的為一個(gè)層,比如是人間平民,如果加了float那么就到了云霄殿,而這2個(gè)都加了float,表示這2個(gè)都到了云霄殿,但是呢,到了云霄殿就要遵守云霄殿的規則,也是先來(lái)后到,要排隊。則會(huì )出現這樣的效果;
      如果我們在15.html當中在加一個(gè)div呢,我們來(lái)看源代碼

      1. <body>
      2. <div class="aaa">111</div>
      3. <div class="bbb">222</div>
      4. <div class="ccc">333</div>

      5. </body>
      復制代碼

      同時(shí)呢,我們在到15.css當中定義我們的屬性;代碼如下:
      1. .aaa{width:50px; height:50px; background:#F00; float:left;}
      2. .bbb{width:300px; height:150px; background:#0F0; float:left;}
      3. .ccc{width:300px; height:150px; background:#FF0; float:left;}
      復制代碼
      那么此時(shí)的效果是什么呢?
      我們分析下這個(gè)代碼:
      我們加了一個(gè).ccc的div同時(shí)呢,我們又讓這個(gè).ccc的div也到了云霄殿加了一個(gè)float:left; 的屬性效果;好我們來(lái)看這個(gè)效果如下:

      如果我們把第二個(gè)不加float呢,代碼如下
      1. .aaa{width:50px; height:50px; background:#F00; float:left;}
      2. .bbb{width:300px; height:150px; background:#0F0; }
      3. .ccc{width:300px; height:150px; background:#FF0; float:left;}
      復制代碼


      效果如下

      那么此時(shí)我們看到,第一個(gè)加了float,那么它脫離了文本留,但是呢,第二個(gè)沒(méi)有脫離,好那么第二個(gè)頂替了第一個(gè)的文本流的位置,而第三個(gè)也float了,它又挨著(zhù)第二個(gè),如果此時(shí)我們加了另一個(gè)div,源代碼如下:

      1. <body>
      2. <div class="aaa">111</div>
      3. <div class="bbb">222</div>
      4. <div class="ccc">333</div>
      5. <div class="ddd">444</div>

      6. </body>
      復制代碼
      此時(shí)我們在定義.ddd的屬性,css代碼如下
      1. <blockquote>.aaa{width:50px; height:50px; background:#F00; float:left;}
      復制代碼


      那么此時(shí)我們來(lái)分析下這段代碼
      第一個(gè).aaa的div 浮動(dòng)了,第二個(gè)沒(méi)有浮動(dòng),那么第二個(gè)頂了一個(gè)位置;第三個(gè)和第四個(gè)都浮動(dòng)了,但是因為第二個(gè)沒(méi)有浮動(dòng)所以第三個(gè)和第四個(gè)只能是僅僅挨著(zhù)的。那么效果如下;

      ---------------------------------------------------修改代碼如下--------------
      1. .aaa{width:50px; height:50px; background:#F00; float:left;}
      2. .bbb{width:300px; height:150px; background:#0F0;float:left; }
      3. .ccc{width:300px; height:150px; background:#FF0; float:right; }
      4. .ddd{width:300px; height:150px; background:#00F; float:right;}
      復制代碼



      道勤主機提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線(xiàn)、零等待的售后技術(shù)支持。竭力為您免費處理您在使用道勤主機過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機用戶(hù),那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費電話(huà)、后臺提交工單這些方式聯(lián)系道勤主機客服! 如果您不是我們的客戶(hù)也沒(méi)問(wèn)題,點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線(xiàn)咨詢(xún)圖標聯(lián)系我們并購買(mǎi)后,我們?yōu)槟赓M進(jìn)行無(wú)縫搬家服務(wù),讓您享受網(wǎng)站零訪(fǎng)問(wèn)延遲的遷移到道勤主機的服務(wù)!
      本內容系 道勤團隊 www.bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結晶,轉載勿用于商業(yè)用途,并保留本文鏈接,侵權必究!
      dsu_marcocopyright:copy_link 

      【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】 - 論壇版權1、本主題所有言論和圖片純屬會(huì )員個(gè)人意見(jiàn),與本論壇立場(chǎng)無(wú)關(guān)
      2、本站所有主題由該帖子作者發(fā)表,該帖子作者與【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】享有帖子相關(guān)版權
      3、其他單位或個(gè)人使用、轉載或引用本文時(shí)必須同時(shí)征得該帖子作者和【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】的同意
      4、帖子作者須承擔一切因本文發(fā)表而直接或間接導致的民事或刑事法律責任
      5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀(guān)點(diǎn)和對其真實(shí)性負責
      6、如本帖侵犯到任何版權問(wèn)題,請立即告知本站,本站將及時(shí)予與刪除并致以最深的歉意
      7、【道勤網(wǎng)】- www.bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機械設計教程|網(wǎng)站設計教程!【道勤網(wǎng)】管理員和版主有權不事先通知發(fā)貼者而刪除本文

      您需要登錄后才可以回帖 登錄 | 立即注冊

      本版積分規則

      關(guān)閉

      道勤網(wǎng)- 推薦內容!上一條 /2 下一條

      !jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回復 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

      Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

      快速回復 返回頂部 返回列表
      色综合网站国产麻豆_国产在线精品福利尤物_两个人的视频全免费观看高清_日日干狠狠干