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

第一步：引入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. 【SSRS】入门篇(七) -- 报表发布

    原文:[SSRS]入门篇(七) -- 报表发布 完成[SSRS]入门篇(六) -- 分组和总计后,第一份简单的报表就已完成了,下面把报表发布到报表服务器上. (实际情况下,报表展示给用户未必是用报表服 ...

  2. web开发中的多线程死锁问题，避免死锁

    1.什么是死锁,产生死锁的原因,和产生死锁的必要条件 所谓死锁(DeadLock),是指多个进程或线程在运行过程中因争夺资源而造成的一种僵局,当进程或线程处于僵局时,若无外力作用,它们将无法再向前推进 ...

  3. IOC容器在框架中的应用

    IOC容器在框架中的应用 前言 在上一篇我大致的介绍了这个系列所涉及到的知识点,在本篇我打算把IOC这一块单独提取出来讲,因为IOC容器在解除框架层与层之间的耦合有着不可磨灭的作用.当然在本系列前面的 ...

  4. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  5. [翻译]HBase 中的 ACID

    同前面翻译的一篇关联的,同作者的另一篇:ACID in HBase 这一篇不是单纯地描述一个问题,而是以 ACID 为主题,介绍了其在 HBase 中各个部分的体现及实现. ACID,即:原子性(At ...

  6. C# STA和MTA线程设置

    参考资料: http://www.yesky.com/20010207/158097.shtml http://www.ftponline.com/china/XmlFile.aspx?ID=242 ...

  7. Python Learing（二）：Basic Image Processing 1

    <写在前面> Basic image processing 1: 0.(以简单的曲线图为例)对于生成的图自定义外观,使用子图,多个数据集,标题,标签,交互式标注,图例: 1.生成散点图,直 ...

  8. Lak3 Counting(POJ No.2386)

    问题描述: 有个大小为N*M的园子,雨后积起了水.八连通的积水被认为是连接在一起的.求出园子里总共有多少水洼. N, M <= 100 输入例: : 问题分析: 八连通即:上.左上.左,左下,下 ...

  9. xhEditor struts2实现图片上传

    xhEditor的环境搭建请参考http://blog.csdn.net/itmyhome1990/article/details/38422255,这时我们打开图片功能 是没有上传按钮的 如果想要出 ...

  10. fancybox关闭弹出窗口parent.$.fancybox.close();

    fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent. ...