将所需要的图标排成一列组成一张图片，方便管理。li的妙用

 

我在做一个网站的header

 

但是视频教学里面将电话图标，微信图标，以及每一个英文字母右边的小点拼成一副图。

（图片的名字是top_ioc。png）拼成的整个图片作为li的背景。通过移动就可以分别将每幅图放到指定位置。

.top_menu { float:left; }

.top_menu li { float:left; background:url(../images/top_ico.png) no-repeat right 14px; font-size:13px; line-height:30px; padding-right:18px; margin-right:15px; }

.top_menu a { color:#c0c0c0; }

.top_menu a:hover { color:#fff; }

.top_menu .no_dot { background:none; padding:0; margin:0; }

 

.top_bar { float:right; }

.top_bar li { float:left; height:30px; color:#fff; font-weight:bold; font-size:13px; line-height:30px; }

.top_bar .phone { background:url(../images/top_ico.png) no-repeat 8px -16px; padding:0 38px; }

.top_bar .help { background:url(../images/top_ico.png) no-repeat 0 -46px; padding:0 38px; }

.top_bar .help a { color:#fff; }

我的问题是：body有一个背景，每张图片作为li的背景他们不会覆盖吗？

 

 

 

解决：因为列排列的图片需要的图片放在li里面，作为背景，不需要的放在li外面所以看不到。

转载于:https://www.cnblogs.com/hduhdc/p/5240816.html