一般来说，对于页面上那些包含文章正文或大段文字的区域，我们一直很自然地认为它们应该适应任何长度和大小的文本。 我们还应该让它们适应其他水平页面组件，例如bars，这就是我们今天要讲的网站页面组件的优化。

我们想在网站上实现如下的设计，我们该如何优化你的网站呢？

根据之前的SEO代码优化经验，我们将通过以下内容进行详述：

用一系列嵌套表构造。

图像（例如每行末端的圆角）和文本处理位于表格单元格中。 使用表格和gif缩略图来定位页面图形是一项被抱怨很久的技术，但也是一种不考虑网站优化技术的技术。 大多数网站都是以这种方式构建的。 我们公司在重构之前的主站点时，很难定位导杆上的小圆角。 最后，我们采用了一个表来修复它，然后用包含语句将它包含到文件中。

这不是一次完美的重构，因为有些地方可以简单的用CSS定义，但是使用了表格，导致代码臃肿。 这不会最大程度地优化网站。

从网站优化的角度来看这个常用的方法，是有不足的。

1. 不必要的图片（横线两端的圆角效果图也和文字内容一起写在页面代码中）

这些不必要的图片给搜索引擎的蜘蛛爬取你的网站带来 麻烦。 因为这些不必要的图片出现在页面代码中，所以蜘蛛在检索网页时，需要一定的时间来过滤掉这些不相关的代码。 同时，网页的代码容量也增加了。 搜索引擎通常对网页的容量有要求。

2. 如果用固定的行高改变文字处理大小，会发现横线设计效果被破坏，不利于网站的维护和修改。

3. 臃肿的代码 像大多数传统的网页设计方法一样，这两行代码使用了大量的代码来构建，并且嵌套表格添加了相当多的冗余 HTML 代码。 这些臃肿的代码会占用服务器空间，占满带宽，而且浏览器浏览网站时可能要等待很长时间，对用户不友好。

以下使用css+p考虑网站优化实现上述设计

/*CSSDocument*/

#register{

浮动：左；

宽度：100%；

边距：0；

填充：0；

列表样式：无；

颜色：#690;

background:#BDDB62url(image/re_bottom.gif)no-repeatbottomleft;//上面组件的底部圆角图（

圆角的渲染是通过附加一些来实现的 行的每个角落的白色阶梯像素。

)

}

# registera{ 

text-decoration:none;

颜色：#360;

} 

#reg{ 

边距：0px;

填充：8px14px;

} 

#find{float:right;

边距：0px;

填充：8px14px;

} 

#message{ 

clear:both ;/清除#message上的层浮动对#message层的影响  

font-weight:bold;  

font-size:110%;  

color:#FFF;  

text-align:center;  

background:#92B91Curl(image/mess_top.gif)no-repeattopleft;//下面组件的上面的圆角图  

}  

#messagep{  

margin:0px;  

padding:8px14px;  

background:url(image/re_bottom.gif)no-repeatleft;//上面组件的下面的圆角图  

}  

#messagestrong{  

text-transform:uppercase;//让这部分文字显示为大写格式  

}  

#messagea{  

background:url(image/mag_g.gif)no-repeat050%;  

margin:0px0px0px6px;