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二级导航制作，敬请期待

TML拖放接口为DragEvent, DataTransfer, DataTransferItem和DataTransferItemList（后两者浏览器支持很差）.说简单点就是关于拖拽的系列事件。其实除非是要用DataTransfer,更建议使用浏览器支持性更好的鼠标点击移动松开相关事件。

拖拽相关的系列事件

当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。

drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。这类连续触发的事件都涉及一个问题叫做防抖节流（敬请期待）。
dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

关于上述事件的注意点

一旦某个元素节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。
拖拉过程只触发以上这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。
将文件从操作系统拖拉进浏览器，不会触发dragstart和dragend事件。
dragenter和dragover事件的监听函数，用来取出拖拉的数据（即允许放下被拖拉的元素）。由于网页的大部分区域不适合作为放下拖拉元素的目标节点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素。如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。
上述一系列事件只需记住触发对象：被拖拽对象、当前对象（拖拽过程中经过的）、目标对象（最终释放区域）；时间（开始拖拽，结束。释放，进入，在上面，离开）。

dataTransfer

关于事件event参数很重要。区别于其他事件，拖拽系列事件有一点特殊就是dataTransfer。他用来读写拖拽需要携带的数据。往往是开始拖拽设置数据，结束时候读取数据。

dataTransfer的属性

DataTransfer.dropEffect属性用来设置放下（drop）被拖拉节点时的效果，会影响到拖拉经过相关区域时鼠标的形状。它可能取下面的值。
copy：复制被拖拉的节点
move：移动被拖拉的节点
link：创建指向被拖拉的节点的链接
none：无法放下被拖拉的节点
DataTransfer.effectAllowed属性设置本次拖拉中允许的效果。它可能取下面的值。
copy：复制被拖拉的节点
move：移动被拖拉的节点
link：创建指向被拖拉节点的链接
copyLink：允许copy或link
copyMove：允许copy或move
linkMove：允许link或move
all：允许所有效果
none：无法放下被拖拉的节点
uninitialized：默认值，等同于all
DataTransfer.files属性是一个 FileList 对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则该属性为空的 FileList 对象。
DataTransfer.types属性是一个只读的数组，每个成员是一个字符串，里面是拖拉的数据格式（通常是 MIME 值）。比如，如果拖拉的是文字，对应的成员就是text/plain。
DataTransfer.items（支持性不好）属性返回一个类似数组的只读对象（DataTransferItemList 实例），每个成员就是本次拖拉的一个对象（DataTransferItem 实例）。如果本次拖拉不包含对象，则返回一个空对象。
DataTransferItemList 实例具有以下的属性和方法。
length：返回成员的数量
add(data, type)：增加一个指定内容和类型（比如text/html和text/plain）的字符串作为成员
add(file)：add方法的另一种用法，增加一个文件作为成员
remove(index)：移除指定位置的成员
clear()：移除所有的成员
DataTransferItem 实例具有以下的属性和方法。
kind：返回成员的种类（string还是file）。
type：返回成员的类型（通常是 MIME 值）。
getAsFile()：如果被拖拉是文件，返回该文件，否则返回null。
getAsString(callback)：如果被拖拉的是字符串，将该字符传入指定的回调函数处理。该方法是异步的，所以需要传入回调函数。

dataTransfer的方法

DataTransfer.setData(format,data)方法用来设置拖拉事件所带有的数据。
DataTransfer.getData(format)方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据
DataTransfer.clearData()方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。
DataTransfer.setDragImage()：拖动过程中（dragstart事件触发后），浏览器会显示一张图片跟随鼠标一起移动，表示被拖动的节点。这张图片是自动创造的，通常显示为被拖动节点的外观，不需要自己动手设置。DataTransfer.setDragImage()方法可以自定义这张图片。

完小编前段时间发表的HTML学习之后，相信大家对网站建设与网页编写有了一定的初步了解，今天我们来开始介绍层叠样式表css，css是为HTML页面的排版美化而设计的，可以实现html无法设计的效果，一般是用来配合html来使用的，一般模式：选择器{属性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三种引入方式：行内样式、内部样式表、外部样式表。

css三种嵌入方式：

一、行内样式

使用style属性引入CSS样式。

示例：

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行内样式</title> </head> <body>  <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p标签</p> </body> </html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

<head>

h3{

color:red;

}

</style>

</head>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>内部样式表</title>  <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

2、导入式

@import url("css文件路径");

</style>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title>  <link rel="stylesheet" type="text/css" href="css/style.css" />  <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>

行内样式>内部样式>外部样式(后两者是就近原则)。

css注释格式如下：

/* 注释如下*/

css中的颜色值表示如下：

可以是直接写英文单词，例如蓝色尽可以写blue；还可以写为十六进制字符，例如#rrggbb\#ffcc00,#rgb如:#fc0十六进制的颜色可以在颜色表中查询，这里我给大家提供一个，当然网上也有很多，大家也可以自己百度一下：

还有一种颜色的表示方式就是rbg模式，例如：

rgb(x,x,x) 其中x是一个0-255的整数值如:rgb(255,204,0)

rgb(x%,x%,x%) 其中x是一个0-100的整数值如rgb(100%,80%,0%)

Css的长度单位：

相对长度单位：px 像素（Pixel） em 相对于当前文本字体尺寸的倍数 % 百分比

绝对长度单位：in英寸（Inch） pt 点（Point） cm 厘米（Centimeter）mm 毫米（Millimeter）。

换算比例：1in = 2.54cm = 25.4 mm = 72pt

Css的七大类选择器：

标签选择器例如：p{};

类选择器例如.div{};（一个点加命名的类名）

Id选择器例如 #div{};（斜体井号加ID名，ID是不可重复的，类可以相同）

通配符选择器：*{}；

伪类选择器：

a:link{}没有访问时的链接；

a:visited{}已经访问过时的链接；

a:hove{}鼠标滑过时的链接；

a:active{}已经选中的链接；

:first-child{}为第一个字符设置样式；

:last-child{}为最后一个字符设置样式；

：nth-child（）{}可以为指定字符设置样式

派生选择器（后代选择器、子元素选择器和相邻兄弟选择器）：

后代选择器: 以空格分隔

div ul li {color:#0099cc;}

子元素选择器: 以>分隔

div >ul li

相邻兄弟选择器: 以+分隔

div + div ul li

最后一个就是组合选择器，以逗号隔开

h1, h2, h3, h4, h5, h6 { color: green }

好了，css基础就给大家介绍到这里，有什么不懂得地方可以给小编留言，如果您有什么好的建议也可以关注小编，我们共同学习，共同讨论，共同进步，接下来我们会介绍下css的属性，敬请期待吧

在线咨询

上一篇：碎片时间学编程「112]：转义 HTML
下一篇：前端隐藏加载执行JavaScript

您的项目需求

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

整合营销服务商

HTML+CSS制作导航条

您的项目需求