嵌套设计的div
问题描述:
请原谅我,我的网络编程能力是相当有限,这使得即使google搜索困难的话题,因为我不知道正确的条款..嵌套设计的div
反正我的问题,(这我肯定会措辞怪异,因为我真的不知道如何谈论这个)是:
有没有什么办法可以用html + css实现这个pseduocode?
css文件:
#ropeimage {
background-repeat:repeat-x;
background:url(images/rope.png);
}
#ropetext {
<div id="ropeimage">
/* some text properties */
}
,然后在HTML文件中
<div id="ropetext">hello</div>
<div id="ropetext">there</div>
我想问的是,尽管我知道我可以做一些类似于
<div id="ropetext"><div id="ropeimage">hello</div></div>
<div id="ropetext"><div id="ropeimage">there</div></div>
的原因如果我知道我总是需要这个,为什么不把它藏在css文件中。
如果有人很好奇,我想要做的是构建一个div,它将重复x'rope'图像,然后垂直打印一些文本。我无法将所有这些通常放在一个div中,因为绳子的背景图像会在文本下重复出现,所以我需要两个div,以便图像在文字div上一停止重复。
答
我相信,而不是使用id
要使用class
。
所以你的CSS看起来就像这样:
.ropetext {
/* properties */
}
然后在你的HTML:
<div class="ropetext"></div>
类和一个ID之间的区别是,你要使用一个ID只有一个HTML标记。一个类可以应用于很多标签。
此外,你可以在你的CSS使嵌套样式定义:
.rope {
/* properties defining any rope div in general */
position: relative;
}
.rope .top {
/* properties defining the top of the div */
/* background image stuff goes here */
}
.rope .bottom {
/* properties defining the bottom of the div */
position: absolute;
bottom: 0px;
}
在HTML:
<div class="rope">
<div class="top">
</div>
<div class="bottom">
Hello
</div>
</div>
我没有测试过这一点,但我相信这是轨道上你正在寻找。
我想我们都误解了他想要做的事情......因为如果你仔细观察他的代码,他似乎只是想重复那个图像......这不是我们都建议的 – KyleK 2013-04-10 22:57:01
他需要的一个大的盒子,有一个重复的图像,由一个较小的div与文本的interupted,他只是手动重复该图像,而不是在一个灵活的容器 – KyleK 2013-04-10 22:57:52
我基本上想嵌套div在CSS内,这样我可以调用一个div在html ,给了我在html中嵌套div的相同效果。为组织的目的 – 2013-04-10 22:58:29