将表格布局转换为DIV

我所看到的使用DIV元素创建圆角的最佳资源是一篇关于“列表分离”的文章-请参阅 http://alistapart.com/articles/customcorners/ . 如果您希望使用DIV元素来布局整个站点,那么该站点上还有其他几个相关的文章。见:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

有几种不同的方法 rounded corners in CSS

我喜欢尽可能地使用CSS而不是表格,因为我发现代码更容易维护,而且这听起来像是一个有着完美范围的项目,可以让你的脚湿透。

简而言之,你想要这样的东西:

<style>
  .start { background-image: url("topofbubble.png"); height: <heightofimage>; }
  .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
  .body {background-image: url("sliceofbubblemiddle.png"); }
</style>

...

<div class="comment">
  <span class="start"></span>
  <span class="body">I would like to say that div layouts are far better than table layouts.</span>
  <span class="end"></style>
</div>

你应该开始了。我没有具体地尝试代码,如果需要的话,我可以做一个完整的例子。

如果您愿意向IE用户展示尖角,则圆角可以通过 border-radius CSS属性。当前没有任何浏览器将其实现为基属性,但有几个浏览器将其作为前缀属性。例如,要在firefox中使用它,您需要使用属性 -moz-border-radius ,用于狩猎,使用 -webkit-border-radius 等。