【练习实例】HTML+CSS制作导航栏(横向与纵向)

纵向导航栏

  1. 建立一个列表
<ul>
			<li><a href="#home" class="active">主页</a></li>
			<li><a href="#news">新闻</a></li>
			<li><a href="#contact">联系</a></li>
			<li><a href="#about">关于</a></li>
		</ul>

在这里插入图片描述
2. 定义列表基本样式

ul{
				/*去掉列表的样式*/
				list-style-type: none; 
				width: 200px;
				background-color: #DDDDDD;
			}
li a{
				/*将<a>内联元素转换为块级元素,便于padding设定*/
				display: block;  
				/*去掉链接默认样式*/
				text-decoration: none;
				color: #000000;
				padding: 8px 16px;
			}

在这里插入图片描述

  1. 定义鼠标移动到导航栏上后的样式
li a:hover{
				background-color: #555;
				color: white;
			}

在这里插入图片描述

  1. 定义默认选中样式
li a.active {
			    background-color: #333333;
			    color: white;
			}

在这里插入图片描述

  1. 若想实现全左侧固定导航栏
ul{
				/*定位:使导航栏跟随滚动条滚动*/
				position: fixed;
				list-style-type: none;
				width: 15%;
				height: 100%;
				background-color: #DDDDDD;
			}

横向导航栏

  1. 同样建立列表
<ul>
			<li><a href="#home" class="active">主页</a></li>
			<li><a href="#news">新闻</a></li>
			<li><a href="#contact">联系</a></li>
			<li class="right"><a href="#about" >关于</a></li>
		</ul>

在这里插入图片描述

  1. 定义列表基本样式

				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;
			}

在这里插入图片描述

  1. 定义鼠标移动到导航栏上后的样式
li a:hover{
				background-color:#000000 ;
				color: #999999;
			}

在这里插入图片描述

  1. 定义默认选中样式
.active{
				background-color: #555;
			}

在这里插入图片描述

写在最后

还有一种响应式导航栏,可以根据窗口大小改变导航栏的样式。
想要实现响应式需要运用@media screen,有兴趣的可以继续拓展!

发布了8 篇原创文章 · 获赞 12 · 访问量 4705
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览