css做图片 文字列表

CSS是一种非常强大的网页设计语言，可以对网页的样式进行自由控制。其中，使用CSS来做图片文字列表是非常方便的。下面我们来看一下如何使用CSS来实现这个功能。

  ul>
        li>
    img src="image1.jpg">
    图片1/li>
        li>
    img src="image2.jpg">
    图片2/li>
        li>
    img src="image3.jpg">
    图片3/li>
      /ul>
  ul {
        list-style: none;
 /*去掉li的默认样式*/  }
  li {
        margin-bottom: 20px;
 /*为了让每个li之间有20px的空隙*/  }
  img {
        float: left;
     /*让图片左浮动*/    margin-right: 10px;
 /*为了让图片和文字之间有10px的空隙*/  }
    

如上所示的代码，我们使用了ul> 和li> 标签来创建列表，然后使用CSS来去掉默认样式和设置样式。具体来说，我们给ul> 标签设置了“list-style: none”，这样我们就可以去掉默认的黑点，让列表看起来更加美观。然后我们给li> 标签设置了一个“margin-bottom: 20px”的样式，这样每个li之间就会有一个20px的空隙。

最后，我们给img> 标签设置了“float: left”和“margin-right: 10px”的样式。这样每个图片都会左浮动，并且和文字之间有一个10px的空隙。

通过这种方法，我们可以轻松地实现图片文字列表，并且可以自由控制样式，让列表看起来更加美观。希望这篇文章能够对您有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！