网页导航栏模块设计CSS控制默认第一个LI背影

html-css010

网页导航栏模块设计CSS控制默认第一个LI背影,第1张

像上面那种,就是定义ACTIVE属性,使其A的背影带色,每个页植入对应的ACTIVE,比如,首页只植入在第一个LI,第二个页只植入第二个LI。。。另外定义LI属性,使其HOVER的背影跟ACTIVE的背影色一样,这样子移动鼠标时对应的LI就显示背影色,点击后的背影色也不变。

修改bootstrap默认导航条样式方法如下:

1、用浏览器的开发工具定位css的样式所在文件,然后新建一个样式文件覆盖掉原来的样式。如果项目中的导航栏都是固定样式的,可以修改bootstrap的less源文件,修改后编译一份。

2、用chrome打开网页,使用开发者工具,左上角有个鼠标箭头,点下,选中要改样式的代码,右侧提示样式表位置,打开,复制类名,再写入自己样式就可以了。

3、有个bootstrap.css直接去里面改就行,如果不想改变原始的,要自己定义一个css,引入时候注意顺序

1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。

2、在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。

3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏。

4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化。

5、也可以制作成水平导航栏,overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏,float: left使导航栏水平显示。

6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,已经置顶了。