<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    .quan{

        width:315px;

        height:450px;

        border:#D87F15 1px solid;

        background:#CDD4DC;

        }

    .head{

        background:#2A4F7B;

        color:#FFF;

        font:20px bold;

        text-indent:20px;

        }

    ul{

        margin:0px;

        padding:0px;

        }

    li{

        padding:11px;

        float:left;

        list-style:none;

    }

    h4{

        margin:8px;

        }

    .span1{

        background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg);

        background-repeat:no-repeat;

        background-position:0px 2px;

        text-indent:1em;

        margin:8px;

        }

    .span2{

        background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg);

        background-repeat:no-repeat;

        background-position:0px 2px;

        text-indent:1em;

        margin:8px;

    }

    img{

        border:#FFF 2px solid;

    }

    a:hover img{

        border:#D87F15 2px solid;

    }

  /*

  ul,li{

      margin:0px;

      padding:0px;

  }

  ul{

      border:1px red solid;

      width:420px;

  }

  ul li{

      width:140px;

      float:left;

      border:1px blue solid;

      list-style:none;

  }

  ul li a:link img{

       border:1px red solid;

  }

  ul li a:hover img{

       border:1px blue solid;

  }

  */

</style>

</head>

<body>

<div class="quan">

<div class="head">精彩视频</div>

<ul>

     <li>

        <a href="#"><img src="图片素材/video-01.jpg" /></a>

        <h4>享受丰硕的成果</h4>

        <p class="span1">时长：80秒</p>

        <p class="span2">点击：45356</p>

    </li>

    <li>

        <a href="#"><img src="图片素材/video-01.jpg" /></a>

        <h4>享受丰硕的成果</h4>

        <p class="span1">时长：80秒</p>

        <p class="span2">点击：45356</p>

    </li>

    <li>

        <a href="#"><img src="图片素材/video-01.jpg" /></a>

        <h4>享受丰硕的成果</h4>

        <p class="span1">时长：80秒</p>

        <p class="span2">点击：45356</p>

    </li>

    <li>

        <a href="#"><img src="图片素材/video-01.jpg" /></a>

        <h4>享受丰硕的成果</h4>

        <p class="span1">时长：80秒</p>

        <p class="span2">点击：45356</p>

    </li>

</ul>

</div>

</body>

</html>

将img的border和a:hover的border设置成不一样就会发生有趣的情况。

踢掉某个li的更多相关文章

  1. Linux 系统强制踢掉登录用户并禁止用户再次登录系统

    标注:创建一个test测试用户,test用户使用Xshel工具ssh远程登录linux操作系统. 强制踢掉登录用户方法一: [root@cloucentos6 ~]# w               ...

  2. Linux用root强制踢掉已登录用户

    首先使用w命令查看所有在线用户: [root@VM_152_184_centos /]# w 20:50:14 up 9 days, 5:58, 3 users, load average: 0.21 ...

  3. linux强制踢掉登录用户【转】

    [root@Wang ~]# w :: up :, users, load average: 0.71, 0.58, 0.57 USER TTY FROM LOGIN@ IDLE JCPU PCPU ...

  4. Linux用root强制踢掉已登录用户；用fail2ban阻止ssh暴力破解root密码

    Linux用root强制踢掉已登录用户   首先使用w命令查看所有在线用户: [root@VM_152_184_centos /]# w 20:50:14 up 9 days, 5:58, 3 use ...

  5. Linux系统下强制踢掉登录用户

    1,利用who命令,找出用户登录的终端代号 who root     pts/0        2017-03-14 22:30 (223.1.1.1) root     pts/1        2 ...

  6. Linux：使用root踢掉其他用户

     首先使用w命令查看所有在线用户:  执行命令: pkill -kill -t tty3 再用w命令查看是否已经强制踢掉: TTY 是终端的意思    TTY :0 表示root用户登陆图形化界面的终 ...

  7. centos如何强行踢掉某登录用户

    linux是一个多用户操作系统,用户可以在不同的地方链接上LINUX服务器. 在系统中我们可以用w或者who来查看用户: [root@7273 ~]# who root pts/0 2019-04-1 ...

  8. php同一个用户同时只能登陆一个, 后登陆者踢掉前登陆者（排他登陆）

    通常用户登陆,如果没有特别的限定, 同一个用户可以同时登陆, 今天搞了一个东西限定一个用户不能同时登陆到一个系统上, 后登陆者会把前面登陆的踢出来.(有点像QQ,同个帐号不能在多个地方同时在线, 后面 ...

  9. 这个注册的 IP 网络都不通了，Eureka 注册中心竟然无法踢掉它！

    本文导读: 微服务技术架构选型介绍 k8s 容器化部署架构方案 Eureka 注册中心问题场景 问题解决手段及原理剖析 阅读本文建议先了解: 注册中心基本原理 K8s(Kuberneters)基本概念 ...

随机推荐

  1. 【自定义IK词典】Elasticsearch之中文分词器插件es-ik的自定义词库

    Elasticsearch之中文分词器插件es-ik 针对一些特殊的词语在分词的时候也需要能够识别 有人会问,那么,例如: 如果我想根据自己的本家姓氏来查询,如zhouls,姓氏“周”.      如 ...

  2. KMP 初级板子 待更新

    复杂度 O(n+m) 这个博主写的蛮不错的 http://www.cnblogs.com/SYCstudio/p/7194315.html 1.本文中,所有的字符串从0开始编号2.为了在程序中表示方便 ...

  3. 【Android实验】第一个Android程序与Activity生命周期

    目录 第一个Android程序和Activity生命周期 实验目的 实验要求 实验过程 1. 程序正常启动与关闭 2. 外来电话接入的情况 3. 外来短信接入的情况 4. 程序运行中切换到其他程序(比 ...

  4. 警告：Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA

    加入 import os os.environ[' demo: import os os.environ[' import tensorflow as tf tf.enable_eager_execu ...

  5. Ubuntu14.04 server （amd64）修改源

    1.备份原来的源文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.修改源 sudo vi /etc/apt/sources.li ...

  6. 简单介绍tomcat中maxThreads，acceptCount，connectionTimeout

    <?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...

  7. windows服务部署

    1.新建windows服务项目 2.编辑业务代码 我这里只写2句记录文本的测试代码 using System; using System.IO; using System.ServiceProcess ...

  8. netcat使用指南

    在网络工具中有“瑞士军刀”美誉的NetCat, 在我们用了N年了至今仍是爱不释手.因为它短小精悍(这个用在它身上很适合,现在有人已经将其修改成大约10K左右,而且功能不减少).现在就我的一些使用心得和 ...

  9. 16S 基础知识、分析工具和分析流程详解

    工作中有个真理:如果你连自己所做的工作的来龙去脉都讲不清楚,那你是绝对不可能把这份工作做好的. 这适用于任何行业.如果你支支吾吾,讲不清楚,那么说难听点,你在混日子,没有静下心来工作. 检验标准:随时 ...

  10. 3-9《元编程》第3章Tuesday:methods

    第3章methods Ruby是动态语言,有静态语言实现不了的技巧.本章讲解代码的重构,把代码变得更简洁. 3.2Dynamic Methods 3.21Calling Methods Dynamic ...