<!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. 【修改帐号信息】Eclipse中修改SVN用户名和密码方法

    由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...

  2. 伪类：after的使用以及结合attr来添加属性的技巧

    本案例以实现侧边栏的效果为例来说明 直接上代码看效果: css <style type="text/css"> *{;;list-style: none;} ul{;t ...

  3. BZOJ 2648 kd-tree模板

    学习了一下kd-tree的基本写法 http://blog.csdn.net/jiangshibiao/article/details/34144829 配合 http://www.bilibili. ...

  4. java 编程技巧

    1. 参数可空: @注解表示修改的字段可为空值.看它的定义,可以修饰在方法,参数和字段(类似c#中的?)上. @Target({ElementType.METHOD, ElementType.PARA ...

  5. 语言小知识-Java ArrayList类 深度解析

    · 问题 1:ArrayList 的 size 和 capacity 怎么理解? 如果把 ArrayList 看作一个杯子的话,capacity 就是杯子的容积,也就是代表杯子能装多少东西,而 siz ...

  6. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  7. 关于C#中的日期的一个简单总结

    首先,总结两个简单的方法,实现 秒 与 日期 的相互转换: public class MyTest { /// <summary> /// 将Unix时间戳转换为DateTime类型时间, ...

  8. 【备档】客户端自动化（主Android Appium + python

    之前做分享写的文档,备档~ 0.移动客户端自动化简介 客户端自动化测试的本质 定位对象 · 操作对象 · 校验对象 对象的定位应该是自动化测试的核心,要想操作.校验一个对象,首先应该识别这个对象. 一 ...

  9. root登录不进去 dropbear ssh

    安装好了dropbear, root 怎么也登录不进去. 看 /var/log/messages , 发觉有很多下面的消息, 网上查了一下, 发觉建个 /etc/shells 文件,然后把 /bin/ ...

  10. php程序突然不能用file_get_contents()访问远程网址了？

    php程序用file_get_contents("http://www.***.com"),一直以来好好的,突然间就不能链接远程网址了,在shell下可以ping通远程网址,可是用 ...