<!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. 【Coursera】Third Week(2)

    拾遗 Steve Jobs与World Wide Web 如果你有仔细观察Robert Cailliau的视频的话,你会发现他工作所用的电脑为NeXT电脑. Jobs 也对web 产生了一定的影响,众 ...

  2. HDU 6128 Inverse of sum（同余）

    http://acm.hdu.edu.cn/showproblem.php?pid=6128 题意:有一个a数列,并且每个数都小于p,现在要求有多少对$(i,j)$满足$\frac{1}{a_i+a_ ...

  3. LA 4254 处理器（二分+贪心）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  4. UVa 208 消防车（dfs+剪枝）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  5. python tcp

    server import socket host="localhost" port= s=socket.socket(socket.AF_INET,socket.SOCK_STR ...

  6. nginx 跨域解决

    server { listen 8811 default_server; root /opt/bp; # Make site accessible from http://localhost/ ser ...

  7. ORACLE 多表查询优化收集整理

    搞WEB的离不开数据库,在一个层面上,对数据库的熟练程度决定了很多的事情. 本文就大家都纠结的ORACLE多表查询的性能问题给出一系列个优化方法,那这些都是项目中长期用到的,所以很熟,很熟,已经成为习 ...

  8. 对不队—— Alpha冲刺

    第三天  日期:2018/6/18 一. 今日完成任务:会议内容管理部分 冯晓.马思远:会议网站栏目管理开发,博客撰写 王爽.彭辉:参会人员管理开发 吴琼.郝延婷:审稿专家管理开发 1.1会议管理界面 ...

  9. Fragment之间的交互

    通常,一个活动可能包含一个或多个协同工作的Fragment以向用户展现一致的UI.在这种情况下,Fragment之间就需要彼此通信并交换数据,这是非常重要的.例如,一个Fragment可能包含了一个条 ...

  10. C#两种数据类型

    C#的两种类据类型:值类型和引用类型   什么是值类型,什么是引用类型 概念:值类型直接存储其值,而引用类型存储对其值的引用.部署:托管堆上部署了所有引用类型. 引用类型:基类为Objcet 值类型: ...