HTML 练习实现鼠标移到用户图像展示更多信息
HTML 实现 用户 信息 图像 练习 鼠标 展示
2023-09-27 14:26:01 时间
<!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代码中<%%>、<%=%>、<%:%>各是什么意思?分别用来实现什么的?<%@ %>请问在@里面可以包含些什么内容
- <html>
- jQuery两句话实现HTML转义与反转义
- [转] HTML 获取屏幕、浏览器、页面的高度宽度
- 【Vue】通过v-show和v-if实现对html元素的隐藏显示渲染(图文+完整示例)
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- JS实现浏览器html中的“复制”操作(兼容大部分浏览器,亲测没问题)
- HTML+PHP+MySQL实现新闻列表模块(1+X Web前端开发中级 例题)——初稿
- reveal.js实现html播放ppt的炫酷效果
- [转]html js中name和id的区别和使用分析
- indexing-buffer.html#indexing-buffer
- 2-HTML的标签
- 今天中了一个脚本病毒。把我的所有 html 加了 vbs 脚本,WriteData 是什么鬼?
- HTML / JavaScript / PHP 实现页面跳转的几种方式
- 实现html转Xml
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.5 表格的行属性
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 2.2 HTML文件的编写方法
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 导读
- 基于HTML+CSS+JavaScript实现静态高校智慧学习平台【100010237】
- 基于HTML+CSS实现的静态的电影网站【100010106】
- 基于HTML + jQuery + Bootstrap 4实现(Web)地铁票价信息生成系统【100010141】
- html+css+js实现网页拼图游戏
- esp8266烧录Html文件,实现内置网页控制设备!
- HTML js获取系统时间(刷新、不刷新)
- 有趣的HTML实例(四) 旋转菜单
- word模版另存为网页(*.htm,*.html),转为jsp页面并加入数据后导出成word
- html图片标签绝对路径和相对路径
- Html --用简单的<hr>实现多样化分割效果
- 【HTML学习】——HTML常见标签属性和方法介绍
- 利用HTML实现软件的UI
- CSS:使用线性渐变实现标签三角形角标效果/HTML上标、下标
- html css的简单学习(二)