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外面所以看不到。

  • 相关阅读:
    第三章:Hadoop简介及配置Hadoop-1.2.1,hbase-0.94.13集群
    maven环境的搭建,lemon-OA办公系统的搭建
    如何打开mo文件并修改 PoEdit
    安装Elastix-2.4版本
    RabbitMQ安装
    Yum编译安装Error Downloading Packages报错
    linux:ping不通www.baidu.com
    tar命令解压缩出错
    PV、UV
    使用存储过程创建数据
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5240816.html
Copyright © 2011-2022 走看看