<em id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></em>

    <form id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></form>

    <form id="nnbzp"><form id="nnbzp"><th id="nnbzp"></th></form></form>

      <em id="nnbzp"><span id="nnbzp"><th id="nnbzp"></th></span></em><form id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></form>

      <form id="nnbzp"></form>

          立即注冊 找回密碼

          QQ登錄

          只需一步,快速開始

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

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

          [復制鏈接]

          212

          主題

          224

          帖子

          2990

          積分

          終身VIP會員

          Rank: 7Rank: 7Rank: 7

          積分
          2990

          推廣達人宣傳達人突出貢獻榮譽管理論壇元老

          跳轉到指定樓層
          樓主
          發表于 2014-12-3 23:09:26 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
          道勤網-數據www.jsvalue.com

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

          您需要 登錄 才可以下載或查看,沒有帳號?立即注冊

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

          那么上節課我們講了在div 和css當中的 margin外邊距 和padding內邊距的設置方法以及關于如何去設置她們的數值的方法,如果您還對div css當中的知識不太清楚的話,您可以參考這個文件:
          第十四課 div css當中 DIV內邊距和外邊距概念講解
          好,那么我們開始今天的課程了,首先呢,我們新建一個15.html的文件以及15.css的文件,并且我們把這個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;}
          復制代碼
          那么此時的效果如下:

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

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


          效果如下:

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

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

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

          5. </body>
          復制代碼

          同時呢,我們在到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;}
          復制代碼
          那么此時的效果是什么呢?
          我們分析下這個代碼:
          我們加了一個.ccc的div同時呢,我們又讓這個.ccc的div也到了云霄殿加了一個float:left; 的屬性效果;好我們來看這個效果如下:

          如果我們把第二個不加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;}
          復制代碼


          效果如下

          那么此時我們看到,第一個加了float,那么它脫離了文本留,但是呢,第二個沒有脫離,好那么第二個頂替了第一個的文本流的位置,而第三個也float了,它又挨著第二個,如果此時我們加了另一個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>
          復制代碼
          此時我們在定義.ddd的屬性,css代碼如下
          1. <blockquote>.aaa{width:50px; height:50px; background:#F00; float:left;}
          復制代碼


          那么此時我們來分析下這段代碼
          第一個.aaa的div 浮動了,第二個沒有浮動,那么第二個頂了一個位置;第三個和第四個都浮動了,但是因為第二個沒有浮動所以第三個和第四個只能是僅僅挨著的。那么效果如下;

          ---------------------------------------------------修改代碼如下--------------
          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小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、18513761280免費電話、后臺提交工單這些方式聯系道勤主機客服! 如果您不是我們的客戶也沒問題,點擊頁面最右邊的企業QQ在線咨詢圖標聯系我們并購買后,我們為您免費進行無縫搬家服務,讓您享受網站零訪問延遲的遷移到道勤主機的服務!
          本內容系 道勤團隊 www.jsvalue.com 客服與技術人員研究整理的智慧結晶,轉載勿用于商業用途,并保留本文鏈接,侵權必究!


          分享到:  QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
          收藏收藏 轉播轉播 分享分享 分享淘帖 支持支持 反對反對 贊助我們
          copy_link 

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

          加入道勤網VIP-www.jsvalue.com-享受建站指導服務!
          您需要登錄后才可以回帖 登錄 | 立即注冊

          本版積分規則

          關閉

          道勤網- 推薦內容!上一條 /2 下一條


           
           
          技術支持
          在線客服
          點擊這里給我發消息
          點擊這里給我發消息
          道勤建站群:
          3群建站-美工交流-道勤
          道勤美工群:
          3群建站-美工交流-道勤
          工作時間:
          8:00-18:00
          客服熱線:
          15056962695
          官方微信掃一掃
          !jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回復 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

          關于我們|手機版|小黑屋|地圖|【道勤網】-www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程【道勤網】 ( 皖ICP備15000319號|贊助我們  

          GMT+8, 2021-4-7 05:04

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

          快速回復 返回頂部 返回列表
          国产精品AV免费观看,成年女人毛片免费观看中文,女生和男生污污的视频,亚洲成在人线无码免费视频