0

我正在尝试整理我的 html、css 和 javascript。我知道这很草率，但我想不出一种更干净的方式来写东西。我可以看到帽子必须有更整洁的方式。

http://jsfiddle.net/craigzilla/hk8SR/

有什么建议么？

#btn1 {
height: 88px;
width: 110px;
float: left;
position: absolute;
}
#btn2 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 110px;
}
#btn3 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 220px;
}
.rollover1 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover2 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover3 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
4

5 回答 5

2

首先，您可以为多个选择器分配相同的规则。像这样的东西：

.rollover1, .rollover2, .rollover3 {
    background-image: url(http://www.placehold.it/110x88);
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}

不过，比这更好的是，您可以消除对 .rollover1、2 和 3 的需求，只需创建一个适用于所有内容的 .rollover 类。

如果每次翻转都需要不同的图像，那么这将起作用：

.rollover1, .rollover2, .rollover3 {
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}
.rollover1{
    background-image: url(http://www.placehold.it/110x88);
}
.rollover2{
    background-image: url(http://www.placehold.it/110x88?2);
 }

您可以对您的 ID 执行相同的操作。

如果你认真地想要清理你的样式，请查看“面向对象的 CSS ”（注意：我认为“OOCSS”这个名称非常具有误导性，但它仍然是一个很好的做法）。面向对象的 CSS，基本上改变了编写 CSS 的方法。而不是说“这个 CSS 用于我的蓝色按钮，并且有 5px 的边距”并输出如下代码：

#myBlueButton{
    background-color:#00f;
    margin:5px;
}

<button id="myBlueButton">

你这样写 CSS：

.blue{
    background-color:#00f;
}
.margin5px{
    margin:5px;
}

然后您的按钮将如下所示：

<button class="blue margin5px">

这鼓励了关注点和语义类的分离，同时减少了对 ID 的需求并减少了对过度具体的 CSS 选择器的需求。它还允许您轻松地重复使用您的 CSS 样式，而不必重复自己。

不过，甚至比 OOCSS 更好的是，查看诸如SASS和LESS之类的东西，它们允许您编写将为您生成 CSS 的规则。

于 2013-01-30T16:22:03.360 回答
1

Rollover1 Rollover2 和 Rollover3 都是具有完全相同样式的类，这意味着您只需要一个翻转类。您可以乘坐其中两个，因为它们是相同的。

例子：

 .rollover {  // Everytime you need this styling call this class
 background-image: url(http://www.placehold.it/110x88);
 height: 88px;
 width: 110px;
 opacity: 0;
 float: left;

}

于 2013-01-30T16:16:50.533 回答
1

我认为对所有内容都使用类，然后分别放置元素会占用最少的代码。

<style>
.btn {
height: 88px;
width: 110px;
float: left;
position: absolute;
}
.rollover {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
</style>

您只需要声明一个类，然后就可以将其应用于任意数量的元素；而 ids 只能用于一个特定的元素......所以如果你想将类似的属性应用于许多东西，请使用一个类，然后将 ids 用于特定的东西。

因此，在您的 html 中，您可以在按钮class="btn"和每个按钮中使用来设置它们的相似属性，然后您可以在样式标签中添加不同的数字来唯一地定位它们style="left:###px;"。然后class="rollover"在你的翻车上使用。

于 2013-01-30T16:19:40.247 回答
0

像这样的东西（最好让所有人都在“课堂”中）：

.btn1, .btn2, .btn3, .rollover1, .rollover2, .rollover3 {
width:100px;
height: 88px;
float: left;
}

.btn1, .btn2, .btn3 {position: absolute;}

.rollover1, .rollover2, .rollover3 {opacity: 0;}

.btn2{left: 110px]
.btn3{left: 210px}

您还可以将 .rollover 和 .btn 放在精灵 CSS 中，使其成为一条规则（一个类调用），然后使用background-position：CSS Sprites

于 2013-01-30T16:22:00.523 回答
0

指向问题：清理草率代码html/css/javascript

与这篇文章相关：https ://stackoverflow.com/questions/1086584/online-service-to-cleanup-html-formatting

继续

于 2013-01-30T16:23:33.967 回答