使用absolute实现的后台布局,包括小图标定位,菜单弹出等完整版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"/>
<style>
.pg-header{
height: 48px;
background-color: #1d9ad6;
color: white;
min-width: 1180px;
line-height: 48px;
}
.pg-header .icon{
padding: 0px 20px;
font-size: 20px;
}
.pg-header .icon .span{
display: inline-block;
line-height: 2px;
border-radius: 50%;
/*width: 20px;*/
/*height: 20px;*/
padding: 10px;
background-color: red;
}
.pg-header .icon:hover{
background-color: #3bae56;
}
.pg-content{}
.pg-footer{}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color:red ;
}
.pg-content .content{
position: absolute;
/*background-color: green;*/
top: 48px;
right: 0;
bottom: 0;
left: 200px;
min-width: 980px;
overflow: auto;
z-index: 10;
}
.left{
float:left;
}
.right{
float: right;
}
.pg-header .logo{
width: 200px;
background-color: blue;
text-align: center;
}
.pg-header .user{
width: 100px;
height: 48px;
background-color: blue;
margin-right:60px;
/*text-align: center;*/
}
.pg-header .user:hover{ background-color: white;
/*text-align: center;*/
}
.pg-header .user:hover .b{
display: block;
/*text-align: center;*/
}
.pg-header .user .a img {
width: 40px;height: 40px;margin-top:5px;border-radius: 50%;
}
.pg-header .user .b {
position: absolute;top: 48px;right: 0;background-color: white;color:black;z-index: 20;
display: none; }
.pg-header .user .b .a{
display: block;
width: 100px;
} </style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div class="logo left">
大世界
</div>
<div class="user right" style="position: relative">
<a class="a" href="#">
<img src="网页前标1.jpg" />
</a>
<div class="b" >
<a class="a">东临碣石</a>
<a class="a">东临碣石</a>
</div>
</div>
<div class="icon right">
<i class="fa fa-envelope-open-o"></i>
<span>5</span>
</div>
<div class="icon right">
<i class="fa fa-flag "></i>
<span class="span">5</span>
</div>
</div>
<div class="pg-content">
<div class="menu left">asd</div>
<div class="content left" >
<div style="background-color: #2f96b4">
<p style="margin: 0">asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
使用absolute实现的后台布局,包括小图标定位,菜单弹出等完整版的更多相关文章
- 微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...
- 微信小程序组件 自定义弹出框
<!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...
- 小程序 input 键盘弹出时样式遮盖问题
设置cursor-spacing,具体可参考官方文档,代码如下: <input type='text' bindinput="bindKeyInput" placehold ...
- 三行代码接入,社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。
(转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...
- 2、rbac组件 后台布局模板,权限按钮,菜单,可拔插,路径重定向
1.后台布局管理 https://www.cnblogs.com/venicid/p/7772742.html#_label0 1.通用模板 overflow: auto; //在a和b模板中进行切换 ...
- MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...
- 自学Android的第一个小程序(小布局、button点击事件、toast弹出)
因为上班,学习时间有限,昨晚才根据教程写了一个小程序,今天忙里偷闲写一下如何实现的,来加深一下印象. 首先创建一个Android项目, 通过activity_xxx.xml布局文件来添加组件来达到自己 ...
- Java swing 如何将一个按钮放置到弹出框框的任意位置?(Absolute layout 布局的使用)
准备: Absolute layout 绝对布局,绝对布局中控件的可以在任意位置放置 如何制作下面那种样子的 弹出框? ---------------------------------------- ...
- target-densitydpi=device-dpi会使其他ui插件布局变小
target-densitydpi=device-dpi会使其他ui插件布局变小 东哥说:不用rem了,把meta改成这样<meta name="viewport" cont ...
随机推荐
- Python---tkinter---贪吃蛇(能用的)
项目分析:构成:蛇 Snake食物 Food世界 World蛇和食物属于整个世界 class World: self.snake self.food上面代码不太友好我们用另外一个 ...
- 【leetcode】1128. Number of Equivalent Domino Pairs
题目如下: Given a list of dominoes, dominoes[i] = [a, b] is equivalent to dominoes[j] = [c, d] if and on ...
- LeetCode--148--排序链表(python)
在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3输出: 1->2->3->4示例 2: 输入: ...
- Shell-03
Shell-03 编程原理 编程介绍 最开始的编程 机械码(16进制)—CPU会识别 计算机只能识别二进制指令 程序 = 指令 + 数据 驱动: 硬件默认是不能使用的 驱动程序----不同的厂家硬件设 ...
- 在 centos7.5 使用 DockerFile 构建镜像时报错 "Error parsing reference:"microsoft/dotnet:2.2-aspnetcore-runtime AS base"is not a valid repository/tag: invalid reference format"
运行 dockerfile 时报出的错误 FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base Error parsing reference: & ...
- 【PowerOJ1736&网络流24题】飞行员配对方案问题(最小割)
题意: n<=100,要求输出方案 思路:准备把没刷的24题从头搞一遍 输出方案的话就在增广的时候记一下另一端的编号就好 #include<bits/stdc++.h> using ...
- A* 算法求第 K 短路
一种具有 \(f(n)=g(n)+h(n)\) 策略的启发式算法能成为 A* 算法的充分条件是: 搜索树上存在着从起始点到终了点的最优路径. 问题域是有限的. 所有结点的子结点的搜索代价值 \(> ...
- 字符串处理工具Guava使用总结
字符串处理工具Guava使用总结 在java开发过程中对字符串的处理是非常频繁的,google的guava工具对字符串的一些处理进行优化,使我们开发过程中让自己的代码看去更加美观,清爽. 1:mave ...
- oracle查询语句,根据中文的拼音排序
SELECT * FROM USER t ORDER BY nlssort(FIRSTNAME, 'NLS_SORT=SCHINESE_PINYIN_M')
- windows 10中使用命令行关掉占用指定端口的程序
通过netstat -ano与findstr命令结合查询到带有9080端口的监听信息,图中最后一列为监听程序的PID 通过tasklist命令与findstr命令结合查询到指定PID对应的应用程序 使 ...