今天我们要介绍两种前端要用到的布局：第一种是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就可以了，具体代码如下：
game
html{
font-size:62.5%;
width:100%;
height:100%;
}
body{
margin: 0 auto;
font-family: ‘Helvetica Neue’, Helvetica, STHeiTi, sans-serif;
background-color:#f4f4f4;
padding:0;
font-size:1.4rem;
}
footer{
background-color:#CDCDCD;
}
p2{
font-size:1.6rem;
color:#000000;
font-weight:bold;
line-height:2rem;
}
.footerContent{
padding:1rem;
margin:0 auto;
height:4rem;
width:24rem;
background-color:#CDCDCD;
}
欲了解更多王冠一教授相关资讯，
请关注 “冠一学堂” 微信公众号。
