search

博客列表 >a链接中包裹图片文字介绍

a链接中包裹图片文字介绍

lnmp
lnmp原创
2022年03月18日 19:10:12728浏览
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>image</title>
  6. </head>
  7. <style>
  8.     body{
  9.         margin:0px;
  10.         padding:10px;
  11.         padding-left: 35%;    
  12.         font-family: "微软雅黑";
  13.     }
  14.     ul,li{
  15.         padding: 0px;
  16.         margin:0px;
  17.         list-style: none;
  18.         display: flex;
  19.         padding-left: 15px;
  20.     }
  21.     a{
  22.         /*list-style: none;*/
  23.         text-decoration: none;
  24.     }
  25.     ul>li>a>img{
  26.         width: 200px;
  27.     }    
  28.     .title{
  29.         text-align: center;
  30.     }
  32. </style>
  33. <body>
  34.     <ul>
  35.             <li>
  36.                 <a href="">
  37.                     <img src="../images/a.png" alt="">
  38.                     <div class="title">
  39.                         <span>这是一个图片</span>
  40.                     </div>
  41.                 </a>
  42.             </li>
  43.             <li>
  44.                 <a href="">
  45.                     <img src="../images/a.png" alt="">
  46.                     <div class="title">
  47.                         <span>这是一个图片</span>
  48.                     </div>
  49.                 </a>
  50.             </li>
  51.             <li>
  52.                 <a href="">
  53.                     <img src="../images/a.png" alt="">
  54.                     <div class="title">
  55.                         <span>这是一个图片</span>
  56.                     </div>
  57.                 </a>
  58.             </li>
  59.         </ul>    
  60. </body>
  61. </html>

效果图

上一条：图文列表和表格（商品表）下一条：表格/图片/链接/列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议