一种大气简单的Web管理(陈列)版面设计
2017-05-04 13:22
246 查看
在页面的设计中,多版面是一种常见的设计样式。本文命名一种 这种样式。能够简单描写叙述为一行top,一列左文件夹,剩余的右下的空间为内容展示区。这种样式,便于高速定位到某项内容或功能。
在主要的HTML语法中,iframe能够提供多版面,方法简易,然而。本文主要在于推介一种利用Div实现版面控制的方法。这样的方法能够利用div带来的更大灵活性。
首先。展示下终于实现的效果。
主页面採用这种frame.css样式控制。
左側menu菜单採用这种menu.css
主页面代码例如以下:
content中要展示的页面,仅仅要是一个正常的网页就可以。
在主要的HTML语法中,iframe能够提供多版面,方法简易,然而。本文主要在于推介一种利用Div实现版面控制的方法。这样的方法能够利用div带来的更大灵活性。
首先。展示下终于实现的效果。
主页面採用这种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管理(陈列)版面设计
- javaweb 项目的系统权限管理,怎么设计?shiro简单了解
- ajax in active 第一章 一种全新设计的Web
- 一种新的Web设计方法
- 一种新型密钥管理系统的设计与实现
- 简单,是web 2.0网页设计的核心
- 一种简单方便的用户权限管理方法--使用菜单来管理用户
- 学习简单实用的 Web 服务设计模式,第 1 部分
- 基于web信息管理系统的权限设计分析和总结(理论)
- 简单的权限管理设计
- 一个运行在Web服务器上的远程管理简单例子
- 一种WEB表单验证的简单方法
- 学习管理:合作接口设计的简单总结
- 一种高性能分布式Web爬行器的设计与实现(一)
- ASP应用程序设计的Web状态管理分析
- 基于web技术的工作流管理系统设计与实现
- Ajax 时代WEB版面设计
- 一种简单的直观的高效的权限设计
- VB6数据导出到Excel文件,一种设计界面查询条件的方法,一种简单加密方法(改写)
- 基于web信息管理系统的权限设计分析和总结(数据结构)