Question

我有一个使用表格进行布局的网站页面，我正在尝试将其转换为CSS（之前从未使用过）

导航是6种形式，其中放置了不同的图像。我知道我可以使用css为每个人提供一个id和位置但是必须有一个不那么笨重的方式？

我想知道如果我可以创建一个类来指定相对于前一个链接位置的链接位置，并且可以手动设置第一个？

谢谢：）

Answer 1

纯粹主义者会说表格只应用于表格数据。您的网站不是表格数据，它是一个布局，所以在这里使用表格是一个黑客。如果它有效，这是一个非常好的黑客攻击，但它最终可能不是最干净的解决方案。

我的实用部分（比我的纳粹标准大得多）说可能有一种更清洁的方法使用CSS。这可以消除因不必要的桌面杂乱而使您的来源混乱的需要。你真的有两个部门，每个部门都有包含图像，链接和文本的段落。如果您的HTML不必包含任何内容，那将是理想的选择。

如果你很好地使用CSS，你可以得到完全相同的结果：

http://www.aharrisbooks.net/demo/sample.html

使用“查看来源”查看HTML和CSS代码。

一些注意事项：

我使用了'fieldset'元素（应该在表单中使用，但在这里效果很好）
我猜颜色
修改CSS以获得您正在寻找的效果
我（显然）只使用了一个图标，但同样的效果适用于整个页面
只需要一个div（即使这不是必需的，但在页面上集中内容看起来很不错

我喜欢这个设计的是它保持HTML的清洁程度。

祝您好运，如果您有任何疑问，请随时放弃。

PS更有趣，将以下CSS3语法添加到fieldset

  box-shadow: 5px 5px 5px #333;
  border-radius: 10px;

  -moz-box-shadow: 5px 5px 5px #333;
  -moz-border-radius: 10px;

  -webkit-box-shadow: 5px 5px 5px #333;
  -webkit-border-radius: 10px;

这些属性添加圆角和阴影以获得非常好的效果。它不适用于IE，但其他最近的浏览器（Safari，Chrome，Firefox和大多数移动浏览器）都会看到非常好的效果。是的CSS3！

Answer 2

尝试div.classname { float: left; width: 200px }并为容器对象提供相同或不同的宽度 - 在您满意之前进行实验

Answer 3

虽然jimplode不会反对我，但表仍然是HTML中的有效元素。您甚至可以使用CSS样式DIV（see quirksmode for browser compatibility）使用display: table来模拟它们。因此，除非设计是维护噩梦，或者还有其他一些非常紧迫的理由要改变布局，请保留它。

为大多数浏览器设置CSS可能是一场噩梦，特别是如果你需要“特殊”的东西。在同一行上说几个元素具有相同（自动）高度。

如果您是CSS新手，请查找一个有效的示例并开始修改它。

如果您正在为公共网站执行此操作，请使用Firefox 3，Chrome，Opera，IE6，IE7和IE8并对其进行测试。

Answer 4

这是使用表格的当前布局的图像。这很简单，但我在css上找到的所有信息都涉及多个列。我想我只需要一个？也许两个div？

img208.imageshack.us/img208/7038/layoutsz.png

使用类在CSS中创建菜单

4 个答案: