<!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. 19.QT-事件发送函数sendEvent()、postEvent()

    Qt发送事件分为两种 -阻塞型事件发送 需要重写接收对象的event()事件处理函数 当事件发送后,将会立即进入event()事件处理函数进行事件处理 通过sendEvent()静态函数实现阻塞发送: ...

  2. Spring通过构造方法注入的四种方式

    通过构造方法注入,就相当于给构造方法的参数传值 set注入的缺点是无法清晰表达哪些属性是必须的,哪些是可选 的,构造注入的优势是通过构造强制依赖关系,不可能实例化不 完全的或无法使用的bean. Me ...

  3. Java JFrame图形界面 ----一个简单的窗口

    #开始 申请博客已经有一段时间了 但是一直没有时间写博文(其实还是懒虫侵蚀了大脑) 最近正在学习JFrame做窗口 遇到了很多的问题 为了解决问题也谋杀了很多的脑细胞 为了让更多的朋友不死的很多脑细胞 ...

  4. Hibernate Validator 6.0.9.Final - JSR 380 Reference Implementation: Reference Guide

    Preface Validating data is a common task that occurs throughout all application layers, from the pre ...

  5. matplotlib简单的使用（二）

    1.折线图 import matplotlib as mlb from matplotlib import pylab as pl # 折线图 # 分别创建x,y坐标 x = [1,3,5,7,6,9 ...

  6. tkinter中鼠标与键盘事件（十五）

    鼠标与键盘事件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("300x200+ ...

  7. Android 不规则封闭区域填充 手指秒变油漆桶

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45954255: 本文出自:[张鸿洋的博客] 一.概述 在上一篇的叙述中,我们通 ...

  8. Android 属性动画（Property Animation） 完全解析 （下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...

  9. linux释放内存的命令

    释放cache: sync echo 3>/proc/sys/vm/drop_caches 释放swap: sync swapoff -a swapon -a 版权声明:本文为博主原创文章,未经 ...

  10. requests+selenium==requestium模块介绍

    有时,你可能会在网上实现一些自动化操作.比如抓取网站,进行应用测试,或在网上填表,但又不想使用API,这时自动化就变得很必要.Python提供了非常优秀的Requests库可以辅助进行这些操作.可惜, ...