HTML+CSS实现编写简单导航栏

一、前言

导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用。在各个网站的主页面我们基本都能看到导航栏的存在,它对于用户快速寻找到所需信息及内容提供了极大的便利。

二、导航栏

网络在我们的日常生活中占据了极其重要的位置,无论是在PC端还是移动端各式各样的导航栏更是随处可见。
在这里插入图片描述
百度导航栏
在这里插入图片描述
天猫商城导航栏
HTML+CSS实现编写简单导航栏_第1张图片
微信支付
导航栏类型多种多样,但基本原理大致相同,下面我将使用HTML和CSS来完成一个简单的导航栏

三、具体步骤

  1. 导航栏基本上是一个链接列表,所以我用
<body>
		<ul>
			<li><a href="">首页a>li>
			<li><a href="">新闻a>li>
			<li><a href="">分类a>li>
			<li><a href="">资讯a>li>
			<li><a href="">公告a>li>
			<li class="last"><a href="">专栏a>li>
		ul>
	body>

效果图:
在这里插入图片描述
2.导航栏多数呈横向分布且无列表符号,使用css设置列表样式以及超链接样式

<style type="text/css">
		*{margin: 0;padding: 0;}
			li{list-style: none; /*设置列表样式为无样式*/
			float: left;} /*列表向左浮动*/
			a{text-decoration: none;}/*取消超链接下划线*/	
		style>

效果图
在这里插入图片描述
3.设置

你可能感兴趣的:(HTML+CSS实现编写简单导航栏)