整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

原创自适应简单工具导航源码

原创自适应简单工具导航源码

己制作的，现在只弄了一个首页，后期可能添加详情页，没有css代码，js代码外链了，如不放心可以本地化。

诗梦自己制作

有点丑和有点乱不要在意，只是个人用来放自己喜欢的和用到的网站，源码你们创建个html文件放进去访问就可以了。

代码

  1. <html>

  2. <head>

  3. <meta charset="utf-8">

  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>诗梦-工具站</title>

  7. <meta name='keywords' content='诗梦,博客导航,工具导航,'>

  8. <meta name='description' content='诗梦导航站。'>

  9. <link rel="shortcut icon" href="//m.mom1.cn/favicon.ico" type="image/x-icon"/>

  10. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

  11. <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  12. <style>

  13. body{

  14. margin: 0 auto;

  15. text-align: center;

  16. }

  17. .container {

  18. max-width: 580px;

  19. padding: 12px;

  20. margin: 0 auto;

  21. }

  22. </style>

  23. <body>

  24. <body style="background-image: url(https://wx2.sinaimg.cn/mw690/8c534571ly1fdmdspgc5sj20sg0hs0wu.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;-moz-background-size: cover;">

  25. <div class="container">

  26. <div class="header">

  27. <ul class="nav nav-pills pull-right" role="tablist">

  28. <li role="presentation" class="active"><a href="/">首页</a></li>

  29. <li role="presentation" class="active"><a href="https://www.mom1.cn/qq.html">收录</a></li>

  30. </ul>

  31. <h3 class="text-muted" align="left">工具导航</h3>

  32. </div>

  33. <hr>

  34. <div type="button" class="btn btn-primary btn-block" id="start">公告</div><br>

  35. <div class="alert alert-danger" role="alert" style="text-align:left;">

  36. <span class="glyphicon glyphicon-info-sign"></span><strong>申请收录</strong><br>

  37. 有好玩的网站，请点击上面申请收录!

  38. </div>

  39. <a type="button" class="btn btn-primary btn-block">博客</a><br>

  40. <a href="http://z.mom1.cn/details/1.html" type="button" class="btn btn-info btn-info">诗 梦 博 客</a>

  41. <a href="http://www.hackv.cn" type="button" class="btn btn-info btn-info">古 韵 博 客</a>

  42. <a href="https://www.qcgzxw.cn/" type="button" class="btn btn-info btn-info">小 文 博 客</a>

  43. <a href="http://72wo.cn" type="button" class="btn btn-info btn-info">往 昔 执 念</a>

  44. <a href="http://z.mom1.cn/details/acgnw.html" type="button" class="btn btn-info">次 元 之 家</a>

  45. <a href="http://z.mom1.cn/details/aeink.html" type="button" class="btn btn-info">墨 渊 博 客</a>

  46. <a href="http://www.mosq.cn/" type="button" class="btn btn-info">森 七 博 客</a>

  47. <a href="http://www.binglinglin.cn/" type="button" class="btn btn-info">冰 凌 博 客</a>

  48. <a href="http://m.mom1.cn" type="button" class="btn btn-info">引 导 单 页</a>

  49. <a href="https://www.mom1.cn" type="button" class="btn btn-info">网 页 刷 新</a>

  50. <a href="https://www.mom1.cn" type="button" class="btn btn-info">诗 梦 音 乐</a>

  51. <hr>

  52. <a htef="https://www.mom1.cn" type="button" class="btn btn-primary btn-block">工具</a><br>

  53. <a href="http://m.mom1.cn" type="button" class="btn btn-info btn-info">等待添加</a>

  54. <a href="https://www.mom1.cn" type="button" class="btn btn-info btn-info"> 等待添加</a>

  55. <a href="https://www.mom1.cn" type="button" class="btn btn-info btn-info">等待添加</a>

  56. <a href="https://www.mom1.cn" type="button" class="btn btn-info btn-info">等待添加</a>

  57. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 等待添加</a>

  58. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 等待添加</a>

  59. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 等待添加</a>

  60. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 等待添加</a>

  61. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 等待添加</a>

  62. <hr>

  63. <a type="button" class="btn btn-primary btn-block">友链</a><br>

  64. <a href="https://www.mom1.cn" type="button" class="btn btn-info"> 诗梦博客</a>

  65. <a href="http://m.mom1.cn" type="button" class="btn btn-info"> 诗梦单页</a>

  66. <a href="http://zz.mom1.cn" type="button" class="btn btn-info"> 诗梦音乐</a>

  67. <hr>

  68. <a href="https://www.mom1.cn" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-credit-card"></span> 诗梦</a>

  69. <a href="https://www.mom1.cn" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-exclamation-sign"></span> 帮助</a>

  70. <a href="https://www.mom1.cn/qq.html" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> 收录</a>

  71. </div>

  72. <br>

  73. &copy; Powered by <a href="https://www.mom1.cn">诗梦博客</a>

  74. </p>

  75. </div>

  76. </body>

  77. </html>

本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作；菜单导航是网站建设中最常用的一块了，基本每个网站内都会有个导航菜单，用鼠标划过还可以有下拉子菜单。

由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。

1）制作页面所用知识点

我们这里主要用到的知识点就是列表标签（ul、dl）的使用、浮动（float）的使用、绝对定位（absolute）及鼠标经过（hover）的效果。

1、列表标签ul、dl（我们使用ul、dl来创建同类型的导航元素内容，通过设置css样式来达到图片所示效果）；

2、浮动元素float（每个导航元素我们需要使用float:left;让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响）；

3、绝对定位absolute（对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方，不占据元素空间）

4、鼠标经过hover（使用css的鼠标经过元素（hover）效果，配合display的none（隐藏）和block（显示）来实现子菜单的显示与隐藏）

具体的实现html代码以及css代码就如下图所示：

2）纵向菜单导航

还有一个纵向菜单导航原理跟横向的类似，只需简单调整一下css代码即可。

html代码跟横向一样，这里就不再贴图，具体的实现图片效果以及css代码就如下图所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信我即可。

每日金句：每天收获小进步，积累起来就是大进步；每天收获小幸福，积攒起来便成大幸福。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用HTML+CSS做了个一模一样的，下面就把导航条的制作方法及步骤分享给大家！


导航按钮效果图

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一级导航</title>
		<style>/*css样式可以在style里面写*/
			body {
				margin: 0;/*外边距:分别左,上,右,下都为0,这样就不会出现左右上下间距*/
				padding: 0;/*内边距:分别左,上,右,下都为0,这样就不会出现左右上下内间距*/
			}
			/*第一个div样式*/
			#menu {
				width: 100%;/*宽度:100%表示浏览器默认宽度*/
				height: 45px;/*高度*/
				background-color:#FF0033;/*背景颜色:红色*/
			}
			/*第二个div样式*/
			#menu-title {
				width: 1000px;
				height: 45px;
				margin-left: auto;/*margin-left: auto;margin-right: auto;可以把div自动居中*/
				margin-right: auto;
			}
			/*第二个div里面无需列表样式*/
			#menu-title ul {/*ul是无序列表*/
				margin: 0px;
				padding: 0px;
				list-style: none;/*列表样式:无*/
			}
			/*第二个div里面无需列表li样式*/
			#menu-title ul li {
				width: 142.8px;
				height: 45px;
				float: left; /*多个li往左浮动*/
				line-height: 45px;/*行高*/
				text-align: center;/*文本对齐:居中*/
			}
				/*第二个div里面无需列表li里的a：超链接样式*/
			#menu-title ul li a {
				color: white; /*颜色:白*/
				text-decoration: none;/*文本下划线:无*/
			}
			/*第二个div里面无需列表li里的a：超链接鼠标经过样式*/
			#menu-title ul li:hover {
				background-color: #333333;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="menu-title">
				<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>
					<li><a href="#">会员注册</a></li>
					<li><a href="#">会员登录</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

以上HTML+CSS代码复制可用。

好多小白不知道怎么搭配颜色，为你们搜集了一下网页颜色搭配工具：http://tool.c7sky.com/webcolor/#hue_0

下一个文章：HTML+CSS二级导航制作，敬请期待


在线咨询
上一篇：网页的类型
下一篇：什么是 HTML5-

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 都安瑶族自治县 勐腊县 文县 昭苏县 柳林县 新浦区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服