你如果要设置自适应的问题，那么就需要一个宽度100%也就是你最外围的那个div 设置css宽度100%；
第二步，设置li标签宽度60%；后面的span修改为li设置为40%；给他们都起一个css名字首先保证一行自适应，以下的那些复制就可以了；让li标签 float:left 或者让第二个li标签靠右对齐；
这样就可以实现区域自适应了；
注：这只是区域自适应，你也可以设置由浏览器的宽度变动，文字根据浏览器宽度变化而变动大小，这个就需要去判断了@media screen用这个方法就可以实现，如果不懂可以百度一下，有对应的教程，或者追问我也可以；我可以帮你解答；
可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover/* 将背景图片等比缩放填满整个容器 */
background-size:contain/* 将背景图片等比缩放至某一边紧贴容器边缘 */
扩展资料：CSS背景图片自适应、全屏、填充、拉伸
方法一：js控制
<div id="formbackground" style="position:absolutewidth:100%height:100%z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
</div>
<div id="formbackground" style="position:absolutez-index:-1"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
$('#formbackground').height($(window).height())
$('#formbackground').width($(window).width())
})
</script>
方法二：全浏览器兼容
.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg)
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"
-moz-background-size:100% 100%
background-size:100% 100%
}
在css中控制插入背景图片的大小用background-size
background-size使用语法有下面四种情况
background-size: length|percentage|cover|contain
length用法：
background-size:100px； //背景图片显示的宽和高为100像素
background-size:100px 160px；//背景图片显示的宽为100像素，高为600像素
percentage用法：
background-size：60%； //背景图片的显示宽度和高度是图片大小60%；
background-size：60% 80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；
cover用法：
background-size：cover； //把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain用法：
background-size：contain； //把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
扩展资料
background-size属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
参考资料
百度百科——background(计算机专业术语)
