1. 左侧菜单跟着滚动条动
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title></title>
  6.  
  7.     <style>
  8.         body{
  9.             margin: 0px;
  10.         }
  11.         .head{
  12.             height: 48px;
  13.             background-color: #204982;
  14.         }
  15.         .content .con_menu{
  16.  
  17.             background-color: red;
  18.             top:48px;
  19.             left: 0;
  20.             bottom: 0;
  21.             width: 200px;
  22.             position: absolute;
  23.         }
  24.         .content .con_content{
  25.  
  26.             top:48px;
  27.             left:200px;
  28.             bottom: 0;
  29.             right: 0;
  30.  
  31.             position: absolute;
  32.         }
  33.         .left{
  34.             float:left;
  35.         }
  36.         .right{
  37.             float: right;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <!--左侧菜单跟着滚动条动-->
  43. <!--头-->
  44. <div class="head"></div>
  45.  
  46. <!--内容-->
  47. <div class="content" >
  48.  
  49.             <div class="con_menu left">b</div>
  50.             <div class="con_content left"  >
  51.                 <div style="background-color: darkgreen; " >
  52.                 <p style="margin: 0">abd</p>
  53.                 <p>abd</p>
  54.                 <p>abd</p>
  55.                 <p>abd</p>
  56.                 <p>abd</p>
  57.                 <p>abd</p>
  58.                 <p>abd</p>
  59.                 <p>abd</p>
  60.                 <p>abd</p>
  61.                 <p>abd</p>
  62.                 <p>abd</p>
  63.                 <p>abd</p>
  64.                 <p>abd</p>
  65.                 <p>abd</p>
  66.                 <p>abd</p>
  67.                 <p>abd</p>
  68.                 <p>abd</p>
  69.                 <p>abd</p>
  70.                 <p>abd</p>
  71.                 <p>abd</p>
  72.                 <p>abd</p>
  73.                 <p>abd</p>
  74.                 <p>abd</p>
  75.                 <p>abd</p>
  76.                 <p>abd</p>
  77.                 <p>abd</p>
  78.                 <p>abd</p>
  79.                 <p>abd</p>
  80.                 <p>abd</p>
  81.                </div>
  82.             </div>
  83. </div>
  84. <!--底部-->
  85. <div class="foot"></div>
  86.  
  87. </body>
  88. </html>

左侧菜单跟着滚动条动

python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动的更多相关文章

  1. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  3. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  4. 用jquery-easyui的布局layout写后台管理页面

    先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...

  5. 老男孩Day16作业：登录、注册、后台管理页面（动态）

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  6. HTML高级标签（2）————窗体分帧（2）————后台管理页面

    使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...

  7. 8 功能6：后台管理页面，编辑文章,xss攻击

    1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...

  8. go语言实战教程之 后台管理页面统计功能开发（2）

    上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...

  9. Django用户登陆以及跳转后台管理页面3

    Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...

随机推荐

  1. 使用ftp软件上传下载php文件时换行丢失bug

    正 文:   在使用ftp软件上传下载php源文件时,我们偶尔会发现在本地windows下notepad++编辑器写好的php文件,在使用ftp上传到linux服务器后,php文件的换行符全部丢失了, ...

  2. 理解group by 语句的扩展使用

    在SQL的开发中我们会经常使用group by语句对数据进行分组统计,然而在一些复杂的BI报表开发中会常遇到更复杂的分组需求,单单使用group by 就不能解决我们的问题了,这时我们就需要学习了解一 ...

  3. ajaxfileupload.js

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  4. php 执行的目录到新的 directory 目录中

    chdir : 改变目录. dir : 目录类别类. closedir : 关闭目录 handle. opendir : 打开目录 handle. readdir : 读取目录 handle. rew ...

  5. java继承内部类问题（java编程思想笔记）

    普通内部类默认持有指向所属外部类的引用.如果新定义一个类来继承内部类,那“秘密”的引用该如何初始化? java提供了特殊的语法: class Egg2 { public class Yolk{ pub ...

  6. python 正则使用笔记

    python正则使用笔记 def remove_br(content): """去除两边换行符""" content = content.r ...

  7. 20145224&20145238《信息安全系统设计基础》实验一 开发环境的熟悉

    20145224陈颢文20145238荆玉茗 <信息安全系统设计基础>第一次实验报告 课程:信息安全系统设计基础 班级: 1452 姓名:荆玉茗 陈颢文 学号:20145238 20145 ...

  8. Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理

    Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理 作者:宋宸宁(20135315) 一.实验过程 图1 编写songchenning5315.c文件 图2 将c文件汇编成32位机器语言 ...

  9. ExtJs 使用点滴 十四 通过设置CheckboxSelectionModel属性值来实现GridPanel复选框可用不可用

    var sm = new Ext.grid.CheckboxSelectionModel({singleSelect : false,renderer:function(v, p, record)   ...

  10. usb mass storage

    使用otg端口进行usb slave的测试,需要安装g_file_storage.ko或者g_mass_storage.ko模块. 参考链接 http://blog.csdn.net/freeman1 ...