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

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

      [DIV+CSS 教程筆記02] 第十八課程 網(wǎng)站建設div+css當中的 Positioning屬性定位的概念詳細講解

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

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

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

      x
      本帖最后由 asp老師 于 2014-12-5 09:45 編輯

      static 是默認值 沒(méi)有定位 元素出現正常的文本流里面
      代碼如下:
      1. <title>無(wú)標題文檔</title>
      2. <style type="text/css">
      3. #a{width:200px; height:150px; background:#F00; margin:0px auto;}
      4. </style>
      5. </head>

      6. <body>
      7. <div id="a"></div>
      8. </body>
      復制代碼
      fixed 生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規定。
      absolute 定位:生成絕對定位的元素,超出原來(lái)文本流元素的位置通過(guò)“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規定。
      如果我們在<style tpye="text/css"></style>當中加入這樣代碼的話(huà)
      1. #b{
      2.         width:200px;
      3.         height:200px;
      4.         background:#0F0;
      5.         position:absolute;
      6. }
      復制代碼
      我們來(lái)分析這個(gè)代碼positon:absolute;  這個(gè)代碼的意識就是讓div的層隨意浮動(dòng) 我們可以通過(guò)手動(dòng)來(lái)設置這個(gè)div的位置,當然也可以我們通過(guò)來(lái)設置“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規定。好此時(shí)我們來(lái)在positon:absolute; 后面寫(xiě)上如下代碼
      1. top:200px;        
      2.         left:300px;
      復制代碼
      那么此時(shí)的效果如下;


      那么這個(gè)效果就是如下; 這個(gè)定位是對它的父框來(lái)定位的    ;

      好我們來(lái)看positon:fixed;   “l(fā)eft”,“top”,“right”以及“bottom”這樣設置會(huì )出現什么情況呢/我們來(lái)看如下代碼
      我們通常要設置body的數值body{margin:0px 0px;} 這個(gè)是用來(lái)取消默認的瀏覽器8px的設置
      1. <style type="text/css">
      2. body{margin:0px 0px;}
      3. #a{width:700px; height:500px; background:#F00; }

      4. #b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}

      5. </style>
      6. </head>
      復制代碼
      這個(gè)代碼:position:fixed; top:20px; left:5px;   這個(gè)表示的是相對于瀏覽器的窗口位置的,效果如下:

      我們此時(shí)可以看到這個(gè)綠色div的效果,這個(gè)效果是隨著(zhù)瀏覽器進(jìn)行浮動(dòng)的,而不是通過(guò)div
      如果我們此時(shí)修改為代碼如下:把這個(gè)紅色的div居中 margin:0px auto;
      1. <style type="text/css">
      2. body{margin:0px 0px;}
      3. #a{width:700px; height:500px; background:#F00; margin:0px auto;}

      4. #b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}

      5. </style>
      復制代碼

      此時(shí)的效果如下:

      那么我們經(jīng)常會(huì )看到這樣的方法用在網(wǎng)站當中的廣告,例如我們網(wǎng)站的左側用到的position:0px auto;  這樣來(lái)出現的效果,可以隨著(zhù)滾動(dòng)條來(lái)進(jìn)行拖動(dòng)但是會(huì )固定在瀏覽器當中同時(shí)他/她不會(huì )隨著(zhù)瀏覽器進(jìn)行大小而進(jìn)行縮放!



      道勤主機提供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 & 道勤科技

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