Question

我的网站通常在首页顶部有新闻项目，有时（特定时段）会在新闻项目下方有一个或多个“快速链接”，以引导用户访问热门网页。在这些之下是通常的模糊。

我们有这些网站的替代语言版本，通常不包含新闻项目或快速链接，但可能会不时发布。

以前，当外观不太动态时，每个部分都是绝对定位的，并且顶级属性已正确配置。但是，由于需要更细微的变化，我发现自己正在切换和更改基本HTML和样式表规则。

我的问题是人们如何看待这个问题的不同方法，他们是否有任何我没有考虑过的建议。实现理想的结果很容易，但我正在考虑良好的编码实践，使网站更易于阅读和阅读。调试。

我可以为每个项目的每个变体设置单独的样式类：

.news {top: 100px; etc...;}
.news2 {top: 150px; etc...;}
.ql {top: 150px; etc...;}
.ql2 {top: 200px; etc...;}
.main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}

......这看起来有点过于冗长。

或者，或许：

.news {etc...;}
.ql {etc...;}
.main {etc...;}
.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}

更紧凑，它将样式保留在样式表中，远离HTML。

或者，甚至可能：

.news {etc...;}
.ql {etc...;}
.main {etc...;}

HTML中的

：

<div class="news" style="top:100px;">
<div class="ql" style="top:150px;">
<div class="main" style="top:200px;">

这是最“直接”的解决方案，但显然一些样式在HTML中，从纯粹主义者的角度来看是“禁忌”;这种观点有实际的原因，但在这种情况下，这可能是处理所要求的各种变化的最简单方法。

注意：该网站由第三方设计（很差），虽然我试图在没有完全重写的情况下进行救援。然而，该网站将重新开发，可能早在2009年第三季度或第四季度。在那个阶段，我希望从一个绝对定位的方法转变为一个更流畅的方法 - 所以这个问题是关于什么在过渡期间做，也作为风格的一般问题。

Answer 1

.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}

这是一种不好的做法，因为您现在将样式信息添加到HTML中。更好地使用描述性名称并将它们链接在一起。像：

.news {top: 100px; etc...;}
.news2, .ql {top: 150px; etc...;}
.ql2, .main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}

您可以稍后添加更多规则。

如果真的是一个临时解决方案，请继续，让自己轻松一点。但是现在，大多数临时解决方案都会存在很多年。

Answer 2

那么，您是使用"<classname>"表示没有快速链接的地方，而“<classname>2"表示何时有？”/ p>

你知道，你可以在一个元素上使用多个类名。所以你可以拥有<elem class="<classname> quicklinks">。并且在CSS中有一个单独的.quicklinks类，可以将所有内容移动到另外50px。

然而，绝对定位不适用于那样的事情。如果您将文本调整得如此之大，事情就会重新开始。

有可能只是快速链接的存在可以用来使其他所有内容都下拉，只要你没有像这样放置你的元素。

Answer 3

实际上，最好的解决方案可能就是：

.news, .news2 {top: 100px; etc...;}
.news2 {top: 150px;}
.ql, .ql2 {top: 150px; etc...;}
.ql2 {top: 200px;}
.main, .main2 {top: 200px; etc...;}
.main2 {top: 250px;}

但我接受你的观点GameCat ......

由于

风格问题 - 样式和样式表的方法

3 个答案: