服务器之家
您的位置： 首页 编程语言 css

HTML+CSS制作导航条

100人浏览   2024-12-13 09:05:56

今天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用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


相关推荐