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)始

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

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

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

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

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

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

      那么前幾課程,我們是學(xué)習了css,那么從現在開(kāi)始呢,我們就開(kāi)始學(xué)習div的相關(guān)知識點(diǎn)了。那么請問(wèn)div是個(gè)什么東西呢?
      那么我來(lái)告訴大家,其實(shí)div大家可以理解為一個(gè)盒子,就是不同盒子的排列,而這個(gè)代碼標簽都是可以放到盒子div里面的,
      好此時(shí)呢,我們新建一個(gè)13.html 和13.css文件,同時(shí)呢把13.css引入13.html當中,我們來(lái)給這個(gè)13.html寫(xiě)如下代碼:
      1. <font size="4"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <title>無(wú)標題文檔</title>
      6. <link href="13.css" rel="stylesheet" type="text/css">
      7. </head>

      8. <body>

      9. <b>學(xué)習來(lái)道勤,<span>我們來(lái)一起努力!</span></b>

      10. </body>
      11. </html></font>
      復制代碼
      13.css里面我們目前還沒(méi)有寫(xiě)任何代碼;
      好效果如下;<b></b>是個(gè)加粗的標簽

      好此時(shí)我們寫(xiě)這個(gè)div標簽;代碼如下
      1. <font size="4"><div>大家可以加入我們的QQ交流群 226547332</div>
      2. </font>
      復制代碼
      效果如下;

      大家此時(shí)可以看到在這個(gè)文字上面有個(gè)虛虛的,這個(gè)就是框架的,div就是個(gè)框架的好我們此時(shí)在加一個(gè)div
      1. <font size="4"><b>學(xué)習來(lái)道勤,<span>我們來(lái)一起努力!</span></b>
      2. <div>大家可以加入我們的QQ交流群 226547332</div>
      3. <div>一起交流,論壇資源教程絕對不收費</div></font>
      復制代碼


      那么大家此時(shí)可以看到,效果如下;會(huì )有4條虛線(xiàn)...那么這就是2個(gè)div的效果;
      大家可以看到這里<div></div> 有個(gè)特性就是占據一行。好我們繼續加一個(gè)div
      代碼如下;
      1. <font size="4"><b>學(xué)習來(lái)道勤,<span>我們來(lái)一起努力!</span></b>
      2. <div>大家可以加入我們的QQ交流群 226547332</div>
      3. <div>一起交流,論壇資源教程絕對不收費</div>
      4. <div>免費</div></font>
      復制代碼

      好此時(shí)我們把13.html的代碼改為:

      1. <font size="4">
      2. <body>



      3. <div></div>
      4. <div></div>



      5. </body></font>
      復制代碼

      效果為;


      此時(shí)我們會(huì )看到效果只有一個(gè)虛線(xiàn),
      看頁(yè)面效果的話(huà),我們會(huì )發(fā)現什么都沒(méi)有,這是為啥呢?其實(shí)是有的就是<div></div><div></div>(我們可以通過(guò)查看源代碼看到)
      好看源代碼;
      1. <font size="4"><div class="aaa"></div>
      2. <div class="bbb"></div>
      3. </font>
      復制代碼
      13.css代碼
      1. <font size="4">.aaa{background:#099;}
      2. .bbb{ background:#F00;}</font>
      復制代碼
      此時(shí)呢,我們還是可以看到,此時(shí)頁(yè)面還是沒(méi)有發(fā)生任何的變化,但是如果我們在這2個(gè)div當中加入我們自己的內容的話(huà),那么效果就有了
      好此時(shí)我們來(lái)給這個(gè)div設定個(gè)高度和寬度看下效果
      1. <font size="4">.aaa{background:#099; width:900px; height:300px;}
      2. .bbb{ background:#F00;}</font>
      復制代碼

      我們來(lái)分析下這個(gè)代碼,就是讓類(lèi).aaa的div標簽高度和寬度分別變化為: width:900px; height:300px;

      效果如下:


      此時(shí)呢,下面的代碼div仍然是暫居一行;

      好我們此時(shí)重新定義我們的13.css樣式,代碼如下
      1. <font size="4">.aaa{background:#099; width:200px; height:300px;}
      2. .bbb{ background:#F00; width:50px; height:50px;}</font>
      復制代碼

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

      1. <font size="4"><body>



      2. <div class="aaa"></font>
      復制代碼
      如果變?yōu)檫@樣呢:
      1. <font size="4">
      2. <body>



      3. <div class="aaa">

      4. <div class="bbb">222</div>

      5. </div>



      6. </body></font>
      復制代碼
      那次此時(shí)呢就是我們在類(lèi)為.aaa的div盒子里面裝了一個(gè)類(lèi)為.bbb的盒子,而且這個(gè).bbb盒子里面有222的內容
      好效果如下;'

      如果我們就這樣一直加div 一直加div那么大加可以自己看下效果。
      道勤主機提供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 & 道勤科技

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