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 亚洲综合一区二区,97在线国产视频,一二三四日本高清免费看 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          web前端開發(fā)課-css文本模塊-垂直對齊 #軟件開
          
        
           
          
	
	
          
		web前端開發(fā)課-css文本模塊-垂直對齊 #軟件開發(fā)
          
                        
          eb前端開發(fā)課程：css文本模塊-垂直對齊。
          講課人：波波老師。
          垂直對齊vertical-align，這個只能用于在表格中的<td>或者<th>才可以垂直對齊其他的標簽，這個垂直對齊的功能是無效的。我們來看代碼。
          ·先來做一個<div>，VC看看能不能居中對齊，垂直居中。比如點VC把它的高度設(shè)為100px。
          ·來加個背景顏色，background-color，可以看到它有一個灰色的背景色，給它加個vertical-align，看看這個middle顯然沒有效果。
          ·再來做一個表格，table，一個tr，再來個td*3，分別做class="vt"，class="vc"，class="evb"。
          ·來做個table，做一下樣式，把它的寬度設(shè)為100%，然后td，把它的邊框。
          ·可以看到這個表格已經(jīng)出來了，這個時候在VC這里做一個居中對齊，可以看到它是居中了，底部對齊，頂部對齊。
          ·再加兩個.vt，做一個頂部對齊vertical-align：top，可以看到這個vt已經(jīng)頂部對齊了。
          ·再來做這個.vb的底部對齊，點vb，vertical-align：bottom，這個變成底部對齊了。
          演示到這里。
          用CSS可以大大提高HTML表格的外觀。
          CompanyContactCountry
          Alfreds FutterkisteMaria AndersGermany
          Berglunds snabbk?pChristina BerglundSweden
          Centro comercial MoctezumaFrancisco ChangMexico
          Ernst HandelRoland MendelAustria
          Island TradingHelen BennettUK
          K?niglich EssenPhilip CramerGermany
          Laughing Bacchus WinecellarsYoshi TannamuriCanada
          Magazzini Alimentari RiunitiGiovanni RovelliItaly
          North/SouthSimon CrowtherUK
          Paris spécialitésMarie BertrandFrance
          The Big CheeseLiz NixonUSA
          VaffeljernetPalle IbsenDenmark
          表格邊框
          指定CSS表格邊框，使用border屬性。
          下面的例子指定了一個表格的Th和TD元素的黑色邊框：
          實例
          table, th, td
          {
          border: 1px solid black;
          }
          請注意，在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。
          為了顯示一個表的單個邊框，使用 border-collapse屬性。
          折疊邊框
          border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個單一的邊框或隔開：
          實例
          table
          {
          border-collapse:collapse;
          }
          table,th, td
          {
          border: 1px solid black;
          }
          表格寬度和高度
          Width和height屬性定義表格的寬度和高度。
          下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：
          實例
          table 
          {
          width:100%;
          }
          th
          {
          height:50px;
          }
          表格文字對齊
          表格中的文本對齊和垂直對齊屬性。
          text-align屬性設(shè)置水平對齊方式，像左，右，或中心：
          實例
          td
          {
          text-align:right;
          }
          垂直對齊屬性設(shè)置垂直對齊，比如頂部，底部或中間：
          實例
          td
          {
          height:50px;
          vertical-align:bottom;
          }
          表格填充
          如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用td和th元素的填充屬性：
          實例
          td
          {
          padding:15px;
          }
          表格顏色
          下面的例子指定邊框的顏色，和th元素的文本和背景顏色：
          實例
          table, td, th
          {
          border:1px solid green;
          }
          th
          {
          background-color:green;
          color:white;
          }
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          .表格的寬度 高度 邊框 <width> <height> <border>
          2.表格的背景顏色和圖片 <colcr>顏色背景圖片顏色可通過<background> <bgcolor>背景顏色
          3.表格以及單元格內(nèi)容的對齊方式 <aligh>分為<right>右對齊 <center>居中對齊 <left>左對齊
          4.單元格的填充和間距 <cellspacing>間距 <cellpadding>填充
          5.<font>標簽可以設(shè)置字體字號以及顏色

          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="utf-8" />
           <title>優(yōu)化表格</title>
           </head>
           <body>
           <table border="0" width="395" cellpadding="0" cellspacing="0">
           <tr>
           <td colspan="4" background=""><font color="white"></font><b>&nbsp;&nbsp;&nbsp;&nbsp;本周暢銷筆記本排名top3<font></font></b></td>
           </tr>
           </table>
           <table>
           <tr>
           <td>
           <table>
           <tr>
           <td colspan="2">京東超市/td>
           </tr>
           <tr>
           <td colspan="2">< img src="img/1.jpg" alt=""></td>
           </tr>
           <tr>
           <td>< img src="img/人.png" alt=""></td>
           <td>< img src="img/羅賓.jpg" alt=""></td>
           </tr>
           </table>
           </td>
           </tr>
           </table>
           </body>
          </html>
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精品一区二区资源|
台湾无码一区二区|
国产精品视频一区二区猎奇|
无码毛片一区二区三区视频免费播放
|
国产精品一区二区无线|
国内精品一区二区三区东京|
亚洲国产精品一区第二页|
国产精品一区电影|
亚洲乱码av中文一区二区|
末成年女AV片一区二区|
日本一区二区在线|
亚洲AV本道一区二区三区四区|
久久亚洲中文字幕精品一区四|
视频一区视频二区在线观看|
国产精品一区二区综合|
国产精品盗摄一区二区在线|
日韩精品一区在线|
福利一区二区在线|
精品乱码一区内射人妻无码|
国产综合精品一区二区|
精品一区二区三区水蜜桃|
精品视频在线观看一区二区|
国产一区二区三区不卡在线观看|
爱爱帝国亚洲一区二区三区|
麻豆一区二区三区蜜桃免费|
亚洲国模精品一区|
日本一区二区三区高清|
亚洲乱码国产一区三区|
国产AV午夜精品一区二区入口|
无码精品人妻一区二区三区漫画|
无码一区二区三区在线观看|
人妻无码视频一区二区三区|
国产大秀视频在线一区二区|
无码日本电影一区二区网站|
正在播放国产一区|
中日av乱码一区二区三区乱码|
亚洲国产精品无码久久一区二区|
久久久91精品国产一区二区|
国产精品自拍一区|
痴汉中文字幕视频一区|
国产在线精品一区二区中文|