WEB前端(7)—— 简单的 HTML+CSS 导航栏案例

article/2025/11/10 15:33:19

适合每个新手的导航栏：

代码与运行效果如图：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>导航栏</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: #aaa;margin: 0px 0px;/*块里的高宽通过margin设置*/color: #fff;text-align: center;/*字体居中*/text-decoration: none;/*去掉下划线*/font-size: 15px;}a:hover{background-color: pink;/*鼠标点击后显示的颜色*/}</style>
</head>
<body><div ><!-- ul标签定义的是表格当中无序列表，表格当中的无序列表都是在<ul>标签之中，无序列表都是和<li>标签在一起使用的。 a是连接标签。--><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><!-- 下面是添加一张图片，style是样式要图片能够完全的显示在设置的框中 --><div><img src="./image/1074148.jpg" alt="" style="width: 600px;height: 301px;"></div></ul></div>
</body>
</html>