HTML – 是否有任何网页布局范例,使CSS有点少……不可预测？

我写这个问题的动机是,我真的想要制作出色的网站,但我确实觉得CSS并不舒服.

我的感觉是,所有这些都是关于反复试验的.我需要尝试做一些测试,测试,然后在所有浏览器中重新测试,毕竟我仍然觉得结果不是跨浏览器.

我找不到一种方法来系统地转换一个易于阅读和跨浏览器的一致布局的想法.

所以我问你：有没有一个范例,一步一步的指导或任何可以帮助我感觉我正在以正确的方式做的事情？

解决方法

使用 Object Oriented CSS.他们的方法非常有条理;通过查看标记,页面才有意义.布局组件特别好.

例如：

<div class="line">
  <div class="unit size1of2">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="unit size1of2 lastUnit">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
 </div>
</div>

上面的标记是否有意义？您可以找到更多网格样本here.

此外,您可能应该知道OOCSS是基于CSS重置样式表和YUI库中的字体构建的.尽管OCSSS没有定义真正的“样式”,但它为使CSS更具可预测性和一致性提供了良好的基础.