<!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. Java开源生鲜电商平台-购物车模块的设计与架构(源码可下载）

    ava开源生鲜电商平台-购物车模块的设计与架构(源码可下载) 说明:任何一个电商无论是B2C还是B2B都有一个购物车模块,其中最重要的原因就是客户需要的东西放在一起,形成一个购物清单,确认是否有问题, ...

  2. arcEngine开发之IMap、ILayer、IFeatureLayer和IFeatureClass关系

    刚开时学习 Engine 开发时,对于这几个接口之间的关系总是理不清,因此写下这篇文章做个总结. 是什么 在 engine 开发中,我觉得使用过程中应该将每个接口对应到 ArcMap 中的具体事物中, ...

  3. Angular使用总结 ---以密码确认为例实现模版驱动表单的自定义校验

    上一篇 总结了模版驱动表单的基本用法,示例中的校验使用的是原生HTML5的校验方式,本文补上自定义校验的部分. HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校 ...

  4. Swagger使用教程大全，从入门到精通

    Swagger是遵守OpenAPI规范(OAS)的世界上最大的API框架开发工具,可在整个API生命周期内进行开发,从设计和文档到测试和部署.它提供了许多试用的工具来帮助开发者进行接口开发,如及时接口 ...

  5. 出现“Unable to resolve target 'android-XXX'”怎么处理？

    这句话的中文意思就是说安卓API版本没有能适配22的,需要将sdk更新一下,必要的话,adt都要跟着更新,但就我尝试来看,还是要先更新adt,然后您或许发现,这个表单好不容易刷出来,但是没有我们想要的 ...

  6. 深入出不来nodejs源码-编译启动(1)

    整整弄了两天,踩了无数的坑,各种奇怪的error,最后终于编译成功了. 网上的教程基本上都过时了,或者是版本不对,都会报一些奇怪的错误,这里总结一下目前可行的流程. node版本:v10.1.0. 首 ...

  7. Spring Boot + Websocket + Thymeleaf + Lombok

    https://github.com/guillermoherrero/websocket 验证错误消息文件名字:是默认名ValidationMessages.properties,编译后存放在cla ...

  8. 如何在Android Studio中指定NDK位置？

    如何在Android Studio中指定NDK位置? 问题描述 NDK已经手工下载解包在本地: D:\Portable\android-ndk-r13b 每次创建支持C++项目时,都提示NDK没配置, ...

  9. python 工具安装

    1. whl文件的安装:pip install 文件名.whl 2. 压缩包中有setup.py的安装:python setup.py install 3. 利用anaconda下载安装:conda ...

  10. css3 绘制图形

    星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...