<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      廣告在文章的中間顯示
                
                  發表時間：2023-05-28             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]我們經�？匆姶笳镜膹V告都是放在內容中間實現文字環繞的呢， 一般普通小站廣告只能放在內容開頭或者結尾， 也許大站的cms系統帶這個功能吧， 我們小站常用cms的基本沒這個功能， 因為內容標簽里面不可能...
      我們經�？匆姶笳镜膹V告都是放在內容中間實現文字環繞的呢， 一般普通小站廣告只能放在內容開頭或者結尾， 也許大站的cms系統帶這個功能吧， 我們小站常用cms的基本沒這個功能， 因為內容標簽里面不可能再自動加入一個廣告標簽， 除非你添加文章的時候手動編輯， 那不累死。  
      我也一直沒想到過用css來控制， 主要是沒想到這個clear屬性， 今天偶然看到一個介紹， 才知道原來實現文字環繞是如此簡單。  
      <div class="news">
        <div style="float:left;height:300px;width:0">一個寬為0的空白層， 利用該層的高度控制廣告層上下的位置</div>
        <div style="float:left;height:250px;width:250px;clear:left;">廣告代碼</div>
        </div> 
         
      關鍵在于clear:left的作用， clear有3個屬性：clear:both， clear:left， clear:right， 分別表示清除兩邊， 左邊， 右邊的浮動塊。  在廣告層加上clear:left， 那么就表示該層相對于空白層來說不浮動了， 就往下移動了， 太妙了， 哈哈。  
      我們來比較一下：
      <div class="news">
        <div style="float:left;height:300px;width:100px;background:#CCC;">給他加上寬度和背景便于觀察效果</div>
        <div style="float:left;height:250px;width:250px;">去掉了清除浮動， 你就明白了它的意義</div>
        </div> 
         
      如果再加上這樣一條：
      <style>.news img,.news table{clear:both;}</style> //讓內容里面的圖片和表格不會遮到廣告 
         
      很遺憾， 上面的測試發現只有ie可行， firefox和opera還有不同的結果， ie的效果是圖片遇到廣告層自動下移， firefox是不會下移， 但是不會遮住廣告層， 因為廣告層在最前， opera是圖片不會下移， 會遮住廣告層， 搞笑啊。  
      再次改進：
      <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //讓圖片和表格自動處于最底層 
         
      終于可以了， 比較完美了， 廣告內容環繞的效果就這樣搞定了：）
      忘記加上了 <style>.news{float:left;}</style> 
         
      有人問要文字上右下都環繞， 我改了一下， 如下：
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
        <html xmlns="http://www.w3.org/1999/xhtml";>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
        <title>利用css的clear屬性搞定gg廣告文字環繞</title>
        <meta name="keywords" content="css,clear,ggad,文字環繞" />
        <body>
        <div style="float:left;">
        <div style="float:left;height:200px;width:1px;"><!--一個寬為1px的空白層， 利用該層的高度控制廣告層上下的位置。  寬為0就不能控制上下了， 原因不知道。  --></div>
        <div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--廣告代碼， firefox和opera還有少量偏差， 需要另外調整， 就不寫了， 基本可以。  --></div>
        <p>新聞內容</p>
        </div>
        </body>
        </html>

      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清