VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • css3教程之CSS 图片廊

以下是使用CSS创建图片廊：

Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述

图片廊

T以下是使用CSS创建图片廊：

实例


	
    
		
  1. 
			
    
				<html>  <head>  <style>  div.img    {    margin:2px;    border:1px solid #0000ff;    height:auto;    width:auto;    float:left;    text-align:center;    }  div.img img    {    display:inline;    margin:3px;    border:1px solid #ffffff;    }  div.img a:hover img    {    border:1px solid #0000ff;    }  div.desc    {    text-align:center;    font-weight:normal;    width:120px;    margin:2px;    }  </style>  </head>  <body>  <div class="img">    <a target="_blank" href="klematis_big.htm">    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">    </a>    <div class="desc">Add a description of the image here</div>  </div>  <div class="img">    <a target="_blank" href="klematis2_big.htm">    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">    </a>    <div class="desc">Add a description of the image here</div>  </div>  <div class="img">    <a target="_blank" href="klematis3_big.htm">    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">    </a>    <div class="desc">Add a description of the image here</div>  </div>  <div class="img">    <a target="_blank" href="klematis4_big.htm">    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">    </a>    <div class="desc">Add a description of the image here</div>  </div>  </body>  </html>
    
		
    2. 
	






      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程