传统网站与Web标准——表格布局实例

步骤1：

一、效果

二、HTML

INSERT WEBSITE NAME
 
optional tagline here

三、CSS

/* Global Styles */body {margin:0px;}#logo  {font:14px Arial, Helvetica, sans-serif;color: #FF9900;letter-spacing:.5em;line-height:30px;}#tagline  { font:11px Arial, Helvetica, sans-serif;color: #FF9900;letter-spacing:.2em;line-height:14px;}

四、知识点：

（一） 标签的 nowrap 属性 :

规定表格单元格中的内容不换行，属性行为与很多参考资料提的table、td的width属性无关。

（二）em:

em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

 

五、技术要点：

 1、表格总宽度不固定，具体宽度由第4个单元格100%的设置补充，整个宽度充满屏幕；

2、页边距在样式表中由标签body设置；

3、字体在样式表中由标签#logo、#tagline设置；

4、布局表格属性在网页中设置

；

5、单元格中插入图片时，单元格的宽度应该由图片宽度决定，两个图片高度应该一致。

步骤2：

一、效果：

二、HTML

三、CSS

无对应的样式

四、要点

七条红黄相间的线而已，每行中插入的是一个像素宽高，颜色透明的图片mm_spacer.gif

 

步骤3：

一、效果

二、HTML

三、CSS

#navigation td {border-bottom: 1px solid #FF9900}#navigation a {font:11px Arial, Helvetica, sans-serif;color: #FF9900;line-height:16px;letter-spacing:.1em;text-decoration: none;display:block;padding:8px 6px 8px 22px;}
#navigation a:hover {color:#FFFFCC;font-weight:bold;background: url("mm_bullet_yellow.gif") 10px 50% no-repeat;}
.navText {font:11px Georgia, Times New Roman, Times, serif;color: #1F2669;line-height:16px;letter-spacing:.1em;text-decoration: none;}

四、要点：

 1、背景在标签中设置，背景线图片mm_bg_red.gif；

2、navborder、#navheader？？

 

步骤4：

一、效果

二、HTML

ABOUT US THE SPA TREATMENTS CLASSES CONTACT
	WELCOME MESSAGE This Home Page layout makes a great starting point for your website. Virtually all of the content is customizable, including the images, the text, and the links. You can decide whether to keep the existing graphics or swap them out for pictures of your own. The text on this page is intended to help you jumpstart your design by suggesting the sort of content you may want to include, but don't let it limit you. The same is also true for the link text - feel free to change the names of the links to better suit your particular needs. If you have any questions about using Contribute to edit these pages, refer to the Read Me file included with the download or to the Contribute Help System. Have fun and make a great website!

三、CSS

.pageName{font:18px Arial, Helvetica, sans-serif;color: #FFFF00;line-height:24px;letter-spacing:.3em;}
.bodyText {font:11px Arial, Helvetica, sans-serif;color:#FFFF00;line-height:22px;margin-top:0px;letter-spacing:.1em;}

 

步骤5：

一、效果

 二、HTML

FEATURED PRODUCTS



Lorem ipsum dolor sit amet consetetur.
read more >

Lorem ipsum dolor sit amet consetetur.
read more >

 
 

三、CSS

.columnHeader {font: 11px Arial, Helvetica, sans-serif;color: #FF080E;line-height:18px;letter-spacing:.05em;}
.smallText {font:10px Arial, Helvetica, sans-serif;color:#333333;}