html里制作简单导航栏

今天简单的做了一下网页里的导航栏。效果如下：代码：实验3ul{/*设置导航栏的框框*/margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/width: 600px;/*框框的宽度*/height: 350px;/*框框的长度*/pad

纵马且长歌

140514人浏览 · 2017-05-28 17:55:27

纵马且长歌 · 2017-05-28 17:55:27 发布

今天简单的做了一下网页里的导航栏。

效果如下：

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实验3</title>
	<style type="text/css">
		 ul{/*设置导航栏的框框*/
		 	margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
			width: 600px;/*框框的宽度*/
			height: 350px;/*框框的长度*/
			padding: 0px;/*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/
			border:1px solid #000;/*添加边框*/
		}
		li{
			list-style-type: none;/* 去掉li前的点 */
			float: left;/*将li设置成做浮动，变为联动*/
		}
		a{
			display: block;/*将a变成块状*/
			width: 100px;/*设置块的宽度*/
			height: 50px;/*设置块的长度*/
			font-family: Microsoft Yahei;
			line-height: 50px;/*设置字体在块中的高度*/
			background-color: #2f4f4f;
			margin: 0px 0px;/*块里的高宽通过margin设置*/
			color: #fff;
			text-align: center;/*字体居中*/
			text-decoration: none;/*去掉下划线*/
			font-size: 15px;
		}
		a:hover{
			background-color: #2f6f4f;
		}
	</style>
</head>
<body>
 	<div >
		<ul class=daohang>
			<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>


	</table>
</body>
</html>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐