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

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

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

   

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

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

  1. #framecontentTop
  2. {
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     height: 100px;
  7.     width: 100%;
  8.     overflow: hidden;
  9.     vertical-align: middle;
  10.     background-color: #D2E6FA;
  11. }
  12.  
  13. #framecontentLeft
  14. {
  15.     position: fixed;
  16.     top: 100px;
  17.     left: 0;
  18.     height: 100%;
  19.     width: 150px;
  20.     overflow: hidden;
  21.     vertical-align: top;
  22.     background-color: #D2E6FA;
  23. }
  24.  
  25. #maincontent
  26. {
  27.     position: fixed;
  28.     left: 150px;
  29.     top: 100px;
  30.     right: 0;
  31.     bottom: 0;
  32.     overflow: auto;
  33.     background: #fff;
  34.     border-top: solid 2px #70cbea;
  35.     border-left: solid 2px #70cbea;
  36. }

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

  1. .menus
  2. {
  3. }
  4. .menu ul
  5. {
  6.     padding: 0;
  7.     margin: 0;
  8.     list-style-type: none;
  9.     width: 100%;
  10. }
  11. .menu li
  12. {
  13.     position: relative;
  14.     background: #d4d8bd;
  15.     height: 26px;
  16. }
  17. .menu a, .menu a:visited
  18. {
  19.     display: block;
  20.     text-decoration: none;
  21.     height: 25px;
  22.     line-height: 25px;
  23.     width: 149px;
  24.     color: #000;
  25.     text-indent: 5px;
  26.     border: 1px solid #fff;
  27.     border-width: 0 1px 1px 0;
  28. }
  29. .menu a:hover
  30. {
  31.     color: #fff;
  32.     background: #949e7c;
  33. }

主页面代码例如以下： 

  1. <html>
  2. <head>
  3.  
  4. <link href="Settings/Styles/frame.css" rel="Stylesheet" type="text/css" />
  5. <link href="Settings/Styles/menu.css" rel="Stylesheet" type="text/css" />
  6. <style type="text/css">
  7. body
  8. {
  9. margin: 0;
  10. padding: 0;
  11. border: 0;
  12. overflow: hidden;
  13. height: 100%;
  14. max-height: 100%;
  15. }
  16. </style>
  17.  
  18. </head>
  19.  
  20. <body>
  21.  
  22. <form id="form1" runat="server">
  23.  
  24. <div id="framecontentLeft">
  25. <div class="menu">
  26. <ul>
  27. <li><a href="Settings/setAutoInvite.html" target="content">Set AutoInvite</a></li>
  28. <li><a href="Settings/setUpdate.html" target="content">Set Update</a></li>
  29. <li><a href="Settings/setCommand.html" target="content">Set Command</a></li>
  30. <li><a href="Settings/setParentID.html" target="content">Set ParentID</a></li>
  31. </ul>
  32. </div>
  33. </div>
  34.  
  35. <div id="framecontentTop">
  36. <div style="text-align: center;">
  37. <h1>
  38. Manage Center
  39. </h1>
  40. </div>
  41. </div>
  42.  
  43. <div id="maincontent">
  44. <iframe id="content" name="content"  frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
  45. </div>
  46.  
  47. </form>
  48.  
  49. </body>
  50. </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. hdu 1423(LCS+LIS)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1423 好坑啊..还有公共串为0时的特殊判断,还有格式错误..看Discuss看知道除了最后一组测试数据 ...

  2. radio和label关联问题，点击label改变颜色

    $(function () { $("#fangan :radio[name='price']").bind('click', function (event) { //$(thi ...

  3. HDU 5695 Gym Class && 百度之星 初赛 1006

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5695 本文链接:http://www.cnblogs.com/Ash-ly/p/5515234.htm ...

  4. Maven学习笔记3

    好了,按照笔记2的方法我们创建好一个web项目(使用maven:java项目还是java项目,web项目还是web项目,唯一的变化既是我们在pom.xml中配置了我们本应该先下载然后导入的jar包,这 ...

  5. 蒟蒻的9个背包的浩大工程（更新中）（无限延期）（太长了不舍删虽然写的lj的一匹）

    所以说这就是一篇写炸的废文!!!! 所以说背包直接看dd大神的就好了,算了瞎写写吧. 0/1背包 有n件物品和一个容量为C的背包.第i件物品的重量是w[i],价值是v[i].求解将哪些物品放入背包可使 ...

  6. shell 查看 具体某行的值

    sed: sed '5!d' file awk: awk 'NR==5' file

  7. hexo 的错误

    错误如下 Connection to github.com closed by remote host. fatal: The remote end hung up unexpectedly erro ...

  8. python3开发进阶-Django框架的ORM常用字段和参数

    阅读目录 常用字段 字段合集 自定义字段 字段参数 关系参数 多对多的关联关系的三种方式 一.常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中 ...

  9. [python]关于字符串查找和re正则表达式的效率对比

    最近需要在python中做大日志文件中做正则匹配 开始直接在for in 中每行做re.findall,后来发现,性能不行,就在re前面做一个基本的字符串包含判断 (str in str),如果不包含 ...

  10. Jenkins持续集成实战总结

    原文:https://my.oschina.net/CandyDesire/blog/341331#comment-list 持续集成 什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何 ...