在页面的设计中，多版面是一种常见的设计样式。本文命名一种 这种样式。能够简单描写叙述为一行top，一列左文件夹，剩余的右下的空间为内容展示区。这种样式，便于高速定位到某项内容或功能。

在主要的HTML语法中，iframe能够提供多版面，方法简易，然而。本文主要在于推介一种利用Div实现版面控制的方法。这样的方法能够利用div带来的更大灵活性。

首先。展示下终于实现的效果。

   

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHlwMjAwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

       主页面採用这种frame.css样式控制。

#framecontentTop

{

    position: absolute;

    top: 0;

    left: 0;

    height: 100px;

    width: 100%;

    overflow: hidden;

    vertical-align: middle;

    background-color: #D2E6FA;

}

#framecontentLeft

{

    position: fixed;

    top: 100px;

    left: 0;

    height: 100%;

    width: 150px;

    overflow: hidden;

    vertical-align: top;

    background-color: #D2E6FA;

}

#maincontent

{

    position: fixed;

    left: 150px;

    top: 100px;

    right: 0;

    bottom: 0;

    overflow: auto;

    background: #fff;

    border-top: solid 2px #70cbea;

    border-left: solid 2px #70cbea;

}

左側menu菜单採用这种menu.css

.menus

{

}

.menu ul

{

    padding: 0;

    margin: 0;

    list-style-type: none;

    width: 100%;

}

.menu li

{

    position: relative;

    background: #d4d8bd;

    height: 26px;

}

.menu a, .menu a:visited

{

    display: block;

    text-decoration: none;

    height: 25px;

    line-height: 25px;

    width: 149px;

    color: #000;

    text-indent: 5px;

    border: 1px solid #fff;

    border-width: 0 1px 1px 0;

}

.menu a:hover

{

    color: #fff;

    background: #949e7c;

}

主页面代码例如以下： 

<html>

<head>

<link href="Settings/Styles/frame.css" rel="Stylesheet" type="text/css" />

<link href="Settings/Styles/menu.css" rel="Stylesheet" type="text/css" />

<style type="text/css">

body

{

margin: 0;

padding: 0;

border: 0;

overflow: hidden;

height: 100%;

max-height: 100%;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div id="framecontentLeft">

<div class="menu">

<ul>

<li><a href="Settings/setAutoInvite.html" target="content">Set AutoInvite</a></li>

<li><a href="Settings/setUpdate.html" target="content">Set Update</a></li>

<li><a href="Settings/setCommand.html" target="content">Set Command</a></li>

<li><a href="Settings/setParentID.html" target="content">Set ParentID</a></li>

</ul>

</div>

</div>

<div id="framecontentTop">

<div style="text-align: center;">

<h1>

Manage Center

</h1>

</div>

</div>

<div id="maincontent">

<iframe id="content" name="content"  frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

</div>

</form>

</body>

</html>

content中要展示的页面，仅仅要是一个正常的网页就可以。

一种大气简单的Web管理（陈列）版面设计的更多相关文章

  1. 一种简单的权限管理ER图设计

    权限管理支持动态地管理用户的角色和权限.权限代表用户可以在什么对象上进行什么操作:角色是一组权限的集合. PS:当增加或删除某个用户的角色时,系统自动将该角色对应的权限(角色 -权限关联表)增加或删除 ...

  2. 用 Java 技术创建 RESTful Web (服务 JAX-RS：一种更为简单、可移植性更好的替代方式)

    作者: Dustin Amrhein, 软件工程师, IBM Nick Gallardo, 软件工程师, IBM 出处: http://www.ibm.com/developerworks/cn/we ...

  3. 使用spring 4.0 + maven 构建超简单的web项目

    一.需求 使用spring去管理web项目,是目前非常流行的一种思路,本文将介绍使用maven+spring 4.0.2 来构建一个简单的web项目. 二.实现 1.新建一个maven项目,如下图所示 ...

  4. Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）

    上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页  了解了LigerUI 中Grid的基本用法  现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...

  5. Docker容器技术-创建一个简单的Web应用

    一.创建一个简单的Web应用 1.identicon 基于某个值而自动产生的图像,这个值是IP地址或用户名的散列值. 用途: 通过计算用户名或IP地址的散列值,在网站上提供用于识别用户的图像,以及自动 ...

  6. Centos 6.x 安装Nagios及WEB管理nagiosql实现windows及linux监控指南

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  7. KVM Web管理平台 WebVirtMgr

    WebVirtMgr介绍 WebVirtMgr是一个KVM管理平台,让kvm管理变得更为可视化,对中小型kvm应用场景带来了更多方便.WebVirtMgr采用几乎纯Python开发,其前端是基于Pyt ...

  8. 快速搭建 kvm web 管理工具 WebVirtMgr

    作者:SRE运维博客 博客地址: https://www.cnsre.cn/ 文章地址:https://www.cnsre.cn/posts/211117937177/ 相关话题:https://ww ...

  9. Python 实现简单的 Web

    简单的学了下Python, 然后用Python实现简单的Web. 因为正在学习计算机网络,所以通过编程来加强自己对于Http协议和Web服务器的理解,也理解下如何实现Web服务请求.响应.错误处理以及 ...

随机推荐

  1. 部署web应用到虚拟主机的三种方式

    方式一:            在 [tomcat]/conf/server.xml 文件中的<Engine>标签下的<Host>标签内部, 添加一个 <Context ...

  2. Codeforces 702C Cellular Network(二分)

    题目链接:http://codeforces.com/problemset/problem/702/C 题意: 在数轴上有N个城市和M个信号塔,给你这N个城市以及M个塔在数轴上的位置,求M个塔可以覆盖 ...

  3. hdu6049

    hdu6049 题意 给出一串由 \([1, n]\) 组成的 \(n\) 个数,每个数字都不相同.现在要尽可能的分成多个块,每个块内的数可以任意排序,且分完块后可以交换两个块的位置,问使得最后序列有 ...

  4. 线段树+扫描线【HDU1542】Atlantis

    Description 给定一些二维空间上的矩形,求它们的面积并. 一道线段树+扫描线的板子题 然而即使我会打了,也不能灵活运用这种算法.QAQ 遇到题还是不太会. 但是这种板子题还是随随便便切的. ...

  5. 设置参数进行java的jvm监控

    1.设置jconsole监控服务器的tomcat参数及java jvm大小,执行命令vi ../tomcat/bin/catalina.sh  “在服务器安装的tomcat目录下” JAVA_OPTS ...

  6. [CF773D]Perishable Roads

    [CF773D]Perishable Roads 题目大意: 一个\(n(n\le2000)\)个点的完全图\(G\),定义\(d(x)\)为生成树上点\(x\)到根路径上的最小边权.问图\(G\)的 ...

  7. lapis使用

    lapis: 安装 http://leafo.net/lapis/ 官网安装方式依赖lua-cjson,但是已经安装了openresty的可能会报错. 解决方法,使用下面issue中的luarocks ...

  8. 1.1（Spring学习笔记）Spring基础（BeanFactory、ApplicationContext 、依赖注入）

    1.准备工作 下载Spring:http://repo.spring.io/libs-release-local/org/springframework/spring/    选择需要下载的版本    ...

  9. 将html文档转成pdf

    (1)使用场景:在项目中使用到了合同,只有在合同的头部,是不相同的.在合同的主体部分都是相同的,因此就把他放到了模板(html文件)里面. 在用户线上签约完成之后,可以将pdf版的合同下载. (2)需 ...

  10. ntp流量放大攻击分析

    最近,听说挂在网络上的设备进行时间同步成功率低,YS需要架设自己的NTP服务器,这玩意第一时间能让人想到NTP流量放大攻击,这也是一种比较古老的攻击方式,检测了一下发现所使用的OS默认已经进行了加固, ...