<!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. Python_添加行号

    filename='demo.py' with open(filename,'r')as fp: lines=fp.readlines() #读取所有行 maxLength=max(map(len,l ...

  2. R 网络图 nodes,edges属性计算

    前面提到了用R画网络图,免不了要对网络图nodes和edges的特征做一些统计.分享下我的代码: ########## nodes edges的统计########### # ####nodes的度有 ...

  3. spring和hibernate整合之---java.lang.ClassNotFoundException: javax.el.ELManager 大坑

    今天整合spring和hibernate, 本着使用最高版本的原则, 使用了hibernate-validator  6.0.1.Final, tomcat是7.0.56, 启动时出现如下错误. 经过 ...

  4. PAT1112:Stucked Keyboard

    1112. Stucked Keyboard (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue On a ...

  5. Js的String对象

    Js的String对象常用方法: 方法一.得到某字符在字符串中的索引位置. str.indexOf(findStr,[index])--返回的是要查找字符在字符串中的位置索引   ,index开始查找 ...

  6. Java并发包之同步队列SynchronousQueue理解

    1 简介 SynchronousQueue是这样一种阻塞队列,其中每个put必须等待一个take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.不能在同步队列上进行peek,因为仅在 ...

  7. HTTP 前端需明白的相关知识点

    简介: http(Hyper Text Transfer Protocol)超文本传输协议是万维网应用层的协议,使用了面向连接的TCP作为运输层协议. 特征: 简单快速:通过url就可以访问资源,协议 ...

  8. JFrame图形界面 ----绝对布局和按钮

    开始 绝对布局应该是最简单的一种布局方式了,只需要确定好大小和位置就可以固定不变 代码 ` package window; import java.awt.Color; import java.awt ...

  9. Javaweb之 servlet 开发详解1

    1.1  Tip:Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个 ...

  10. java处理图片--图片的缩放，旋转和马赛克化

    这是我自己结合网上的一些资料封装的java图片处理类,支持图片的缩放,旋转,马赛克化.(转载请注明出处:http://blog.csdn.net/u012116457) 不多说,上代码: packag ...