<!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. ajax基本介绍

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML[Extensible Markup Language] ),是指一种 ...

  2. Selenium2Lib库之输入常用关键字实战

    4.1 Input Text关键字 按F5 查看Input Text关键字的说明,如下图: Input Text 关键字用于向文本框输入内容,需要传2个参数(文本框的元素定位和输入的值). 项目例子: ...

  3. 全面认识openstack：OpenStack架构详解

    OpenStack构架知识梳理   OpenStack既是一个社区,也是一个项目和一个开源软件,提供开放源码软件,建立公共和私有云,它提供了一个部署云的操作平台或工具集,其宗旨在于:帮助组织运行为虚拟 ...

  4. java读取.properties配置文件的几种方法

    读取.properties配置文件在实际的开发中使用的很多,总结了一下,有以下几种方法(仅仅是我知道的):一.通过jdk提供的java.util.Properties类.此类继承自java.util. ...

  5. JXP

    JSX 初识:它是JavaScript的语法扩展,建议在React中使用它来描述UI的外观. 考虑这个变量声明:   在JSX中嵌入表达式 可以通过将其包含在大括号中来嵌入JSX中的任何JavaScr ...

  6. java基础之修饰符和内部类

    1.java修饰符 /* 修饰符: 权限修饰符:private,默认的,protected,public 状态修饰符:static,final 抽象修饰符:abstract 类: 权限修饰符:默认修饰 ...

  7. Connection reset by peer的常见原因

    1,如果一端的Socket被关闭(或主动关闭,或因为异常退出而 引起的关闭),另一端仍发送数据,发送的第一个数据包引发该异常(Connect reset by peer). Socket默认连接60秒 ...

  8. go语言 nsq源码解读四 nsqlookupd源码options.go、context.go和wait_group_wrapper.go

    本节会解读nsqlookupd.go文件中涉及到的其中三个文件:options.go.context.go和wait_group_wrapper.go. options.go 123456789101 ...

  9. 解锁 vmware esxi 6.7 并安装 mac os 10.13

    1.安装 esxi 6.7 2.下载 unlocker 2.1.1.zip 3.上传 unlocker 2.1.1.zip esxi的磁盘中 4.开启esxi的ssh登录 5.使用 ssh 登录 es ...

  10. BZOJ_2724_[Violet 6]蒲公英_分块

    BZOJ_2724_[Violet 6]蒲公英_分块 Description Input 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod ...