图片下面加字排版

最新推荐文章于 2023-01-19 09:30:00 发布

Chet_Li

最新推荐文章于 2023-01-19 09:30:00 发布

阅读量868

点赞数

分类专栏：记一下文章标签： html css

本文链接：https://blog.csdn.net/Mli_Mi/article/details/49278693

版权

记一下专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<pre id="best-content-1185049603" accuse="aContent" class="best-text mb-10" style="margin-top: 0px; margin-bottom: 10px; padding: 0px; font-family: arial, 'courier new', courier, 宋体, monospace, 'Microsoft YaHei'; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; color: rgb(51, 51, 51); line-height: 24px; background-color: rgb(243, 255, 236);">html:<pre name="code" class="html"><div class="wrap">
    <ul >        
        <li>
          <a href="#"><img src="images/jm1.jpg" /></a>
          <h1>历史教学创新和实践</h1>
          <p>类型：历史</p>
          <p>主讲：张琪</p>
        </li>      
        <li>
          <a href="#"><img src="images/jm1.jpg" /></a>
          <h1>历史教学创新和实践</h1>
          <p>类型：历史</p>
          <p>主讲：张琪</p>
        </li>
        <li>
          <a href="#"><img src="images/jm1.jpg" /></a>
          <h1>历史教学创新和实践</h1>
          <p>类型：历史</p>
          <p>主讲：张琪</p>
        </li>
        <li>
          <a href="#"><img src="images/jm1.jpg" /></a>
          <h1>历史教学创新和实践</h1>
          <p>类型：历史</p>
          <p>主讲：张琪</p>
        </li>  
        <li>
          <a href="#"><img src="images/jm1.jpg" /></a>
          <h1>历史教学创新和实践</h1>
          <p>类型：历史</p>
          <p>主讲：张琪</p>
        </li>
      </ul>
 </div>

css:

.wrap{ margin-top:10px;}
.wrap li{ width:152px; height:128px;  margin-left:8px; margin-top:10px; margin-bottom:10px; float:left; text-align:center; display:inline;}
.wrap li h1{ font-size:12px; color:#005eac; line-height:22px; text-align:center; margin-top:5px; font-weight:normal;}
.wrap li p{ color:#666; line-height:22px; text-align:center;}