使用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 ...

随机推荐

unigui ios微信界面错位和点击失灵问题
IOS微信下会出现二个严重问题: 1.输入框失去焦点导致控件错位,造成无点正常点击. 此问题是微信自带浏览器,一直遗留问题, 尝试了多种方法始终无解.因此要用来开发公众号的一定要注意. 2.界面下移 ...
CF1244C
题目描述给出n,p,w,d,求(x,y,z)使得 xw+yd=p x+y+z=n 其中d<w<10^5^ 题解显然扩欧啊( 来自天国的long long y如果大于等于w,则显然可以把 ...
SQL server 表copy 到别一张表
SQL server 表copy 到别一张表 ------------------ INSERT INTO 表名 (表字段) SELECT 表1字段 FROM 表名2: ---------- ...
开发工具Intellij IDEA：面板介绍
一.面板说明 IDEA面板的全貌如下图 2|0 二.菜单栏下面会简单介绍下一些常用的部分菜单使用,如有疑问或补充欢迎留言. (1).File文件 1. New:新建一个工程可以新建project, ...
eclipse配置Maven——菜鸟篇
首先解释关于webservice: Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序, 可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现 ...
Solr搜索引擎基础
搜索引擎是指一个庞大的互联网资源数据库,如网页,新闻组,程序,图像等.它有助于在万维网上定位信息. 用户可以通过以关键字或短语的形式将查询传递到搜索引擎中来搜索信息. 搜索引擎然后搜索其数据库并向用户 ...
Oracle--利用监听器日志监控访问该数据库的客户端IP
服务器10.10.10.168 数据库seineebs 客户端 10.10.10.14 用户guipeng.zhang 查看监听器状态: 在本机利用PL/SQL工具连接该数据库查看监听器日志:一 ...
TestingWhiz社区版2013版下载地址
TestingWhiz社区版 https://sourceforge.net/projects/testingwhiz-community-edition/ https://sourceforge.n ...
ionic打包app——以安卓版本为例辛苦之路~~~
最近同事做了个angular项目,因为要离职,所以项目我就来接手了,用ionic打包app,然后无数配置的坑就等着我了~~~ 环境安装 1.nodejs 因为自己刚接触做angular项目,就更新到了 ...
EventBus和Otto第三方构架
代码添加依赖:implementation 'org.greenrobot:eventbus:3.0.0'1注册并声明订阅者,然后发布事件最后解除注册 @Override protected voi ...

使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版

使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版的更多相关文章

随机推荐

热门专题