HTML5四张图片分两行显示,两张图片独占一行,每张图片下的文字要有超链接怎么写代码

如题所述

<html>
<head>
  <title>hello word</title>
<style type="text/css">

*, ul, li { margin: 0; border: 0; padding: 0; box-sizing: border-box; }
ul { list-style: none; }
.ul,.ul1{display:inline-block ;float:left;margin:0 auto;}
img{height:200px; width:200px;}
.ul li:nth-of-type(2),.ul1 li:nth-of-type(2){text-align:center;}

</style>  
</head>
<body>
<div class="ul">
  <ul> 
    <li> <img src=...></li>  
    <li>这图片很好看</li>
  </ul>
    <ul> 
    <li> <img src=...></li>  
    <li>这图片很好看</li>
  </ul>
  </div>
  
  <div class="ul1">  
    <ul> 
    <li> <img src=...></li>  
    <li>这图片很好看</li>
  </ul>
    <ul> 
    <li> <img src=...></li>  
    <li>这图片很好看</li>
  </ul>
</div>
</body>
</html>


温馨提示:答案为网友推荐,仅供参考
相似回答