上图下文列表

基本HTML

第一种情况

         <ul class="ul-list">
		  <li>
			  <a href="" class="con">
				  <div class="pic"><img src="" alt=""></div>
				  <div class="txt">
					  <h3 class="tit">这里是标题</h3>
					  <div class="desc">这里是简介文本</div>
					  <!-- 以下为自定义 -->
					  <div class="info">
						  <span class="view">837</span>
						  <span class="date">2020-09-09</span>
					  </div>
				  </div>
			  </a>
		  </li>
	  </ul>

li里面的.con是a标签

此代码用于只有1个连接的时候

第二种情况

          <ul class="ul-list">
  		  <li>
  			  <div class="con">
  				  <div class="pic">
					 <a href=""><img src="" alt=""></a>
				  </div>
  				  <div class="txt">
  					  <h3 class="tit"><a href="">这里是标题</a></h3>
  					  <div class="desc">这里是简介文本</div>
  					  <!-- 以下为自定义 -->
  					  <div class="info">
  						  <span class="date">2020-09-09</span>
  						  <a href="" class="more">查看更多</span>
  					  </div>
  				  </div>
  			  </div>
  		  </li>
  	  </ul>

li 里的 .con 是 div 标签

此代码用于li里面多个a连接的时候

需要给图片、标题都要单独加上a连接