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

第一步：引入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. POI操作Excel详细解释，HSSF和XSSF两种方式

    HSSF道路: package com.tools.poi.lesson1; import java.io.FileInputStream; import java.io.FileNotFoundEx ...

  2. rpt水晶报表制作过程

    原文:rpt水晶报表制作过程 最近公司安排一个以前的项目,里面需要用到水晶报表,由于原来做这个项目的同事离职,所在公司的同事报表做成了rdlc类型的,而这类报表在加载的时候很难动态的从数据库加载数据, ...

  3. SaaS模式和实现思路

    EFW框架开发的系统支持SaaS模式和实现思路 回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dAD ...

  4. spring bean范围

    总结: 实例代码具体解释: 文件夹结构 Car.java package com.coslay.beans.autowire; public class Car { private String br ...

  5. c#下载文件案例

    public static void HttpDown(string fileName, System.Web.UI.Page p_Page,string floder) { string path ...

  6. {{angular.js 使用技巧}} - 实现计算列属性

    前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...

  7. Html 导航

    首页,来一个比较简单的例子热热身,相信有点css基础的人都可以看懂的.自所以,写一些教程,或许这样的教程已经泛滥啦,但是,还是想理理自己的思想来帮助自己及引导初学者更好的理解css. 1.竖直排列导航 ...

  8. Asp.net MVC集成Google Calendar API(附Demo源码)

    Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...

  9. [转]JavaScriptCore and iOS 7

    原文:http://www.bignerdranch.com/blog/javascriptcore-and-ios-7/ As a rule, iOS programmers don't think ...

  10. 马丁·福勒-page对象

    马丁·福勒-page对象 译者注:这篇文章翻译自马丁·福勒(Martin Flower,对,没错,就是软件教父)官网的一篇文章,原文出处在文底.如果你正在做WEB自动化测试,那么我强烈推荐你看这篇文章 ...