ul li 定制圆点，list-style-image调整图片圆点大小 与 文字和图片排版

        今天我们要介绍两种前端要用到的布局：第一种是ul li定制化圆点的样式，然后使其与文字居中排列，另外一种是文字与图片混排并居中排版。

        我们在使用ul li中通常会定制化圆点，使用如下代码就可以使圆点为自己设定的图片，然后调整圆点的对齐的像素

       ul li{
            list-style-type:none;
            background:url("img/ui.png") no-repeat 0rem 0.3rem;
            background-size:0.8rem 0.8rem;
        }

      
     我们在使用rem作为计量单位的时候在head标签需添加一些声明：

     这样我们就可以适配移动设备了。 效果图：

     另外当我们遇到文字和图片排版，这一直需要不断地去调试，例如我们想实现这样一个效果：

        我们可以使用span标签来规定文字的样式，使用一个div来包裹span和img标签，然后使用居中对齐的样式margin:0 auto就可以了，具体代码如下：

	
	
    
    
    
	
	



    

	         
	             欲了解更多王冠一教授相关资讯，

	             请关注 “冠一学堂” 微信公众号。