Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 欧美精品成人免费视频,在线免费午夜视频,三区在线视频 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          如何處理html中內(nèi)聯(lián)元素之間水平空隙？
          
        
           
          
	
	
          
		
                        
          前端工作中，設(shè)計(jì)代碼時(shí)，經(jīng)常會(huì)有人手動(dòng)刪除行內(nèi)元素之間產(chǎn)生的額外空隙，并通過(guò)設(shè)置margin或padding來(lái)獲取想要間距嗎？如代碼：
          <div class=“”><span class=“bgr”>去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span></div>
          這看起來(lái)很不舒服，特別扔給給JS同事后，JS同事看完代碼后就會(huì)提出抱怨，代碼太亂，他們希望的代碼是如下：
          <div class="">
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          </div>
          那么有什么好的辦法解決的？答案也是有的。
          1.行內(nèi)元素之間的“換行符”產(chǎn)生間距
          <div class="">
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          </div>
          展現(xiàn)效果如下：
          2.行內(nèi)元素之間使用“tab(制表符)”產(chǎn)生間距
          <div class="">
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span>
          </div>
          展現(xiàn)效果如下：
          3.行內(nèi)元素之間使用“空格”產(chǎn)生間距
          <div class=""><span class="bgr">換行符產(chǎn)生間距</span> <span class="bgr">換行符產(chǎn)生間距</span> <span class="bgr">換行符產(chǎn)生間距</span> <span class="bgr">換行符產(chǎn)生間距</span>
          <span class="bgr">換行符產(chǎn)生間距</span> <span class="bgr">換行符產(chǎn)生間距</span>
          </div>
          展現(xiàn)效果如下：
          上以上3點(diǎn)可以看出，行內(nèi)元素之間產(chǎn)生的間距，是由于換行符、tab(制表符)、空格等字符引起，而字符的大小是定義字體大小來(lái)控制。
          那么改變字體的大小可調(diào)整行內(nèi)元素的間距么?
          上圖把字體從0px~18px~36px的調(diào)整，可見(jiàn)行內(nèi)元素之間的水平間距從無(wú)到有，并不斷變大，說(shuō)明行內(nèi)元素之間產(chǎn)生間距是由換行符、tab(制表符)、空格等字符引起的，那么設(shè)置字體大小font-size:0可以是不是可以在所有瀏覽器中除去這些間距呢？
          經(jīng)過(guò)測(cè)試后，可發(fā)現(xiàn)設(shè)置font-size:0并不能使得換行符、tab(制表符)、空格等在所有瀏覽器中產(chǎn)生的額外間距消失：
          1.IE6、7瀏覽器始終存在的 1px 空隙
          2.最新版本的Safari瀏覽器（5.1.7）不支持定義字體大小為 0 的瀏覽器
          通過(guò)查找資料后，一種比較正常的解決方法如下：
          1.針對(duì)IE6、7瀏覽器，使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔）
          *word-spacing:-1px;
          2.使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px
          html{-webkit-text-size-adjust:none;}
          問(wèn)題解決了，代碼如下：
          結(jié)構(gòu)：
          <div class="span-wrap">
          <span>字符產(chǎn)生間距</span>
          <span>字符產(chǎn)生間距</span>
          <span>字符產(chǎn)生間距</span>
          <span>字符產(chǎn)生間距</span>
          <span>字符產(chǎn)生間距</span>
          <span>字符產(chǎn)生間距</span>
          </div>
          樣式：
          html{
          -webkit-text-size-adjust:none;/* 使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px */
          }
          .span-wrap {
          font-size:0;/* 所有瀏覽器 */
          *word-spacing:-1px;/* 使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
          }
          .span-wrap span{
          font-size: 12px;
          letter-spacing: normal;/* 設(shè)置字母、字間距為0 */
          word-spacing: normal; /* 設(shè)置單詞、字段間距為0 */
          }
          干脆直接使用浮動(dòng)，簡(jiǎn)單，也不用寫多余的hack，多好。的確使用浮動(dòng)技術(shù)是比較好的辦法，實(shí)際工作中我們使用浮動(dòng)也是比較多，但是也并不是每處地方都要使用浮動(dòng)，而且使用浮動(dòng)后還需要清除浮動(dòng)的操作。
          文/丁向明
          做一個(gè)有博客的web前端自媒體人，專注web前端開(kāi)發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833
          http://dingxiangming.com
          lt;!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=utf-8" />
          <title>網(wǎng)站頁(yè)面</title>
          <style type="text/css">
          * {
          margin: 0px;
          padding: 0px;
          border-top-width: 0px;
          border-right-width: 0px;
          border-bottom-width: 0px;
          border-left-width: 0px;
          }
          body {
          background-color: #FFFFFF;
          text-align: center;
          font-family: "宋體";
          font-size: 12px;
          color: #575757;
          }
          #banner {
          height: 210px;
          width: 982px;
          margin: 0 auto;
          }
          #menu {
          height: 87px;
          width: 982px;
          margin: 0 auto;
          }
          </style>
          </head>
          <body>
          <div id="box">
          <div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
          <div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />
          <img src="images/205.jpg" width="106" height="80" alt="menu1" />
          <img src="images/206.jpg" width="102" height="80" alt="menu2" />
          <img src="images/207.jpg" width="105" height="80" alt="menu3" />
          <img src="images/208.jpg" width="100" height="80" alt="menu4" />
          <img src="images/209.jpg" width="77" height="80" alt="menu5" />
          <img src="images/210.jpg" width="86" height="80" alt="menu6" />
          <img src="images/211.jpg" width="77" height="80" alt="menu7" />
          <img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
          </div>
          </body>
          </html>
          根據(jù)我們的案例，邊框、邊界、邊距都設(shè)置成0了，圖片與圖片之間還是有空隙，這是為什么呢？
          記得之前解決的方法是，img標(biāo)簽符之間不要有空格或者回車。
          就是寫成這樣的
          還有些其他的方法，可以讓其在水平方向上不留下空隙，也就是左右的空隙，比如
          #menu { font-size:0;} //意思是父級(jí)元素的字體大小為0，img默認(rèn)是根據(jù)父元素的baseline進(jìn)行對(duì)齊的，把父元素的字體大小設(shè)置為0，就沒(méi)有空隙了，作為子元素的img對(duì)齊相應(yīng)的也就沒(méi)有空隙了
          #menu {letter-spacing:-600px}
          0
          本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。
          一、我們先創(chuàng)建一張空白的網(wǎng)頁(yè)，網(wǎng)頁(yè)要自適應(yīng)手機(jī)。
          圖1
          二、我們?cè)賱?chuàng)建網(wǎng)頁(yè)的頭部。
          圖2
          圖3
          三、做出來(lái)的網(wǎng)頁(yè)頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。
          圖4
          圖5
          四、給網(wǎng)頁(yè)頭部添加一些內(nèi)容。
          圖6
          圖7
          五、接下來(lái)開(kāi)始做導(dǎo)航條了。
          圖8
          圖9
          六、發(fā)現(xiàn)沒(méi)，導(dǎo)航條居然看不見(jiàn)，沒(méi)有東西在里面自然是看不見(jiàn)的，我們加三個(gè)鏈接吧。
          圖10
          圖11
          七、這回是看見(jiàn)了，不過(guò)樣式太丑，我們改改樣式。
          圖12
          圖13
          八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點(diǎn)動(dòng)態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時(shí)，鏈接塊變色。
          圖14
          圖15
          九、開(kāi)始做網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。
          圖16
          圖17
          十、我想讓它橫著排，它卻是豎著排，改改各個(gè)塊的樣式。
          圖18
          圖19
          十一、給主體的各個(gè)塊加點(diǎn)內(nèi)容。
          圖20
          圖21
          十二、內(nèi)容是有了，但你會(huì)發(fā)現(xiàn)各塊之間沒(méi)有間隙，貼得太近了，我們改一下樣式，加個(gè)內(nèi)部距離。
          圖22
          圖23
          十三、距離是有了，但有一個(gè)側(cè)欄跑到了另一行，怎么回事？原來(lái)padding是會(huì)改變盒子的整體寬度，我們?cè)臼?00%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。
          圖24
          圖25
          十四、這回終于在一行了，接下來(lái)可以做網(wǎng)頁(yè)底部了。
          圖26
          圖27
          十五、改改樣式，讓底部好看一點(diǎn)。
          圖28
          圖29
          十六，這個(gè)時(shí)候，網(wǎng)頁(yè)的整體版面就完成了，再補(bǔ)充一個(gè)小內(nèi)容，讓網(wǎng)頁(yè)瀏覽器在小于600像素寬的時(shí)候，主體內(nèi)容的三個(gè)塊由橫變豎。
          圖30
          圖31
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲性无码一区二区三区|
精品一区二区三区AV天堂|
国产一区二区三区国产精品|
国产一区二区在线看|
国产凸凹视频一区二区|
一区二区三区国产精品|
一区二区在线视频免费观看|
天堂一区二区三区精品|
日韩人妻精品一区二区三区视频|
久久久久人妻精品一区三寸蜜桃|
国产福利一区视频|
午夜一区二区免费视频|
国产一区二区在线观看|
亚洲一区二区三区在线网站|
日本不卡一区二区视频a|
日韩精品无码视频一区二区蜜桃
|
亚洲日本一区二区三区在线|
波多野结衣一区在线|
精品国产精品久久一区免费式
|
色噜噜AV亚洲色一区二区|
无码人妻精品一区二|
一区二区三区四区电影视频在线观看
|
国产福利一区视频|
爱爱帝国亚洲一区二区三区
|
av无码一区二区三区|
亚洲AV日韩精品一区二区三区|
国产精品免费综合一区视频|
精品国产一区二区三区香蕉事|
国产精品视频一区麻豆|
无码中文字幕乱码一区
|
美女AV一区二区三区|
日韩在线视频一区|
日韩A无码AV一区二区三区|
无码人妻精品一区二区三区99不卡|
国产在线一区二区三区在线|
一区免费在线观看|
熟妇人妻一区二区三区四区|
一区二区在线免费观看|
亚洲中文字幕一区精品自拍
|
国产精品乱码一区二区三区|
国产一区二区精品久久岳|