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

第一步：引入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. 算法课上机实验(一个简单的GUI排序算法比较程序)

    (在家里的电脑上Linux Deepin截的图,屏幕大一点的话,deepin用着还挺不错的说) 这个应该是大二的算法课程上机实验时做的一个小程序,也是我的第一个GUI小程序,实现什么的都记不清了,只记 ...

  2. Shell的学习就从重装系统开始吧

    小标题:与Fedora的爱恨情仇 干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手 起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...

  3. wsgi-restful-routes具体解释：

    感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Better Me的博客:blog.csdn.net/tantexian 如需 ...

  4. 功能和形式的反思sql声明 一个

    日前必须使用sql语句来查询数据库 但每次你不想写一个数据库中读取所以查了下反射 我想用反映一个实体的所有属性,然后,基于属性的查询和分配值 首先,须要一个实体类才干反射出数据库相应的字段, 可是開始 ...

  5. SVN服务器搭建（3）

    转自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html vs 2013 svn插件:http://www.visua ...

  6. HDU 4945 2048(DP)

    HDU 4945 2048 题目链接 题意:给定一个序列,求有多少个子序列能合成2048 思路:把2,4,8..2048这些数字拿出来考虑就能够了,其它数字不管怎样都不能參与组成.那么在这些数字基础上 ...

  7. SQL Server 2008 允许远程链接,适用于广域网和局域网

    用户在使用SQL Server 2008远程链接时,可能会弹出如下对话框: 在链接SQL服务器时发生网络链接错误或特定实例错误.SQL服务器不存在或者链接不成功.请验证用户名是否正确或SQL服务器是否 ...

  8. parent和top

    function show(){ //parent是获取本窗口的父窗口   //window.parent.location.href="http://www.baidu.com" ...

  9. switch与java,c#的异同

    <script type="text/javascript" language="javascript"> //JavaScript控制语句基本和以 ...

  10. NET实现仓库看板的一些感想

    NET实现仓库看板的一些感想 从一名技术开发人员到实施人员的蜕变,从不同的角度看待同一个问题,或许会有不一样的结果.这里记录一下最近一个项目实施的案例,非常有感触! 一. 项目情况简介 本次项目是给一 ...