<!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. 通过设置代理，解决服务器禁止抓取，报“java.io.IOException: Server returned HTTP response code: 403 for URL”错误的方法

    java.io.IOException: Server returned HTTP response code: 403 for URL: http:// 这个是什么异常呢? 当你使用java程序检索 ...

  2. 安装cartographer_ros

    这里使用的是hitcm(张明明)的github地址,由于google官方的教程需要FQ下载一些文件,因此容易失败,经验证hitcm(张明明)对原文件进行了少许修改后可以成功安装,在他的修改中核心代码不 ...

  3. python里的apply,applymap和map的区别

    apply,applymap和map的应用总结: apply 用在dataframe上,用于对row或者column进行计算: applymap 用于dataframe上,是元素级别的操作: map  ...

  4. 关于怎么解决java.lang.NoClassDefFoundError错误

    五一在部署新的统一登录时,遇到这样一个问题: 很容易把java.lang.NoClassDefFoundError和java.lang.ClassNotfoundException这两个错误搞混,事实 ...

  5. npm 用 淘宝代理

    1.先强制清缓存 npm cache  clean --force 2.运行的npm的指令走的淘宝代理 npm install -g cnpm --registry=https://registry. ...

  6. OpenGL入门程序一：绘制简单的矩形

    #include <GL/glut.h> void MyDisplay(void); int main(int argc, char **argv) { //设置窗口的大小 glutIni ...

  7. checklistbox的用法

    一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值.其实这里遍历的只是高亮的值并不是打勾的值.遍历打勾的值要用下面的代 ...

  8. [.NET开发] NPOI导出

    //导出全部 expertPara = GetExpetPara(); expertPara.BeginIndex = pager.CurrentPageIndex; expertPara.EndIn ...

  9. English trip -- VC(情景课) 8 B job duties 工作职责

    Vocabulary focus  核心词汇 She is a receptionist. She answers the phone. She is a cashier She counts mon ...

  10. hdu 6299 Balanced Sequence (括号序列,贪心)

    大意: 记$f(t)$表示字符串$t$的最长括号匹配子序列, 给定n个括号序列, 求它们重排后的最大f(t). 首先可以注意到一个括号序列中已经匹配的可以直接消去, 一定不会影响最优解. 那么这样最终 ...