今天分享一下简单导航栏的制作方法：

第一步：引入css样式表，新建一个id为nav的层，使用<ul>、<li>、<a>标签来制作完成效果。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>

    </head>

    <body>

        <div id="nav">

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

            </ul>

        </div>

    </body>

</html>

第二步设置CSS样式：

1.设置nav的属性

#nav{

    width: 500px;

    height: 50px;

    border: 1px solid red;

}

展示效果如下所示：

　　

2.清除<ul>标签前面自带的点

#nav ul{

	list-style: none;

}

3.设置<ul>下包含的<a>标签的属性

#nav ul li a{

	width: 98px;

	height: 50px;

	float: left;

	border: 1px solid red;

	text-align: center;

	line-height: 50px;

	text-decoration: none;

}

　　4.设置鼠标滑过效果

#nav ul li a:hover{

	background-color: #ABCDEF;

}

　　最终效果：

完整HTML代码部分：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>

	</head>

	<body>

		<div id="nav">

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

			</ul>

		</div>

	</body>

</html>

　　完成CSS样式代码部分：

*{

	margin: 0;

	padding: 0;

}

#nav{

	width: 500px;

	height: 50px;

	border: 1px solid red;

	margin: 30px;

}

#nav ul{

	list-style: none;

}

#nav ul li a{

	width: 98px;

	height: 50px;

	float: left;

	border: 1px solid red;

	text-align: center;

	line-height: 50px;

	text-decoration: none;

}

#nav ul li a:hover{

	background-color: #ABCDEF;

}

　　大家觉得有用请打赏一下LZ。。ing

　　0.1也是您的帮助

HTML一级导航制作的更多相关文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（22）-权限管理系统-模块导航制作

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们 ...

  2. Flutter实战视频-移动电商-12.首页_GridView类别导航制作

    12.首页_GridView类别导航制作 首页导航区的制作 外面用一个gridview来写.里面单独提出来 新建导航组件 还是在home_page.dart里面写代码 新建一个静态的组件: 快捷键写组 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（22）-权限管理系统-模块导航制作

    系列目录 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们已经跑通了整个系统,所有东西都回到了简单,接下来我们做模块制作也就是操作SysModule表. 首先我们来回顾一下之前的 ...

  4. HTML静态网页导航制作

    普通导航栏制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. CSS一级导航-天蓝色（带阴影）

    一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...

  6. Flutter移动电商实战 --（23）分类页_左侧类别导航制作

    自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...

  7. 微信小程序框架分析小练手（一）——猫眼电影底部标签导航制作

    旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...

  8. thinkcmf导航制作

    <?php $tree = sp_get_menu_tree('main'); ?> <foreach name="tree" item="vo&quo ...

  9. 网页a标签：导航制作 怎么让鼠标经过A标签的时候显示块状背景?

    文章出处:http://dongguan.seosrx.net/website/6.html

随机推荐

  1. 【DateTime格式大全 】

    DateTime dt = DateTime.Now;//    Label1.Text = dt.ToString();//2005-11-5 13:21:25//    Label2.Text = ...

  2. springmvc和servlet在上传和下载文件（保持文件夹和存储数据库Blob两种方式）

    参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...

  3. Mike and Feet（CF 547B）

    Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  4. 用mysql dump 导入与导出的方法

    用mysql dump 导入与导出的方法 分类: 数据库2009-12-08 00:04 6825人阅读 评论(0) 收藏 举报 mysql数据库deleteinsertinternetdatabas ...

  5. 百度地图SDK for Android v2.1.3全新发布

    2013年8月1日 Android SDK:V2.1.3产品上线 新增: 增加短串分享接口(poiDetailShareURLSearch.poiRGCShareURLSearch) 驾车路线检索增加 ...

  6. Oracle索引——位图索引

    1.语法create bitmap index index_name on 表名(字段);2.举个例子你就能明白了:如有表 test(id,name,address)数据(1,张三,大连)(2,李四, ...

  7. Introducing ASP.NET vNext and MVC 6

    [译]Introducing ASP.NET vNext and MVC 6 原文:http://www.infoq.com/news/2014/05/ASP.NET-vNext?utm_source ...

  8. Hashtable Dictionary List

    Hashtable Dictionary List 谁效率更高   一 前言 很少接触HashTable晚上回来简单看了看,然后做一些增加和移除的操作,就想和List 与 Dictionary比较下存 ...

  9. 安装升级System.Web.Optimization.dll

    今天在使用backload时,VS提示solution所引用的System.Web.Optimization.dll 版本低,编译不过,于是便删掉,从新添加引用,悲剧的是在添加引用窗口中没找到,在Nu ...

  10. Build FFmpeg for iOS

    FFmpeg Build Instructions MAC 10.8 or better Copy ffmpeg-2.0.tar.bz2 (https://ffmpeg.org/releases/ff ...