原創(chuàng)自適應(yīng)簡單工具導(dǎo)航源碼

己制作的，現(xiàn)在只弄了一個首頁，后期可能添加詳情頁，沒有css代碼，js代碼外鏈了，如不放心可以本地化。

詩夢自己制作

有點丑和有點亂不要在意，只是個人用來放自己喜歡的和用到的網(wǎng)站，源碼你們創(chuàng)建個html文件放進去訪問就可以了。

代碼

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>詩夢-工具站</title>
<meta name='keywords' content='詩夢,博客導(dǎo)航,工具導(dǎo)航,'>
<meta name='description' content='詩夢導(dǎo)航站。'>
<link rel="shortcut icon" type="image/x-icon"/>
<link rel="stylesheet" >
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body{
margin: 0 auto;
text-align: center;
}
.container {
max-width: 580px;
padding: 12px;
margin: 0 auto;
}
</style>
<body>
<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;">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right" role="tablist">
<li role="presentation" class="active"><a href="/">首頁</a></li>
<li role="presentation" class="active"><a >收錄</a></li>
</ul>
<h3 class="text-muted" align="left">工具導(dǎo)航</h3>
</div>
<hr>
<div type="button" class="btn btn-primary btn-block" id="start">公告</div><br>
<div class="alert alert-danger" role="alert" style="text-align:left;">
<span class="glyphicon glyphicon-info-sign"></span><strong>申請收錄</strong><br>
有好玩的網(wǎng)站，請點擊上面申請收錄!
</div>
<a type="button" class="btn btn-primary btn-block">博客</a><br>
<a type="button" class="btn btn-info btn-info">詩夢博客</a>
<a type="button" class="btn btn-info btn-info">古韻博客</a>
<a type="button" class="btn btn-info btn-info">小文博客</a>
<a type="button" class="btn btn-info btn-info">往昔執(zhí) 念</a>
<a type="button" class="btn btn-info">次元之家</a>
<a type="button" class="btn btn-info">墨淵博客</a>
<a type="button" class="btn btn-info">森七博客</a>
<a type="button" class="btn btn-info">冰凌博客</a>
<a type="button" class="btn btn-info">引導(dǎo) 單頁</a>
<a type="button" class="btn btn-info">網(wǎng) 頁刷新</a>
<a type="button" class="btn btn-info">詩夢音樂</a>
<hr>
<a htef="https://www.mom1.cn" type="button" class="btn btn-primary btn-block">工具</a><br>
<a type="button" class="btn btn-info btn-info">等待添加</a>
<a type="button" class="btn btn-info btn-info"> 等待添加</a>
<a type="button" class="btn btn-info btn-info">等待添加</a>
<a type="button" class="btn btn-info btn-info">等待添加</a>
<a type="button" class="btn btn-info"> 等待添加</a>
<a type="button" class="btn btn-info"> 等待添加</a>
<a type="button" class="btn btn-info"> 等待添加</a>
<a type="button" class="btn btn-info"> 等待添加</a>
<a type="button" class="btn btn-info"> 等待添加</a>
<hr>
<a type="button" class="btn btn-primary btn-block">友鏈</a><br>
<a type="button" class="btn btn-info"> 詩夢博客</a>
<a type="button" class="btn btn-info"> 詩夢單頁</a>
<a type="button" class="btn btn-info"> 詩夢音樂</a>
<hr>
<a class="btn btn-default btn-sm"><span class="glyphicon glyphicon-credit-card"></span> 詩夢</a>
<a class="btn btn-default btn-sm"><span class="glyphicon glyphicon-exclamation-sign"></span> 幫助</a>
<a class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> 收錄</a>
</div>
<br>
© Powered by <a >詩夢博客</a>
</p>
</div>
</body>
</html>

本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個網(wǎng)站內(nèi)都會有個導(dǎo)航菜單，用鼠標劃過還可以有下拉子菜單。

由上圖我們可以看出，該圖包含一個橫向?qū)Ш綏l，然后鼠標經(jīng)過橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來。

1）制作頁面所用知識點

我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經(jīng)過（hover）的效果。

1、列表標簽ul、dl（我們使用ul、dl來創(chuàng)建同類型的導(dǎo)航元素內(nèi)容，通過設(shè)置css樣式來達到圖片所示效果）；

2、浮動元素float（每個導(dǎo)航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；

3、絕對定位absolute（對于子導(dǎo)航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據(jù)元素空間）

4、鼠標經(jīng)過hover（使用css的鼠標經(jīng)過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現(xiàn)子菜單的顯示與隱藏）

具體的實現(xiàn)html代碼以及css代碼就如下圖所示：

2）縱向菜單導(dǎo)航

還有一個縱向菜單導(dǎo)航原理跟橫向的類似，只需簡單調(diào)整一下css代碼即可。

html代碼跟橫向一樣，這里就不再貼圖，具體的實現(xiàn)圖片效果以及css代碼就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。

每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。

天無意中看到一個網(wǎng)站的導(dǎo)航條，覺得效果還不錯，而且制作也很簡單，就自己試著用HTML+CSS做了個一模一樣的，下面就把導(dǎo)航條的制作方法及步驟分享給大家！

導(dǎo)航按鈕效果圖

代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一級導(dǎo)航</title>
		<style>/*css樣式可以在style里面寫*/
			body {
				margin: 0;/*外邊距:分別左,上,右,下都為0,這樣就不會出現(xiàn)左右上下間距*/
				padding: 0;/*內(nèi)邊距:分別左,上,右,下都為0,這樣就不會出現(xiàn)左右上下內(nèi)間距*/
			}
			/*第一個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：超鏈接鼠標經(jīng)過樣式*/
			#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="#">產(chǎn)品案例</a></li>
					<li><a href="#">免費素材</a></li>
					<li><a href="#">聯(lián)系我們</a></li>
					<li><a href="#">會員注冊</a></li>
					<li><a href="#">會員登錄</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

以上HTML+CSS代碼復(fù)制可用。

好多小白不知道怎么搭配顏色，為你們搜集了一下網(wǎng)頁顏色搭配工具：http://tool.c7sky.com/webcolor/#hue_0

下一個文章：HTML+CSS二級導(dǎo)航制作，敬請期待

在線咨詢

上一篇：網(wǎng)頁的類型
下一篇：什么是 HTML5-

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

原創(chuàng)自適應(yīng)簡單工具導(dǎo)航源碼

1）制作頁面所用知識點

2）縱向菜單導(dǎo)航

您的項目需求