html纵向导航,【练习实例】HTML+CSS制作导航栏（横向与纵向）

纵向导航栏

建立一个列表

主页
新闻
联系
关于

2. 定义列表基本样式

ul{

/*去掉列表的样式*/

list-style-type: none;

width: 200px;

background-color: #DDDDDD;

}

li a{

/*将内联元素转换为块级元素，便于padding设定*/

display: block;

/*去掉链接默认样式*/

text-decoration: none;

color: #000000;

padding: 8px 16px;

}

定义鼠标移动到导航栏上后的样式

li a:hover{

background-color: #555;

color: white;

}

定义默认选中样式

li a.active {

background-color: #333333;

color: white;

}

若想实现全左侧固定导航栏

ul{

/*定位：使导航栏跟随滚动条滚动*/

position: fixed;

list-style-type: none;

width: 15%;

height: 100%;

background-color: #DDDDDD;

}

横向导航栏

同样建立列表

主页
新闻
联系
关于

定义列表基本样式

ul{

background-color: #333333;

list-style-type: none;

overflow: hidden;

}

li{

/*display与float两种方式使列表转为横向*/

/* display: inline; */

float: left;

}

li a{

display:block ;

color: #FFFFFF;

text-decoration: none;

text-align: center;

padding: 14px 16px;

}

定义鼠标移动到导航栏上后的样式

li a:hover{

background-color:#000000 ;

color: #999999;

}

定义默认选中样式

.active{

background-color: #555;

}

写在最后

还有一种响应式导航栏，可以根据窗口大小改变导航栏的样式。

想要实现响应式需要运用@media screen,有兴趣的可以继续拓展！

怀中猫°

发布了5 篇原创文章 · 获赞 6 · 访问量 1820

私信

关注

标签：none,HTML,color,li,样式,实例,background,导航,CSS

来源： https://blog.csdn.net/qq_44190995/article/details/104171963

html纵向导航,【练习实例】HTML+CSS制作导航栏（横向与纵向）相关推荐

js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
css制作导航栏的三角形
在做网页的时候我们通常看到这样的需求(做一个三角) 首先 .box{width: 0;height: 0;border: 50px solid ;border-color: #000 #FF0000 ...
js+css制作导航栏下划线跟随动画，自适应元素尺寸变化，Vue/Uniapp
以前也写过一个差不多的,但上一个写的存在很多问题,尤其是css要使用 justify-content: space-around才能正常计算下滑宽度,导致了在很多场景都不实用,其实那一天就想到更好的解 ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
CSS制作简单的横向菜单
1.先写一个列表,建立菜单的结构 <span style="font-size:14px;"><span style="font-size:14px;& ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作:菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单. 由上图我们可以 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...

html纵向导航,【练习实例】HTML+CSS制作导航栏（横向与纵向）

html纵向导航,【练习实例】HTML+CSS制作导航栏（横向与纵向）相关推荐

最新文章

热门文章