61,115
社区成员
发帖
与我相关
我的任务
分享分享一个三行两列+全屏+DIV/CSS的布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>首页</title>
<style>
html
{
background: #fff;
font-size:80%;
font-family: Helvetica,Verdana ,新宋体, Sans-Serif;
margin: 0;
padding: 0;
border:0;
height:100%;
max-height:100%;
overflow:hidden;
}
body
{
height:100%;
max-height:100%;
overflow:hidden;
background:#eee;
padding:0px;
margin:0px;
border:0px;
}
#header
{
min-width:980px;
position:absolute;
margin:0;
top:0;
left:0;
width:100%;
height:56px;
background:#e0e0e0;
overflow:hidden;
border:solid 1px red;
}
#info
{
height:40px;
background-color:#8f8f8f;
width:100%;
}
div#title
{
text-align: left;
}
div#hbar
{
position:absolute;
left:182px;
top:0;
width:8px;
background:#e0e0e0;
border-right:solid 1px #e8e8e8;
height:100%;
}
div#bar
{
height:11px;
min-width:980px;
width:100%;
left:0px;
position:absolute;
bottom:0px;
}
#maincontainer
{
position:absolute;
top:58px;
width:100%;
bottom:20px;
overflow:hidden;
left:0px;
background:#fff;
}
*html #maincontainer
{
top:0;
left:0;
height:100%;
max-height:100%;
width:100%;
position:absolute;
border-top:57px solid #fff;
border-bottom:20px solid #fff;
}
#leftcontainer
{
width: 180px;
top:0;
left:0;
height:100%;
position:absolute;
overflow:auto;
border:solid 1px green;
background-color:#eee;
}
#main
{
width:auto;
position:absolute;
border:solid 1px black;
height:100%;
left:190px;
right:0;
overflow:auto;
background-color: #fff;
}
#footer
{
position:absolute;
margin:0px;
bottom:0;
left:0;
width:100%;
height:18px;
overflow:hidden;
background:#eee;
min-width:980px;
color: #999;
border-top:solid 1px #000;
}
</style>
</head>
<body>
<div id="header">
<div id="title"></div>
<div id="bar"></div>
</div>
<div id="maincontainer">
<div id="leftcontainer">
<p> 王先生是一家民营企业A公司的副总，A公司的规模虽然并不大，员工大致有300多人，但是近几年发展迅猛，营业额逐年递增。作为公司的经营副总经理，王先生深刻认识到，公司创立初建立起的管理体系早已无法适应公司高速发展的需要。所以，为了改善公司的运营效率，支撑高速增长的业务需要，王先生决定开展一次全公司范围的流程优化项目，并通过IT系统将成果固化到日常工作之中。项目的过程是艰苦的，但成果也是丰硕的，通过对公司上上下下的日常工作流程的梳理和优化，在王先生的带领下，项目组终于整理出了一套300多页的业务流程手册。可是，当王先生把当年他一手建立的同样厚实的制度手册翻出后，他忽然又困惑了：“有了流程手册，原先的制度又该怎么办呢?”
我相信很多公司的经理人都曾经遇到过和王先生同样的问题，风风火火地梳理出两三百条流程，却发现和公司原有的制度体系相背离，甚至互相矛盾，更谈不上如何固化或者落实这些流程了。其实，发生这样的情况主要是由于没有认清流程与制度的关系造成的。那么流程与制度到底是什么样的关系呢？
企业的治理结构无外乎是由组织、流程、绩效这三个要素构成的。组织是指企业全体员工实现企业目标而进行的分工协作，在职务范围、责任和权力方面所形成的结构体系。如股东会、董事会、监事会的三会治理形式，直线职能制、事业部制、矩阵制的组织结构形式，以及各岗位的具体职责。流程是指把一组输入转换为对顾客有价值的输出的活动，包括管理流程与业务流程。绩效则是指目标达成的程度，是考核员工工作效果的重要指标。也许你会问：“那制度哪去了？企业的治理结构中怎么可能没有制度的存在！”确实，在多数管理者心中，管理就是建立制度并执行制度的过程，制度当然是企业治理的重要要素之中。所以，构成企业治理结构的三要素更准确得说，应该是组织、流程／制度、绩效。至于我为什么要有这样一个反复的过程，是希望突出一点，即流程、制度均是企业管控体系中不可或缺的部分，而二者之间既有区别，又有联系.
区别可以体现在以下三个方面：
一是由来的不同。当企业达到一定规模时，管理者无法亲自照看到企业的方方面面，于是就有了制度。管理者建立制度的初衷往往是为了将“管理”覆盖到整个企业的每个角落，所以经常看到制度不是一次性建立的，而是东凑西凑地拼补起来的，哪里发现了管理漏洞，就建立相应的管理制度去填补。由于这种特性，常能发现制度彼此之间会出现“重叠”的情况，但只要重叠的部分不互相矛盾即可。而流程则不同，自企业建立开始就有了流程，只是在不同规模、不同阶段，流程的表现形式不同而已。小企业或者起步阶段的企业，也有流程，比如“见客户－签客户－服务客户－问客户要钱”这就是流程，但是这时候的企业需要的是能快速见效，而不是按部就班。所以如果此时过分强调流程管理，只会造成运作不畅的局面。而当企业达到一定规模之后，内控和标准化就显得尤其关键了，这时候才是进行流程管理的最佳时机。所以，流程是随着企业的变化而不断持续改进而来的。
二是管理思想的不同。流程就像是河流，而制度就是巩固河道的堤坝。所以流程强调的是“以导治水”，强调如何将输入有效地转化为输出，强调“如何去把一件事情做得更好”。而制度则强调“以堵治水”，强调不能做什么，强调“做了某一事情的后果的处理方法”。
三是局部与全局的不同。制度更多的是针对局部问题而制定的规则，彼此之间会有重叠，但不存在上下游或者层级的关系。将企业分块的制度堆积起来将覆盖到企业管理与业务运作的每个角落。而流程针对的则是全局，整个企业的价值链可以作为总流程，其内部又可以根据不同的分类原则分成诸多子流程，并且不断细分，这就是流程的分类分级。上下级流程之间存在从属关系，同级流程之间存在上下游关系。虽然流程具有全局性，但其注重的是关键业务的运转，而不要求覆盖到每个面。
然而，流程和制度又可以说是同一个事物的两个侧面，彼此之间具有密切的联系，并不相互隔离也无法彼此取代。
联系体现在两方面：
一方面，流程是制度的灵魂。如果制度不能反应流程，就像失去了灵魂，它的执行一定会出现问题。所以制度无法执行时，往往是它所包含的流程有问题。企业管理中常常会遇到“法不责众”情况，如果频繁出现这种情况，就说明一个制度或规定是不合理的，而不合理的地方往往是它相关的流程与实际情况不符，使得业务流程“两张皮”的现象无法避免。
另一方面，制度是流程得以执行的保证。通过适当制度的执行能加强对流程执行的约束。比如“惩罚”制度能制止因个体原因而影响流程功能实现的现象，而“奖励”制度则会促使大家更多的主动关注流程，从而使流程运转得到改善。因此，流程是河道，制度是堤坝，要使河流不会泛滥成灾，梳理河道和加固堤坝都不可或缺。
虽然流程与制度既有联系又有区别，但是它们作为企业管理的核心内容，其本质是完全一致的，当制度的编写具体到了业务的每个步骤，以文字或者图片的形式将业务的前后逻辑和关系都描述清楚了，那也可以称其为流程。当流程以手册的形式呈现出来，并且作为管理要求在企业中强制推行，即流程制度化，那同样也可以称之为制度。因此，流程与制度的内涵完全没有区别，都是企业的管理文件，是企业管理的核心。</p>
</div>
<div id="hbar"></div>
<div id="main">
<p>站点美化,网站,合理布局,注意事项 业余网站 网站的合理布局 网站布局的注意事项 网站搭建注意事项 网站搭建
对于打算进行网络创业的个人来说，很容易存在的一个问题就是把网站做得象业余（个人）网站，这样很容易使别人产生不信任感而影响业务发展。在此我们总结了一些业余网站的常见特征，请大家尽量避免：
1、杂乱的网页背景
这是新手最容易犯的毛病之一，他们喜欢用鲜艳的色彩或亮丽的图片，作为网页背景，其实，这往往弊大于利。
那么，网页背景设定为何种颜色最好呢？使用下面这个语句：
< BODY bgcolor=white>
没错！这只是个普通的白色背景，但它适合于很多场合，能够与页面上其他各种元素和谐搭配。想想 Yahoo 等名站，你就会明白。如果你真想有一个“特酷”的效果，那么，可以用黑色代替白色。当然，你也许能够举出使用其他颜色的成功网站。但它们很大程度上遵守了这样一个规则：选择的色彩符合网站主题。如明亮的色彩用于儿童网站、柔和的颜色用于商务网站等。
另外，不要使用图片背景。回想一下，在你浏览过的知名网站中，有多少使用图片背景的？几乎没有吧？其实，道理很简单，人们来到你的网站（尤其是商务网站），你希望他们读你的内容，还是欣赏漂亮的图片？况且这种背景还有一个缺点——减慢了网页装入速度。另外，不使用图片背景，也等于在向来访者表明：“我们以高质量的内容（产品或服务）取胜，而不是花哨的装饰”。你有这个自信吗？
如果坚持要使用图片背景，那么一定要使它很亮，以免它影响前面文字的阅读。为此，应该对每个网页进行测试。图片背景，可以由一张小图片重复拼合而成（也就是“平铺”），也可以是一张完整的大图片。但后者容易出现问题，尤其是使用框架的时候。如果访问者设定的显示分辨率，与你设计背景时使用的不同，网页显示就不正确。通常，使用更高分辨率的访客，会看到一张以上的背景图片，它们自动进行平铺，但拼图一般不完整。此外，这种图片在框架中，滚动屏幕时会出现滞留现象。
2、平庸纷乱的图形
刚接触网页设计，总喜欢在其中塞满漂亮的图片，这似乎是“人之常情”，然而，这正是专业网站的又一忌讳。
记住，只有在语言难于表达的地方，才使用图片，而且图片应该简洁，文件尺寸要尽量小。不要轻易用图片代替文本，如标题、导航栏等。的确， HTML 中的文本不是在各种浏览器中都能正确显示，但是如果使用层叠样式表（ CSS ），情况就要好得多。文本具有装载速度快的优势，不会出现象图片有时无法打开的问题，而且修改起来也更加方便。
3、别扭的框架I
为便于浏览，有不少站点使用了框架。通常，在屏幕一侧或顶部建立导航区，浏览区滚动的时候，这里可以保持不动，这样，也许真给浏览带来了一些方便，但如不小心使用，它也可能给访客带来麻烦，使屏幕变得更加杂乱。同样，我们反观许多专业网站，使用框架的寥寥无几。
4、单调的直线型网页
在互联网出现初期，网页内容按直线布置。图片、文本、标题，都按垂直方向，依次向下放，这种长长的网页看起来就象议事日程。为了查看网页内容，你必须不时滚动屏幕，既单调又不方便。并不是那个时候的设计人员缺乏想象力——他们别无选择，因为早期的 HTML 不支持象报刊杂志一样的分栏。
f! v 从 HTML 2.0 开始，才引入了 TABLE 这个重要标记，设计人员终于可以对网页进行分栏布置，这样，既便于阅读，又能显示更多信息，还使页面效果更加美观，所以，现在大多数网站都使用了它。也许 TABLE 不是十分完美，但它可能是目前每个专业网页设计人员仍乐于使用的方法，花点时间认真学好它。
5、先声夺人的计数器
可能很多人都有过这种感觉，突然进入一个网页，最先吸引注意力的是一个醒目的计数器。显然，这未免有些喧宾夺主。.
监视和分析网站流量的确很重要。一些大型网站根据他们的服务器记录，分析、收集访客的各种信息。其实，有的软件也具有此功能，如 HitBOX Tracker Viewer 等，没有必要放这种既“抢镜头”又破坏视觉效果的玩意儿，何况有的“计数器”统计并不准确、科学。
6、“正在建设之中……”
不知你是否遇到过这种情况？点击某网站上一个链接，进入一个网页，里面除了显示“正在建设之中……”或“请稍后再来”，其它什么也没有。这种说法也许不够准确，因为也有的人还写上了更详细说明，甚至放上一张可爱的修路动画，但是，所有这些似乎只能说明一点“这是一个业余网站！”。
你见到过一本杂志或某部电视，中间出现一段“请等待，正在制作中”吗？网上冲浪者的注意力是很短暂的，很少有人对“请稍后再来”这样的事情感兴趣。遇到这种情况，真正以后再去那一页人少之又少。其实，明智的做法应该是，在主页中，说明网站将要添加的功能、内容、服务或产品等，而不是放一个毫无用处的链接。
另外，请注意，某些搜索引擎拒绝注册包含“正在建设”这类链接的网站。
7、多余的建议 进入有的网站，你往往可以看到这样两行小字：“强烈建议使用某某浏览器、某种分辨率浏览”。通常，你会按照它的意思，重新设定显示分辨率，并打开另一种浏览器吗？我想，你多半不会，是的，我也不会。那么，我们自己设计网页时，干嘛还要放这些无用而有碍观瞻的东西呢？
8、免费广告和其它垃圾
新手的站点总有不少破坏页面效果的垃圾——图档啦、按钮啦、图标啦、广告啦，让人眼花缭乱。你可知道，你放在网页上的每样东西，都会延长访客装载网页的时间？在目前我们“龟速”的信息高速公路上，你这样等于是在考验来者的耐性，很多人只好马上一走了之。我们认为，简洁就是一种很好的风格。
当然，你放的这些东西当中，某些可能会给你赚点钱，而有的对增大访问量有好处（如交换链接）。但是 Netscape 和 IE 图标有什么用呢？那些搜索引擎有什么用呢？如果一个链接，尤其是图片，不能真正为你赚钱或增加访问量。
</p><p>站点美化,网站,合理布局,注意事项 业余网站 网站的合理布局 网站布局的注意事项 网站搭建注意事项 网站搭建
对于打算进行网络创业的个人来说，很容易存在的一个问题就是把网站做得象业余（个人）网站，这样很容易使别人产生不信任感而影响业务发展。在此我们总结了一些业余网站的常见特征，请大家尽量避免：
1、杂乱的网页背景
这是新手最容易犯的毛病之一，他们喜欢用鲜艳的色彩或亮丽的图片，作为网页背景，其实，这往往弊大于利。
那么，网页背景设定为何种颜色最好呢？使用下面这个语句：
< BODY bgcolor=white>
没错！这只是个普通的白色背景，但它适合于很多场合，能够与页面上其他各种元素和谐搭配。想想 Yahoo 等名站，你就会明白。如果你真想有一个“特酷”的效果，那么，可以用黑色代替白色。当然，你也许能够举出使用其他颜色的成功网站。但它们很大程度上遵守了这样一个规则：选择的色彩符合网站主题。如明亮的色彩用于儿童网站、柔和的颜色用于商务网站等。
另外，不要使用图片背景。回想一下，在你浏览过的知名网站中，有多少使用图片背景的？几乎没有吧？其实，道理很简单，人们来到你的网站（尤其是商务网站），你希望他们读你的内容，还是欣赏漂亮的图片？况且这种背景还有一个缺点——减慢了网页装入速度。另外，不使用图片背景，也等于在向来访者表明：“我们以高质量的内容（产品或服务）取胜，而不是花哨的装饰”。你有这个自信吗？
如果坚持要使用图片背景，那么一定要使它很亮，以免它影响前面文字的阅读。为此，应该对每个网页进行测试。图片背景，可以由一张小图片重复拼合而成（也就是“平铺”），也可以是一张完整的大图片。但后者容易出现问题，尤其是使用框架的时候。如果访问者设定的显示分辨率，与你设计背景时使用的不同，网页显示就不正确。通常，使用更高分辨率的访客，会看到一张以上的背景图片，它们自动进行平铺，但拼图一般不完整。此外，这种图片在框架中，滚动屏幕时会出现滞留现象。
2、平庸纷乱的图形
刚接触网页设计，总喜欢在其中塞满漂亮的图片，这似乎是“人之常情”，然而，这正是专业网站的又一忌讳。
记住，只有在语言难于表达的地方，才使用图片，而且图片应该简洁，文件尺寸要尽量小。不要轻易用图片代替文本，如标题、导航栏等。的确， HTML 中的文本不是在各种浏览器中都能正确显示，但是如果使用层叠样式表（ CSS ），情况就要好得多。文本具有装载速度快的优势，不会出现象图片有时无法打开的问题，而且修改起来也更加方便。
3、别扭的框架I
为便于浏览，有不少站点使用了框架。通常，在屏幕一侧或顶部建立导航区，浏览区滚动的时候，这里可以保持不动，这样，也许真给浏览带来了一些方便，但如不小心使用，它也可能给访客带来麻烦，使屏幕变得更加杂乱。同样，我们反观许多专业网站，使用框架的寥寥无几。
4、单调的直线型网页
在互联网出现初期，网页内容按直线布置。图片、文本、标题，都按垂直方向，依次向下放，这种长长的网页看起来就象议事日程。为了查看网页内容，你必须不时滚动屏幕，既单调又不方便。并不是那个时候的设计人员缺乏想象力——他们别无选择，因为早期的 HTML 不支持象报刊杂志一样的分栏。
f! v 从 HTML 2.0 开始，才引入了 TABLE 这个重要标记，设计人员终于可以对网页进行分栏布置，这样，既便于阅读，又能显示更多信息，还使页面效果更加美观，所以，现在大多数网站都使用了它。也许 TABLE 不是十分完美，但它可能是目前每个专业网页设计人员仍乐于使用的方法，花点时间认真学好它。
5、先声夺人的计数器
可能很多人都有过这种感觉，突然进入一个网页，最先吸引注意力的是一个醒目的计数器。显然，这未免有些喧宾夺主。.
监视和分析网站流量的确很重要。一些大型网站根据他们的服务器记录，分析、收集访客的各种信息。其实，有的软件也具有此功能，如 HitBOX Tracker Viewer 等，没有必要放这种既“抢镜头”又破坏视觉效果的玩意儿，何况有的“计数器”统计并不准确、科学。
6、“正在建设之中……”
不知你是否遇到过这种情况？点击某网站上一个链接，进入一个网页，里面除了显示“正在建设之中……”或“请稍后再来”，其它什么也没有。这种说法也许不够准确，因为也有的人还写上了更详细说明，甚至放上一张可爱的修路动画，但是，所有这些似乎只能说明一点“这是一个业余网站！”。
你见到过一本杂志或某部电视，中间出现一段“请等待，正在制作中”吗？网上冲浪者的注意力是很短暂的，很少有人对“请稍后再来”这样的事情感兴趣。遇到这种情况，真正以后再去那一页人少之又少。其实，明智的做法应该是，在主页中，说明网站将要添加的功能、内容、服务或产品等，而不是放一个毫无用处的链接。
另外，请注意，某些搜索引擎拒绝注册包含“正在建设”这类链接的网站。
7、多余的建议 进入有的网站，你往往可以看到这样两行小字：“强烈建议使用某某浏览器、某种分辨率浏览”。通常，你会按照它的意思，重新设定显示分辨率，并打开另一种浏览器吗？我想，你多半不会，是的，我也不会。那么，我们自己设计网页时，干嘛还要放这些无用而有碍观瞻的东西呢？
8、免费广告和其它垃圾
新手的站点总有不少破坏页面效果的垃圾——图档啦、按钮啦、图标啦、广告啦，让人眼花缭乱。你可知道，你放在网页上的每样东西，都会延长访客装载网页的时间？在目前我们“龟速”的信息高速公路上，你这样等于是在考验来者的耐性，很多人只好马上一走了之。我们认为，简洁就是一种很好的风格。
当然，你放的这些东西当中，某些可能会给你赚点钱，而有的对增大访问量有好处（如交换链接）。但是 Netscape 和 IE 图标有什么用呢？那些搜索引擎有什么用呢？如果一个链接，尤其是图片，不能真正为你赚钱或增加访问量。
</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
tangzhiwu 2012-08-28
- 打赏
- 举报
不知道ie6的问题如何解决
srxljl 2012-03-14
- 打赏
- 举报
腾讯邮箱做的太牛了，ie6也没有问题，而且不用js的
beijicool 2011-04-22
- 打赏
- 举报
opera 有点问题
cjh200102 2011-04-22
- 打赏
- 举报
楼主辛苦了
itinfm 2011-04-21
- 打赏
- 举报
[Quote=引用 3 楼 jywcyx 的回复:]
嗯 ie6下有点小问题。谢谢楼主，分享了
[/Quote]
IE6下是不是要设置不同的Z-INDEX才行？
嗯 ie6下有点小问题。谢谢楼主，分享了
[/Quote]
IE6下是不是要设置不同的Z-INDEX才行？
itinfm 2011-04-21
- 打赏
- 举报
[Quote=引用 4 楼 missgd152 的回复:]
用IE6看确实有点问题，但楼主你有没有想过，在构建这个页面的时候你时而用百分比(%)时而又用像素(px)，这会造成浏览器的识别问题。
建议：要么都用百分比 --%，要么都用像素做单位---px。
[/Quote]
但我要做的效果就是，头尾固定高度，中间填满，左边固定宽度，右边填满，整个全屏的效果，我是要做的是ERP软件的界面，网上做这类后台，大多用表格再加上一点JS，或是框架，但我喜欢用DIV+CSS,希望大家多多完善一下！！
用IE6看确实有点问题，但楼主你有没有想过，在构建这个页面的时候你时而用百分比(%)时而又用像素(px)，这会造成浏览器的识别问题。
建议：要么都用百分比 --%，要么都用像素做单位---px。
[/Quote]
但我要做的效果就是，头尾固定高度，中间填满，左边固定宽度，右边填满，整个全屏的效果，我是要做的是ERP软件的界面，网上做这类后台，大多用表格再加上一点JS，或是框架，但我喜欢用DIV+CSS,希望大家多多完善一下！！
ttleehyde 2011-04-21
- 打赏
- 举报
同意4楼
FF测试了么？
FF测试了么？
missgd152 2011-04-21
- 打赏
- 举报
用IE6看确实有点问题，但楼主你有没有想过，在构建这个页面的时候你时而用百分比(%)时而又用像素(px)，这会造成浏览器的识别问题。
建议：要么都用百分比 --%，要么都用像素做单位---px。
建议：要么都用百分比 --%，要么都用像素做单位---px。
卟惹尘埃 2011-04-21
- 打赏
- 举报
嗯 ie6下有点小问题。谢谢楼主，分享了
itinfm 2011-04-20
- 打赏
- 举报
在我电脑里360浏览器和IE8完美通过！！！
