<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .right{

            float: right;

        }

        .pg-header{

            height: 48px;

            line-height: 48px;

            background-color: #303a40;

            color: white;

        }

        .pg-header .logo{

            float: left;

            width: 200px;

            text-align: center;

        }

        .pg-header .user{

            padding: 0 20px;

            height: 48px;

            position: relative;

        }

        .pg-header .user:hover{

            background-color: #425a66;

        }

        .pg-header .user .a{

            height: 48px;

        }

        .pg-header .user .a img{

            width: 40px;

            height: 40px;

            margin-top: 4px;

            border-radius: 50%;

        }

        .pg-header .user .more{

            width: 200px;

            border: 1px solid darkgreen;

            position: absolute;

            top: 48px;

            right: 20px;

            background-color: #C0C0C0;

            display: none;

            z-index: 9999;

        }

        .pg-header .user:hover .more{

            display: block;

        }

        .pg-header .user .more a{

            display: block;

        }

        .pg-body .body-menu{

            position: absolute;

            top: 50px;

            bottom: 0;

            left: 0;

            width: 200px;

            border: 1px solid #336699;

        }

        .pg-body .body-content{

            position: absolute;

            top: 50px;

            bottom: 0;

            left: 210px;

            right: 0;

            border: 1px solid #336699;

            overflow: auto;

            z-index: 10;

        }

    </style>

</head>

<body>

<div class="pg-header">

    <div class="logo">Hello Python</div>

    <div class="user right" style="position: relative">

        <div class="a">

            <img src="1.jpg">

        </div>

        <div class="more">

            <a>我的信息</a>

            <a>注销</a>

        </div>

    </div>

</div>

<div class="pg-body">

    <div class="body-menu"></div>

    <div class="body-content">

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

        <p>klvchen</p><p>klvchen</p><p>klvchen</p>

    </div>

</div>

</body>

</html>

HTML 练习实现鼠标移到用户图像展示更多信息的更多相关文章

  1. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  2. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  3. 鼠标移到导航上面 当前的LI变色 处于当前的位置

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 点击这里查看效果 以下是源代码: <html> <head> <meta http-equiv=& ...

  4. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  5. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  6. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  8. VC/MFC 当鼠标移到控件上时显示提示信息

    VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法 ...

  9. jQuery实现鼠标移上弹出提示框，移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

随机推荐

  1. linux基础和vim基本使用

    Liunx基础 1. 目录  /:根目录,一般根目录只存放目录,在linux下有且只有一个根目录.所有的东西都是从这里开始,例如:/home就是先从根目录/开始,再进入到home目录.  /bin ...

  2. 命令行备忘录 cli-memo

    前言 有时候想用一个简洁点儿的备忘录,发现没有简洁好用的,于是就想着开发一个,秉着简洁 的思想,所以连界面都没有,只能通过命令行来操作(尽可能的将命令简化).设计的时候 借鉴了git分支的思想,每个备 ...

  3. post 和 get 的区别，直指本质

    在我们初入java编程之路的时候,面试往往会有一个面试题:get和post的区别是什么?那么你真的知道他们的区别吗?接下来抽丝剥茧,让我们看看get和post到底什么东西,首先从本质的角度看get和p ...

  4. Centos 6.9 安装xtrabackup-2.4.8 通用包，yum安装，全量备份，增量备份

    xtrabackup-2.4.8的安装及使用 Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备 ...

  5. PowerDesigner如何将设计的表更新到数据库中

    前言: 软件开发的过程中,将设计的表更新到数据库中是一件繁琐的事情,使用好工具,能够事半功倍. 环境介绍:Oracle 11g x64 前期准备: 1.PowerDesigner工具(本人是32位的) ...

  6. ZooKeeper的安装

    一.准备 需要提前安装好Java 准备好zookeeper的软件包:软件包地址   二.部署 解压zookeeper压缩包到指定目录 执行如下命令: .tar.gz -C /opt/   三.修改配置 ...

  7. genymotion中app不能安装问题

    在安装app时弹出如下图报错. 官网解释:Genymotion模拟器使用的是x86架构,在第三方市场上的应用有部分不采用x86这么一种架构,所以在编译的时候不通过,报“APP not installe ...

  8. 玩转Spring MVC(三)----spring基本配置文件

    这篇文章总结一下spring mvc的基本配置,首先贴一张我的项目的目录截图,有一些多余的文件,大家不必在意: 用到的一些jar包在这:<a>http://download.csdn.ne ...

  9. 如何将网页保存为PDF文件

    怎样将网页保存为PDF文件... 问题: 很多时候我们需要将网页上的内容,在排版不变的情况下完整的保存下来,那么用pdf格式是最好的效果了,还图文并茂,效果与真实的网页很相似,如果另存为网页的话,会下 ...

  10. 【bzoj 3131】[Sdoi2013]淘金

    Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块.    一阵风吹 ...