CSS 作业要求是制作竖排导航条,要求宽度小于150px,鼠标经过时有荧光灯效果。

html-css031

CSS 作业要求是制作竖排导航条,要求宽度小于150px,鼠标经过时有荧光灯效果。,第1张

#navmenu2{

width:150px

text-align:center

float:left

}

#navmenu2 ul{

padding:0px

margin:0px

list-style:none

}

#navmenu2 li{

margin:0px

}

#navmenu2 a{

display:block

text-decoration:none

width:120px

border:1px

border-right:10px

border-left:20px

border-color:#60C

border-style:solid

background-color:#00F

color:#FFF

padding:7px 0px 7px 0px

}

#navmenu2 a:hover {

background-color:#000

color:#09F

border-left-color:#09f

border-right-color:#09f

border-top-color:#60c

border-bottom-color:#60c

}

.Tdfont{//蓝光字体

PADDING-RIGHT: 3px

PADDING-LEFT: 3px

FILTER:glow(color=#BBFFFF,strength=2)

PADDING-BOTTOM: 3px

CURSOR: hand

COLOR: #0000ff

PADDING-TOP: 3px

HEIGHT: 8pt

text-decoration: none

}

这是给你的css代码,你根据自己的需要改下吧。祝福你!

例子来自colorui及网上一些资源,不定时更新

例子都只取一个,其他的css样式都是类同的

多类选择器例子:

网上看见一个荧光效果,觉得蛮好看就扒过来分析了一下 https://www.jianshu.com/p/c501fee6fb68

荧光效果主要是:before和:after伪元素起的作用,先将其注释起来,看下原本的效果:

可以看见并没有荧光效果。

这个是给2个伪元素添加一个线性渲染的背景

有了上面蒙层的介绍,这个效果就是整体向外拉伸了2px。 z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:

和before一样,就是多了个高斯模糊,注释了黑色背景来看下.box:after的效果:

所以将3层叠加起来就有了荧光和边框效果。