Question

我正在尝试整理我的html，css和javascript。我知道它很草率，但我无法用更清晰的方式来写东西。我可以看到帽子必须有更整洁的方式。

有什么建议吗？

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

Answer 1

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

.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进行相同操作。

如果你真的想要清理你的风格，请查看“object oriented 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">

这会鼓励seperation of concerns和symantic classes，同时减少您对ID的需求并减少对overly specific CSS selectors的需求。它还允许您轻松地重复使用CSS样式，而无需repeat yourself。

比OOCSS更好的是，查看SASS和LESS之类的内容，它们允许您编写将为您生成CSS的规则。

Answer 2

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;

}

Answer 3

我认为使用类来处理所有内容然后单独定位元素会占用最少量的代码。

<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只能用于一个特定的元素......所以如果你想将类似的属性应用于很多东西，请使用一个类，然后使用id来表示特定的东西。

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

Answer 4

这样的事情（最好让所有人都在'班级'）：

.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设置为sprite CSS，以便使其成为一个规则（一个类调用），然后使用background-position：CSS Sprites

Answer 5

指出问题：清理邋code的代码html / css / javascript

与此帖相关：https://stackoverflow.com/questions/1086584/online-service-to-cleanup-html-formatting

清理.css：https://csscompressor.net/
清理.js：http://jsbeautifier.org/
用于清理html：http://infohound.net/tidy/
有关整理工具的其他选项：https://www.google.com/search?num=100&q=html+tidy+online&oq=html+tidy

继续

清理邋code的代码html / css / javascript

5 个答案: