文档章节

HTML_后台框架全屏界面_简易table形式

喵王不瞌睡
 喵王不瞌睡
发布于 2014/12/08 17:20
字数 146
阅读 1487
收藏 12

 HTML_后台框架全屏界面_简易table形式

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  html, body {
   width:100%;
   height:100%;
   padding: 0;
   margin: 0;
   overflow: hidden;
   background-color: #f3f3f3;
   font-family: "Hiragino Sans GB",\5FAE\8F6F\96C5\9ED1,Tohoma;;
  }
  .index-wrap{
   min-width: 960px;
   height: 100%;
  }
  .index-table{
   height: 100%;
   width: 100%;
   table-layout: fixed;
  }
  .index-table td, th, div {
   word-break: break-all;
   word-wrap: break-word;
  }
  .index-table th {
   width: 140px;
  }
  .index-table .head {
   height: 80px;
  }
 </style>
</head>
<body>
 <div class="index-wrap">
  <table class="index-table" border="1">
  <tr class="head">
   <th>logo</th>
   <td>nav</td>
  </tr>
  <tr class="mian">
   <th>bar</th>
   <td>content</td>
  </tr>
  </table>
 </div>
</body>
</html>

 

效果图如下

 

无需任何JS代码,再也不用ready/resize调整,

© 著作权归作者所有

喵王不瞌睡
粉丝 11
博文 168
码字总数 51103
作品 0
浦东
个人站长
私信 提问
加载中

评论(4)

喵王不瞌睡
喵王不瞌睡

引用来自“甩葱哥”的评论

table-cell与block解释有区别,又快又简单只是表现在这个臆想的需求上。用表格布局,导致可读性差,dom结构冗余,影响语义。另外表格是一种很强的先行后列的结构,实际应用未必好操作。
例如:隐藏左边栏,你需要分别控制两个td,类似情况还有很多。
另外表格的宽度设置有时候也很令人沮丧。
事实上,即使不用table,也会很快很简单,还请作者三思。
非常感谢你详细的讲解,我自学出身,下面有很多专业的地方请见谅. dom结构冗余,这个我js很差劲,请问相对div布局性能会有什么影响?百度无果.目前phpwind的最新版后台显示框架用的table. 可读性,目前使用td定义类或ID. 实现bar隐藏和content中iframe全屏,jq实现还算简单. 宽度问题的确是,一排td定义后,二排td无法重复定义,但相对固定布局的后台,也省去再定义样式. 目前了解的右侧自适应布局形式,左侧float left,右侧margin-left和左侧absolude,右侧margin-left.如果又更好的 求指点.
甩葱哥
甩葱哥
table-cell与block解释有区别,又快又简单只是表现在这个臆想的需求上。用表格布局,导致可读性差,dom结构冗余,影响语义。另外表格是一种很强的先行后列的结构,实际应用未必好操作。
例如:隐藏左边栏,你需要分别控制两个td,类似情况还有很多。
另外表格的宽度设置有时候也很令人沮丧。
事实上,即使不用table,也会很快很简单,还请作者三思。
喵王不瞌睡
喵王不瞌睡

引用来自“甩葱哥”的评论

不用table也行的,当然要ie6以上我是承认的,但不用table布局是个底线
但很快又很简单
甩葱哥
甩葱哥
不用table也行的,当然要ie6以上我是承认的,但不用table布局是个底线
abcMx/cordova-plugin-liger

liger基于cordova的一个框架,优点在于可以native界面跳转、返回、打开对话框等,传递参数等,这里 将liger代码组织成 cordova插件形式,方便cordova直接集成liger,主要使用liger界面跳转、...

abcMx
2015/08/20
0
0
基于 Beego 开发的后台管理系统 - gardens

gardens是基于Beego开发的易用、易扩展、界面友好的轻量级功能权限管理系统。 前端框架基于AdminLTE2进行资源整合,包含了多款优秀的插件,是笔者对多年后台管理系统开发经验精华的萃取。 本...

yunnet
2018/10/31
0
0
轻快PDF阅读器我们该怎么使用

  现如今大家工作都会使用到PDF文档 ,现在使用的大多是PDF格式的。大多数人都只是直接打开(系统),这会对PDF文件造成损坏的。今天小编就在这给大家介绍一款简易的阅读器--轻快PDF阅读器...

魔瞳626
2017/04/18
73
0
基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序、APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和...

walb呀
2017/12/04
0
0
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
3
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
6
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
3
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部