zoukankan      html  css  js  c++  java
  • 将所需要的图标排成一列组成一张图片,方便管理。li的妙用

    我在做一个网站的header

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

    (图片的名字是top_iocpng)拼成的整个图片作为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外面所以看不到。

  • 相关阅读:
    iOS 多线程/GCD
    iOS推送通知的实现步骤
    Swift中文教程-学习
    设计模式——观察者模式
    SSM学习
    Servlet 学习
    java基础
    DOM中节点
    会议管理系统设计
    springboot与thymeleaf 整合
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5240816.html
Copyright © 2011-2022 走看看