python :页面布局 ,后台管理页面之左侧菜单跟着滚动条动
左侧菜单跟着滚动条动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title> <style>
body{
margin: 0px;
}
.head{
height: 48px;
background-color: #204982;
}
.content .con_menu{ background-color: red;
top:48px;
left: 0;
bottom: 0;
width: 200px;
position: absolute;
}
.content .con_content{ top:48px;
left:200px;
bottom: 0;
right: 0; position: absolute;
}
.left{
float:left;
}
.right{
float: right;
}
</style>
</head>
<body>
<!--左侧菜单跟着滚动条动-->
<!--头-->
<div class="head"></div> <!--内容-->
<div class="content" > <div class="con_menu left">b</div>
<div class="con_content left" >
<div style="background-color: darkgreen; " >
<p style="margin: 0">abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
</div>
</div>
</div>
<!--底部-->
<div class="foot"></div> </body>
</html>
左侧菜单跟着滚动条动
python :页面布局 ,后台管理页面之左侧菜单跟着滚动条动的更多相关文章
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 前端武器库系列之html后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...
- HTML后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...
- 用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
- 老男孩Day16作业:登录、注册、后台管理页面(动态)
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 8 功能6:后台管理页面,编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- go语言实战教程之 后台管理页面统计功能开发(2)
上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...
- Django用户登陆以及跳转后台管理页面3
Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...
随机推荐
- cookie的设置,获取,取消
<!DOCTYPE> <html> <head> <meta http-equiv=Content-Type content="text/html; ...
- 读《深入php面向对象、模式与实践》有感(二)
书中关于设计模式的介绍很详细. 一.单例模式 作者建了一个preferences类来解释什么是单例模式.这个preferences类并非我第一次见到,在android中也有这个类,不过以前都是只管用即 ...
- win10我能ping通他人,但他人ping不同我
这是防火墙的原因,关闭防火墙即可
- HTML5初学篇章_3
表单的标签是<form>,它使页面与客户的互动成为可能.而它的大部分元素字自HTML2.0后就没有再改变过,由此可见这是一个多么具有卓越性的设计. <form>标签是用于创建供 ...
- rman恢复误删除的一张表(不完全恢复)
恢复误删除的一张表可以使用很多方法,如日志挖掘.闪回等,rman恢复(不完全恢复)肯定不是最好的,也不建议用, 现在我们只是演示一下这种恢复. 1 RMAN备份数据库 2创建测试表 3查看此时的SCN ...
- redis 安装(centos 6.4)
我使用6.4系统,mark一下,其他版本应该也一样. wget wget http://download.redis.io/releases/redis-3.0.6.tar.gz make make ...
- JS验证只允许输入数字
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...
- WS调用的时候报错
报错内容javax.xml.ws.WebServiceException: Method recognizeIdentityCardByFilePath is exposed as WebMethod ...
- 【iCore3 双核心板_FPGA】实验十八:基于单口RAM的ARM+FPGA数据存取实验
实验指导书及代码包下载: http://pan.baidu.com/s/1i58Ssvz iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- Json的语法及使用方法
Json的语法及使用方法 Json(JavaScript Object Notation)对象表示标识,是一种轻量级的数据交换语言,比XML更容易解析,独立于语言和平台. 语法规则: 对象用{}保存 ...