logo标签列表

需要最佳实践帮助或者正则表达式建议来创建图像精灵映射到CSS。

htmlcssregexdreamweaversprite
3

使用Compass，我正在生成图像精灵和CSS。

这非常有效，但由于我生成了大量的精灵图像和CSS，将图像映射到类名可能需要花费我和其他开发人员相当长的时间。

目前我在DreamWeaver中创建了一些正则表达式，以允许我生成显示图像及其对应类名的HTML页面，但它的布局并不是最好的，因为它只是在浮动div中列出它们，我更喜欢使用表格格式或每行7个div的组来显示它们。

我的代码目前看起来像...

...
<body>
<table>

<td class="sprite-container">
  <div class="sprite-image myimage001"></div>
  <div class="sprite-label">myimage001</div>
</td>

<td ... and so on...

我希望能够有一个正则表达式来将每组包含7个TD内容的TR标签包裹起来，以使其更整洁清晰。 （我也尝试过使用div等方式，但因为我是手动操作，这种方法最容易维护）
目前我一直在手动操作...从一个TD组中计数每30行并插入标签...这很乏味，而且由于我正在处理800多个类，需要花费相当长的时间...每次重新生成精灵时都要重做！ 噢！
或者，我也可以接受其他更好的方法...例如脚本、工具、ruby gem、正则表达式等。 非常感谢您提供的任何帮助。 我希望其他人也会觉得这很有用。
注意： 我目前使用的流程是将CSS文件复制到新文档中。 我删除了任何错误的CSS（多个设置）。 我通过查找替换运行以下正则表达式
<td class="sprite-container">
  <div class="sprite-image $1"></div>
  <div class="sprite-label">$1</div>
 </td>

然后，我进行手动编辑，添加CSS引用、HTML标签等，以使其正确显示。

非常感谢您提供的任何帮助！

1个回答
1
最简单的方法是使用DIV而不是TD。
<DIV class="sprite-container">
  <div class="sprite-image $1"></div>
  <div class="sprite-label">$1</div>
 </DIV>

然后使用CSS来样式化精灵容器。唯一需要的是将精灵容器设置为 position:relative 和 float:left。
.sprite-container {
    position: relative;
    float: left;
    margin: .5em;
    min-width: 50px; min-height: 50px;
    background-color: yellow;
}

然后使用CSS :nth-child，使得每一个新行的第7个spite-container元素强制换行。
.sprite-container:nth-child(7n+1) {
    clear: left;
}

这里有一个 jsfiddle。http://jsfiddle.net/KQ59S/

我以前从未尝试过nth-child，但它完美地运行了！谢谢！ - aack
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接