AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

CSS 图片廊

CSS教程 AI君 35℃

CSS 图片廊


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

Klematis

添加图片描述
Klematis

添加图片描述
Klematis

添加图片描述
Klematis

添加图片描述

图片廊

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

实例

 <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="http://www.ainoob.cn/wp-content/images/202002/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="http://www.ainoob.cn/wp-content/images/202002/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="http://www.ainoob.cn/wp-content/images/202002/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="http://www.ainoob.cn/wp-content/images/202002/klematis4_small.jpg" alt="Klematis" width="110" height="90">
   </a>
   <div class="desc">Add a description of the image here</div>
 </div>

 </body>
 </html>

转载请注明:www.ainoob.cn » CSS 图片廊

喜欢 (0)or分享 (0)