-慕课网

首页课程实战体系课手记专栏慕课教程

来源：5-5 CSS3背景制作导航菜单综合练习题

全职幽默

2014-07-03 11:03

大家都被“|” 绕进去了，渐变就应该设置为空，然后通过背景来弄，看我的例子

写回答关注

30回答

妈咪妈咪哄

2014-07-14 17:54:25

已采纳

聪明还是你聪明

0 5
且行且戨

2017-04-12 17:10:40

很不错！

0 0
LOopz_

2017-03-18 16:37:32

我想问下为什么这个“|”未设置position：absolute时，页面时看不到“|”？

0 0

利木: 2017-02-17 16:14:32

	/*使用伪元素制作导航列表项分隔线*/
		.nav li:after{
             content:"";
             position:absolute;
             right:0px;
             top:20px;
             height:15px;
             width:1px;
             background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
		}
       /*删除第一项和最后一项导航分隔线*/
		.nav li:last-child:after{
             height:0px;
             width:0px;
    	 }

想问一下position的这个right和top是相对于哪个元素定位的？相对于父元素ul吗?

我将这里的right改为left，然后再删除导航里写.nav li:first-child:before 为什么不对呢？

打扰了。

0 0

慕后端0902233

2016-12-02 11:31:20

代码好像有点问题，如果我再多些几个<a>标签，背景渐变就会有问题

0 0
JungleWeb

2016-08-05 16:09:04

为什么这里position不能用relative，我试了用relative，渐变色没效果。。

0 0
bbxnhm

2016-07-18 16:04:09

原写法，第一条分割线宽度是不是变成2px了！

0 0
兿芝梅

2016-07-13 11:56:50

为什么要用渐变呢？想不清楚啊？

0 0
qq_Ya_0

2016-03-17 14:01:44
```
<?php 
    echo 
?>
```
gfvg
0 0

缪小苗: 2016-02-22 11:47:47

.nav li:not(:first-child):before{
    content: "";
    position: absolute;
    top:20px;
    left: 0;
    width: 1px;
    height: 10px;
    background-image: linear-gradient(to top, #818181, #525252,#818181);

}

0 0

缪小苗

2016-02-22 11:47:16

.nav li:not(:first-child):before{
content: "";
position: absolute;
top:20px;
left: 0;
width: 1px;
height: 10px;
background-image: linear-gradient(to top, #818181, #525252,#818181);

} 此处我是这么写的，仅供参考

0 0
幻影af

2016-02-20 16:20:36

nice，提供的代码太复杂

0 0
PARADISELIN

2016-01-24 21:16:44

真心不错谢谢

0 0
web前端端

2015-12-17 19:58:31

/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
height:0px;
width:0px;
}
我刚才也适用了你这个代码，可我这边显示出来的第一项分割线还是没有去掉？求解释！

0 0
hey自然

2015-09-25 22:59:25

最后一个伪元素直接display none

0 1
小小gift

2015-09-05 17:10:43

right：0 是什么意思？有什么作用？

0 0
malism

2015-08-30 21:24:48

厉害啊

0 0
哦哦哒

2015-08-18 16:19:41

赞一个

0 0
DengBoyun

2015-08-11 18:01:04

请问添加.nav li::after 有什么代码上的意义？

1 0

且行且戨

指在li项的后边添加一项伪元素

2017-04-12 17:13:30

共 1 条回复 >
hznn

2015-07-18 22:51:02

此子必为人才啊

0 0
paper_542

2015-06-25 17:22:49

为什么这里 right：0；

1 0

且行且戨

让那个分割线在li区域的最右边，这样才能显示在空地的中间

2017-04-12 17:12:15

共 1 条回复 >
你们城里人真会玩

2015-05-17 11:59:27

怎么看不到他发的代码

0 0
农夫三拳有点

2015-04-20 23:56:28

为啥要用absolute？

0 0
qq_沛公_0

2015-03-27 16:28:32

漂亮！我原本还想着|，直接设置这个宽度为1 长度再设置渐变

0 0
Ctrls

2015-02-21 22:59:08

好厉害！

0 0
skyd

2015-02-16 13:16:35

受教了.

0 0
Daniel_

2015-01-20 16:23:53

问一个问题after的伪类标签是访问以后的意思吗？为什么li在标签还未访问过就有效果，是不是absolute的作用？？

0 0
chuanwei

2015-01-19 15:47:11
/*使用伪元素制作导航列表项分隔线*/
.nav li:before{
content:"";
position:absolute;
left:0px;
top:20px;
height:15px;
width:1px;
background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:first-child:before{
content:"";
height:0px;
width:0px;
}
/*这样也可以，灵活多变，，，，哈哈，，以供参考*/
0 0
早起的鸟儿

2014-12-29 21:25:12

不错。

0 0
花里喵喵

2014-11-14 22:49:46

这个方法好好，就是这样设置以后字的颜色会变成蓝色，好奇怪，不过设置一个a的color为白色就可以了~

0 0