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

我有一个网站通常在首页的顶部有新闻项目，有时（对于特定的时间段）在新闻项目下有一个或多个“快速链接”，以引导用户进入热门话题页面。在这些之下是平常的街舞。风格问题 - 样式和样式表的方法

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

以前，当外观不那么动态时，每个部分都被绝对定位，并且适当地配置了top属性。但是，由于需要更微妙的变化，我发现自己斩断和改变了基本的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年第3季度或第4季度重新开发。在那个阶段，我希望从绝对定位的方法转向更流畅的方法 - 所以这个问题是关于什么在过渡期间做，也作为风格的一般问题。

来源

2008-11-07 CJM

.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...;}

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

如果它真的是一个临时解决方案，请继续，让自己容易。但是现在，大多数临时解决方案都存在很多年了。

来源

2008-11-07 11:36:34

嗯，我们是* *打算重新开发所有组织网站都有一个共同的主题，但考虑到我们在项目规划和需求规格方面的记录，我认为会有比人们实际想象的更多的工作 - 因此暂时可能会持续一段时间。 – CJM 2008-11-07 11:44:19

那么，你使用"<classname>"没有快速链接，“<classname>2"有什么时候？

你知道，你可以在一个元素上使用多个类名。例如，你可以有<elem class="<classname> quicklinks">。在你的CSS中有一个单独的.quicklinks类来将所有内容向下移动50px。

绝对定位并不意味着这样的事情。如果您将文字大小调整得如此之大，事情会开始重叠。

有可能只是快速链接的存在可以用来使其他所有内容都下降，因为您不需要定位这样的元素。

来源

2008-11-09 08:24:18

正如我对GameCat所说的，底层设计相对较差 - 布局应该是流畅的，但可悲的是它不是。幸运的是，重新设计中的意志会发生变化。 – CJM 2008-11-11 16:19:42

其实，最好的解决办法可能是这样的：

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

但我同意你的观点（S）GameCat ...

感谢

来源

2008-11-11 16:17:59 CJM

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

回答

相关问题