<!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实现的后台布局，包括小图标定位，菜单弹出等完整版的更多相关文章

  1. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  2. 微信小程序组件 自定义弹出框

    <!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...

  3. 小程序 input 键盘弹出时样式遮盖问题

    设置cursor-spacing,具体可参考官方文档,代码如下: <input type='text' bindinput="bindKeyInput"  placehold ...

  4. 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。

    (转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...

  5. 2、rbac组件 后台布局模板，权限按钮，菜单，可拔插，路径重定向

    1.后台布局管理 https://www.cnblogs.com/venicid/p/7772742.html#_label0 1.通用模板 overflow: auto; //在a和b模板中进行切换 ...

  6. MVC 传递数据 从前台到后台，包括单个对象，多个对象，集合

    MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...

  7. 自学Android的第一个小程序（小布局、button点击事件、toast弹出）

    因为上班,学习时间有限,昨晚才根据教程写了一个小程序,今天忙里偷闲写一下如何实现的,来加深一下印象. 首先创建一个Android项目, 通过activity_xxx.xml布局文件来添加组件来达到自己 ...

  8. Java swing 如何将一个按钮放置到弹出框框的任意位置？（Absolute layout 布局的使用）

    准备: Absolute layout 绝对布局,绝对布局中控件的可以在任意位置放置 如何制作下面那种样子的 弹出框? ---------------------------------------- ...

  9. target-densitydpi=device-dpi会使其他ui插件布局变小

    target-densitydpi=device-dpi会使其他ui插件布局变小 东哥说:不用rem了,把meta改成这样<meta name="viewport" cont ...

随机推荐

  1. SpringMVC最新教程IDEA版

    1.servlet项目结构与识别 Idea里带个蓝点的文件夹为tomcat吃的网站内容,idea会通过“Web Resource Directory”来标注,会被打成一个war包 这个文件夹里,MET ...

  2. 使用穷举法结合numpy解决八皇后问题

    一般说到八皇后问题,最先想到的就是回溯思想,而回溯思想往往是需要递归来实现的. 计算机很善长做重复的事情,所以递归正和它的胃口,而我们人脑更喜观平铺直叙的思维方式.当 我们看到递归时,总想把递归平铺展 ...

  3. 有了二叉查找树、平衡树（AVL）为啥还需要红黑树？

    序言 二叉查找树的缺点 平衡二叉树 虽然平衡树解决了二叉查找树退化为近似链表的缺点,能够把查找时间控制在 O(logn),不过却不是最佳的,因为平衡树要求每个节点的左子树和右子树的高度差至多等于1,这 ...

  4. BP神经网络设计

    1.网络层数 大部分单个隐藏层即可 2.输入层神经元个数 输入变量的个数通常都是由问题的外部描述所确定的.例如,如果有4个外部变量作为网络的输入,那么网络就有4个输入.但是,这是不是意味着输入层的神经 ...

  5. django FBV +CBV 视图处理方式总结

    1.FBV(function base views) 在视图里使用函数处理请求. url:        re_path('fbv', views.fbv),        # url(r'^fbv' ...

  6. 【转】阿里架构总监一次讲透中台架构，13页PPT精华详解

    转:https://blog.csdn.net/u011323949/article/details/99542576 本文整理了阿里几位技术专家,如架构总监 谢纯良,中间件技术专家 玄难等几位大牛, ...

  7. 逻辑回归模型(Logistic Regression, LR)--分类

    逻辑回归(Logistic Regression, LR)模型其实仅在线性回归的基础上,套用了一个逻辑函数,但也就由于这个逻辑函数,使得逻辑回归模型成为了机器学习领域一颗耀眼的明星,更是计算广告学的核 ...

  8. 豆瓣镜像安装python库

  9. CSS- 层叠和继承

    层叠和继承 - 学习 Web 开发 | MDN 优先级 - CSS:层叠样式表 | MDN 继承 - CSS:层叠样式表 | MDN CSS 层叠 - CSS:层叠样式表 | MDN

  10. log4j 不输出mybatis的sql

    有可能导入多个日志工具jar,导致mybatis不知道使用哪种日志.修改你的mybatis配置,添加setting,指定日志类型为log4j. <configuration> <!- ...