两种添加图标布局

 <style>
        /* 初始化样式 */

        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style-type: none;
        }

        input,
        button {
            outline: none;
        }

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        .c:after {
            clear: both;
            width: 0;
            padding: 0;
            content: "";
            display: block;
            visibility: hidden;
        }

        html,
        body {
            background: #ebf9f9;
        }
        /* 添加样式 */

        #header>div {
            width: 500px;
            height: 100px;
            margin-top:20px;
        }
        .one{
            background: #0f0;

        }
        .two{
            background: orange;

        }

        #header .one ul>li {
            padding: 10px 0px 10px 20px;
        }

        #header .one ul>li a {
            padding-left: 16px;
            background: url(http://r.biquge5200.com/images/all.gif) no-repeat;
            border: 1px solid red;
        }

        #header .one ul>li:nth-of-type(1) a {
            background-position: 0px 5px;
        }

        #header .one ul>li:nth-of-type(2) a {
            background-position: 0px -16px;
        }

        .two ul li{
           position:relative;
        }
        .two ul li span{
            display: inline-block;
            border:1px solid red;
            width:20px;
            height:21px;
            position:absolute;
            left:0;
            top:0;
        }
          .two ul li{
              margin:0px 20px;
          }
          .two ul li  a{
              margin-left:20px;
          }
        .two ul li span{
                background: url(http://r.biquge5200.com/images/all.gif) no-repeat;
        }
        .two ul li:nth-of-type(1) span{
            background-position: 0px 5px;
        }
        .two ul li:nth-of-type(2) span{
            background-position: 0px -16px;

        }
    </style>
</head>

<body>
    <div id="header">
        <div class="one">
            <ul>
                <li class="l">
                    <a href>将笔趣阁快捷键下载到桌面</a>
                </li>
                <li class="l">
                    <a href>收藏笔趣阁</a>
                </li>
            </ul>
        </div>
        <div class="two">
            <ul>
                <li class="l">
                    <span></span>
                    <a href>将笔趣阁快捷键下载到桌面</a>
                </li>
                <li class="l">
                    <span></span>
                    <a href>收藏笔趣阁</a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

时间: 2024-11-06 03:51:59

两种添加图标布局的相关文章

java中两种添加监听器的策略

/*第一种:将事件的处理委托给其他对象,下面的例子是委托给了MyListener(implements ActionListener)*/ 1 import java.applet.Applet; 2 import java.awt.event.*; 3 import java.awt.*; 4 public class ChangeColor extends Applet{//Applet的默认布局为FlowLayout方式 5 Color myColor; 6 String str; 7 B

java 序列化 serialVersionUID 的作用 和 两种添加方式

serialVersionUID适用于Java的序列化机制.简单来说,Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地相应实体类的serialVersionUID进行比较,如果相同就认为是一致的,可以进行反序列化,否则就会出现序列化版本不一致的异常,即是InvalidCastException. serialVersionUID有两种显示的生成方式:        一是默认的1

QListWidget特别简单,但有两种添加item的方式

虽然特别简单,但是对于小白来说,还是有必要过一下脑子和眼睛,还有手的(江湖传言:眼过千变,不如手过一遍),所以记录在此: #include "tablewidgetxxx.h" #include <QtGui/QApplication> #include <QtGui/QListWidget> #include <QtGui/QSplitter> int main(int argc, char *argv[]) { QApplication app(

android菜单创建的两种方式和菜单项添加图标

    菜单创建的两种方式:     1.在xml文件中创建菜单: 具体代码: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="com.xunfang.menucreate.MainActivity" > //此处创建子菜单 <

Android在布局中动态添加view的两种方法

一.说明 添加视图文件的时候有两种方式:1.通过在xml文件定义layout:2.java代码编写 二.前言说明 1.构造xml文件 2.LayoutInflater 提到addview,首先要了解一下LayoutInflater类.这个类最主要的功能就是实现将xml表述的layout转化为View的功能.为了便于理解,我们可以将它与findViewById()作一比较,二者都是实例化某一对象,不同的是findViewById()是找xml布局文件下的具体widget控件实例化,而LayoutI

adapter中有两种布局

A B 两种布局  重用view 对象 有可能应用B布局 结果从用的是A布局  所以重用之前要判断 if (position == list.size() - 1) {            View addView = inflater.inflate(R.layout.gv_item_add, null);            LogUtil.i(TAG, "=====返回添加view===");            return addView;        } else

Android两种为ViewPager+Fragment添加Tab的方式

在Android开发中ViewPager的使用是非常广泛的,而它不仅仅能够实现简单的开始引导页,还可以结合Fragment并添加Tab作为选项卡或为显示大批量页面实现强大的顺畅滑动 下面介绍两种为ViewPager+Fragment添加Tab的方式: 第一种: 在MainActivity布局中定义一个ViewPager 在MainActivity中声明ViewPager并实现它的Adapter继承自FragmentPagerAdapter 首先需要通过重写有参的构造方法来获取FragmentMa

实现顶部轮播,下部listview经典布局的两种方式

开头: 在做android开发的时候,我们经常会遇到这样的布局,上面是一个图片轮播图,下面是一些列表的项目.很多新闻app,视频类app都采用这样的布局.起初的时候 由于没有很多参考,我自己想到了一种实现方式,就是用scrollview作为外面最大的布局,然后里面嵌套viewpager和listview,但是我现在非常不推荐这种方式,一方面由于这种方式 需要将listview完全展开,缺少了getview函数中应该有的复用与优化.而且结构嵌套复杂.经过一番查找与学习,学习到两种比较规范或者结构比

在Android中如何添加menu两种方法

Android界面开发之菜单Menu用法 Android手机用一个按键“Menu”专门来显示菜单,所以,当应用程序设置了菜单,我们便可以通过该按键来操作应用程序的菜单选项. 要实现菜单功能,首先需要通过方法onCreateOptionsMenu来创建菜单,然后需要对其能够触发的事件进行监听,这样才能够在事件监听onOptionsItemSelected中根据不同的菜单选项来执行不同的任务.当然,可以通过XML布局来实现,也可以通过menu.add方法来实现.下面的示例分别采用了这两种不同的方法来