div+css

首先这个源码是关于DIV的。先看看人家写的CSS是层次分明的，首先是
/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/
然后是HTML页面CSS，body的CSS，依然用注释标明。
/***********************************************/
/* HTML tag styles                             */
/***********************************************/

关于body的CSS有几个疑问。
①body的行高
②背景图片是一个竖线，由上的重颜色到下面的亮度高。
经过测试发现该图片大小为28*1200，然而当设置为背景时，它会填充整个页面，也就是body。
而在body中定义行高，则是为整个页面字体定义行高.

接着走读代码发现了一个布局要点，该DIV代码头部DIV顶着页面顶部。用了绝对定位，相对与body来说，top:0px;上边距0px。left:2%;right;2%左右边距百分之二。而DIV大小为95.6%。这样就完成了顶部的大体布局了。
接着分析顶部中的元素，第一个元素是id为sitename的h1标签，外边距margin:0;填充padding:16px 0px 8px 0px;颜色color:#ffffff;  这里不得一提的是，外边距和填充相对与父元素的距离=外边距+填充。如果设置空白间距，则要注意是用margin还是padding实现，不然可能会得不出实际效果。
探究发现的一点是，使用定位跟使用外边距填充有什么不同？
答案是当使用外边距或填充时，将会改变框的大小。同时父框也将发生改变。
而使用定位时，改变的是元素相对于父元素的位置。

第二个元素是常用的收藏等等功能，他用的是DIV定位。
绝对定位，上16px；与h1标签元素与上空白相同，形成平行效果。
right:0;实现向父元素右对齐效果。

第二遍阅读....
.skipLinks{display:none;}不显示刚开始的一个div的内容。
头部包括菜单标题的块id为masthead,他的位置用绝对定位来确定。
left:2%;right:2%;width:95.6%;与100%相差0.4%，为了兼容。

字体如h1要设置空白了，就是用padding来完成的，margin:0;一般不用

悬浮框，右边utility在框中依然用绝对定位，他的定位相对于mashead框来定位
right:0px;右对齐，top:16px;上边距16px;

设置导航栏,用块级id为globalNav的块框设计，菜单的两边是不同的图片，分别为绝对定位，top都为0px；
左对齐为left:0px;右对齐为right:0px;  globalNav背景图像即为导航图像的中间部分，高度思想的掌握，globalNav高32px，图片高为32px;。图片宽度为4px。
重叠，导航上重叠链接的方法，在globalNav的子元素，globalLink块级元素，绝对定位，高度为22px，top:6px；也就是说它相对与globalNav来说，下边距为32-22-6=4px;
同样的这也就说明了为什么globalNav中的图片为什么margin-bottom:-4px;了，因为globalLink与globalNav下边距为4px。但它的margin:0px;padding:0px;因为这只是DW的一个演示，再告诉我们编码要有思想，要规范。
实际绝对定位后，根本不需要在图片定义CSS margin-bottem:-4px;因为是重叠效果所以要设置z-index:100;这个值任意，只要实现透视效果就好，left:8px;美观。
因为图片与globalLink是同级元素，同级元素底边距对齐则为0px时，则需下边距相加为0；这样才是规范的。因为外边距是可以重叠的，比如两个垂直的元素外边距分别都为20px；则他们的外边距为20px，但这两个同级元素，一个为20px,一个为-20px,则两个元素边距为0px。实现了对齐效果。

globalLink块中的链接glink，每一个链接都用了glink，所以应用class来加载CSS。链接设置填空padding:2px 5px 4px 5px;美化视觉效果，左右各5px间距，上下分别为2px和4px;结合globalNav块级元素的定位，上6px，下4px。
上2+6=8，下4+4=8px，使链接居中。
定义悬浮效果 a.glink:hover背景图像设置为高亮度的和谐图像，text-decoration:none;无下划线。

卓越编程者：资源科技利用得炉火纯清！！！

搜索的浮动框form id为search,绝对定位，top:5px;right:10px;
该form中包含一个input输入，search input{mrgin:0px 0px 0px 10px}左边距10px;
字体大小为70%。

隐藏的特效链接，块级元素中class为subglobalNav,绝对定位top:80px;left:0px;height:20px;
padding:0px 0px 0px 10px;因为设置填空了，所以绝对定位的left:0px;基本上是对于mastead父元素来说的。visibility: hidden;不可见但不是使元素彻底消失。

字体大小为80%。

第二个全局块级元素，id为pagece，关于它运用到了圆角边框技术。
绝对定位，top:112px;留下一些空白与上全局块级元素的一些空白，left: 2%;right: 2%;
width:95.6%; 与上块级元素相同的大小，左右间距。

两个圆角小图片，6*6px大小，id分别为tl和tr。
绝对定位一个为top:-1px;left:-1px;另一个为:top:-1px;right:-1px;实现左右各对齐。
margin:0px;padding:0px;

当图片的大小超出块级元素时，它会自动溢出显示。

然后是浮动框，pagenav它的CSS浮动float:left;width:178px;边框分别定义了右边框和底边框
CSS样式是border-right: 1px solid #cccccc;

然后是浮动框内的链接块id为sectionLinks的元素，定义链接时应#sectionLinks a:link, #sectionLinks a:visited这样定义。链接显示时，display:block;定义背景图片，和上底边框，美化。
左导航栏完毕。

内容id为content,子元素设置填空，一个图片设置float:left; 和填空。

divid为story的块级元素嵌入表格，3行2列的表格。表格中的数据单元也可以设置样式....

底边网页信息的siteinfo块级元素，无需设置绝对定位，因为上块级元素浮动了。
所以clear: both;设置填空和上边框，下图片与文本居中对齐vertical-align: middle;