实现一个简单的导航栏。
使用HTML和CSS实现简单的导航栏效果,鼠标放上改变背景杨色。
效果演示
代码演示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>ul{width: 50%;height: 300px;padding: 0px;margin: 30px auto;border: 1px solid #000000;//去掉li前面的圆点list-style-type: none;}li{list-style-type: none;float: left;}a{display: block;width: 202px;height: 50px;font-family: "microsoft yahei";line-height: 50px;background-color: skyblue;margin: 0px 0px;color: #000000;text-align: center;text-decoration: none;font-size: 15px;}a:hover{background-color: greenyellow;}</style><body><div><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></ul></div></body>
</html>