html里制作简单导航栏

来源：互联网发布：新东方托福知乎编辑：程序博客网时间：2024/06/07 14:30

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

效果如下：

代码：

<!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>

阅读全文

1 0