<big id="d1zzb"></big>

<p id="d1zzb"><del id="d1zzb"></del></p>

    <track id="d1zzb"></track>
    <pre id="d1zzb"></pre><ruby id="d1zzb"><strike id="d1zzb"><b id="d1zzb"></b></strike></ruby>
    <pre id="d1zzb"><strike id="d1zzb"></strike></pre><address id="d1zzb"></address>

    <track id="d1zzb"></track>

    <pre id="d1zzb"></pre>

      立即注冊 找回密碼

      QQ登錄

      只需一步,快速開始

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

      [DIV+CSS 教程筆記02] 第十七課程 div css當中的 DIV塊狀居中參數設置詳細教程詳解

      [復制鏈接]

      226

      主題

      238

      帖子

      3260

      積分

      終身VIP會員

      Rank: 7Rank: 7Rank: 7

      積分
      3260

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

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

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

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

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

      首先我們新建一個17.html的文件和17.css同時把17.css文件引入我們17.html當中;
      17.html代碼如下
      1. <!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>無標題文檔</title>
      6. <link href="17.css" rel="stylesheet" type="text/css">
      7. </head>

      8. <body>
      9. <div class="aaa">111</div>
      10. </body>
      11. </html>
      復制代碼
      17.css代碼如下;
      1. .aaa{background:#F00; width:960px; height:450px;}
      復制代碼
      那么此時效果如下;

      此時我們可以看到,現在的效果是這樣的,但是我們會發現此時的會有一個藍色的左面和上面都有個邊距,(默認的是瀏覽器有8個px的大小邊距的)那么我們通?梢赃@么來設置來取消這個邊距白色的問題,因為我們正常的一個網頁應該是沒有這個的,所以我們可以在17.css當中加一個這樣的css代碼;如下
      1. <font color="#ff0000">body{margin:0px; padding:0px;}</font>
      復制代碼
      效這樣呢,我們去取消了8個px的大小效果如下:

      那么我們如何操作,才可以讓這個div居中呢,我們可以用到這個代碼
      1. <font size="5"> margin:0px auto;</font>
      復制代碼
      我們來分析下這個代碼這個就是讓這個div上下的邊距為0px 左右2面自動處理,效果如下;

      那么這樣左右就可以自動調整了,margin:0px atuo; (這樣的方法是比較好的,因為我們每個電腦的顯示器分別率是不一樣的,如果是我們給左右2個margin更具自己設定了一個數值的話,那么可能在不同的分辨率會出現錯亂的頁面效果,)
      此時我們在17.html當中繼續添加一個div 代碼如下:

      1. <body>
      2. <div class="aaa">


      3. <div class="ccc">12</div>




      4. </div>

      5. </body>
      復制代碼
      css代碼如下:
      1. body{margin:0px; padding:0px;}


      2. .aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
      3. .ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}
      復制代碼
      我們來分析這個代碼:他也是讓這個.ccc的div 居中;那么此時的效果如下


      margin:50px 250px 10px 20px; 這樣呢,就表示的數值是上右下左  如果是margin:10px 30px; 就表示上下 左右的數值

      那么如果想要讓我們的.ccc黃色的div為垂直居中的話,我們應該怎么辦呢?可以設置它的邊距margin的數值,當然也可以設置外面大的div的內邊距的數值padding
      那么我們可以回憶總結下知識點;
      如果我們想要讓一個div居中的話-那么就要考慮到2個因素一個是水平居中和一個是垂直居中;當然不管是什么定位,我們只要設置它或者是包含這個div的margin和padding的數值就可以了;



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


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

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

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

      本版積分規則

      關閉

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


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

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

      GMT+8, 2022-9-9 22:59

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

      快速回復 返回頂部 返回列表
      肉欲精油按摩

      <big id="d1zzb"></big>

      <p id="d1zzb"><del id="d1zzb"></del></p>

        <track id="d1zzb"></track>
        <pre id="d1zzb"></pre><ruby id="d1zzb"><strike id="d1zzb"><b id="d1zzb"></b></strike></ruby>
        <pre id="d1zzb"><strike id="d1zzb"></strike></pre><address id="d1zzb"></address>

        <track id="d1zzb"></track>

        <pre id="d1zzb"></pre>