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

第一步：引入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. 打印man手册为pdf文件

    只需要一个命令就可以了! merlin@tfAnalysis:~/projects/tfadc$ man -t errno | ps2pdf - ~/errno.pdf 输出的文件很漂亮.

  2. SQL Server中生成测试数据

    原文:SQL Server中生成测试数据 简介      在实际的开发过程中.很多情况下我们都需要在数据库中插入大量测试数据来对程序的功能进行测试.而生成的测试数据往往需要符合特定规则.虽然可以自己写 ...

  3. &lt;图形图像,动画,多媒体&gt; 读书笔记 --- 力学行为特性

    UIKit力学行为包括了:重力(UIGravityBehavior),碰撞(UICollisionBehavior),吸附(UIAttachmentBehavior),推(UIPushBehavior ...

  4. jQuery小例

    jQuery小例子 使用前,请先引用jquery 1,map遍历数组   2,jQuery对象与DOM对象才做元素和互转 3,prevall与nextall 4,jquery版的星星评分控件 5,jq ...

  5. 实例学习SSIS（二）--使用迭代

    原文:实例学习SSIS(二)--使用迭代 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SSIS(四)-- ...

  6. [代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）

    其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已. 加入收藏: /* * author : 2010-12-27 11 ...

  7. sql内置函数pivot强大的行转列功能

    原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...

  8. shell删除指定时间之前的文件

    cat delbak.sh 1 #!/bin/sh 2 location="/root/sqlbak/" 3 find $location -mtime +30 -type f | ...

  9. windows下搭建Cygwin环境

    windows下搭建Cygwin环境 在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配 ...

  10. 线程：Semaphore实现信号灯

    Semaphore是一个计数的信号量,可以维护当前访问自身的线程个数,并提供了同步机制.使用Semaphore可以控制同时访问资源的线程个数,例如实现一个文件允许的线程访问数.打个通俗的比喻,Sema ...