背景图像
问题描述:
我在这个过程中编码的网页设计,我已经花了我的时间宏伟想我将如何编写此导航栏,其中<li>
有背景图像调整到元素宽度的动态宽度。
我的想法是使用<span>
并将背景图片分成三部分。
<li>
<span class="libefore"></span>
<a href="#">MOVIES</a>
<span class="liafter"></span>
</li>
这是什么编码的最佳方式?
答
如果你愿意去与CSS 2.1:前:选择后(见这里支持的浏览器:http://www.quirksmode.org/css/contents.html),你可以尝试这样的事:
HTML:
<li>
<a href="#">Movies</a>
</li>
CSS:
li:before {
background-color: #F00;
content: '\00A0\00A0';
}
li a {
background-color: #0F0;
text-transform: uppercase;
}
li:after {
background-color: #00F;
content: '\00A0\00A0';
}
这会保持您的HTML清洁而不会引入任何表示元素。 (即没有没有内容或分层目的的跨度元素)另外,使用文本转换来处理任何大写转换并不是一个错误的做法,以防万一您希望有一天更改样式而无需修改内容。
这是应该给一点出发点来调整从小提琴:http://jsfiddle.net/6Keaa/
希望这台你在正确的方向...