一 css 背景图片background 属性
华哥虽说css接触得早,而且在dreamweaver里,也曾写过无数的背景属性样式,可是如果要手写css 背景的代码,总是会忘记顺序和一些参数,别说哥很low,毕竟哥不是天天在玩前端啊。
如上图,导航的最后一项,是新增的营销用页面,既然有营销目的,那能否让其更为突出一些,让用户注意到并吸引更多点击呢。比较好的方式是在前面加一个小图标,以突出它的与众不同。
对应的html结构如下:
<li><a href="/topic/fbzsb/" class="cur" target="_blank">寒暑假封闭住宿班</a></li>
可以在html里加上图标,但最好的方式还是用css,至少这样不用去后台再把所有的栏目内容生成一遍。
手写了一下background的代码,一些参数忘了,显示成这样。
于是参考:css 背景图片background 属性实例
在一个div元素中设置多个背景图像(并指定他们的位置):
body { background: #00ff00 url('smiley.gif') no-repeat fixed center; }
于是修改,以下是完整的css代码:
nav .nav_list li:last-child { padding-left: 20px; background: url(/images/tui.png) no-repeat left center;}
ok!
二 最后一个元素last-child 选择器
在上面的示例应用中,要注意的是这个背景图片属性是写在 li:last-child中的。last-child定义和用法是:
:last-child选择器用来匹配父元素中最后一个子元素。也就是说:它表示最后那个的意思。
曾尝试把last-child作用在a标签上,没什么变化,不成。也不去追究什么原因了。此路不通就另找一条。
让last-child作用在父级的li上,就能看到变化。
三 hover样式的变化与独立
最后,希望这个导航中的last元素,在鼠标移上去后有所变化。在没有加入任何css的情况下,最后这个元素也会如同其他导航菜单一样,出现一个橙色的背景,可是由于图片的加入,二者摆在一块,很难看!
那就需要把这最后一个元素的样式给独立出来,有它自己的展现方式,不要像前面的兄弟们长相一样。
那就应该是对li中的最后一个元素里的a标签(见前面的html结构),添加一些样式,发挥作用。
那有可能会出现两个冒号:,不知道这种css的写法能不能生效,以前似乎没有写过。尝试一下吧。代码如下:
nav .nav_list li:last-child a:hover {
color: #fb8023;
background: none;
结果发现,嘿,成了。
以下是浏览器的css工具查看结果,可以看到,最后一个元素里的a标签的hover样式,发挥了作用,而其他兄弟的a里的hover样式,则由于层叠的机制,失效了。
工作记录,以备用。