前端001 有彩色下划线的导航栏

最新推荐文章于 2024-07-01 21:38:06 发布

PeggyX_X

最新推荐文章于 2024-07-01 21:38:06 发布

阅读量889

点赞数

文章标签：前端

前端好多东西，没地方记，还是记到这里
想要两行导航栏，下面一行是彩色下划线条，下划线和上面块宽度相同

jQuery 和 js 文件的引入放在 html 的那里比较合适
【网上的答案】jQuery可以放在body中也可以放在head中，因为jQuery是等页面加载完成后才执行的，script标签放在body中，所有标签后。
因为js是单线程的遇到script标签会先解析标签里面的内容，放在后面是为了让html代码先执行出来，避免因为js过大导致页面加载慢显示空白的问题，所以放到后面可以提高用户体验
在css中，id坏人class 区别：
（1）ID的前缀用"#"，Class的前缀用"."
（2）同一个标签，只能有一个ID，但可以有多个Class，在同一个页面，ID只能出现一个，Class则可以出现多个
（3）优先级：ID所定义的css优先于Class
3.clear：both 有讲解+图

可以在w3school之类的地方尝试一下自己代码runoob.com

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: ;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a.pink1:hover{
background-color:pink;
}
a.red2:hover{
background-color:red;
}
a.blue3:hover{
background-color:blue;
}

.active {
    
	background-color: green;
}
.pink{
	
	height:5px;
	background-color: pink;
}
.red{
	
	height:5px;
	background-color: red;
}
.blue{
	
	height:5px;
	background-color: blue;
}

</style>
</head>
<body>

<ul>
  <li><a class = "pink1" href="#home">主页</a><div class= "pink"></div></li>
  <li><a class = "red2" href="#news">新闻</a><div class= "red"></div></li>
  <li><a class = "blue3" href="#contact">联系</a><div class= "blue"></div></li>
  <li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>

</body>
</html>

-------------------------------------分割线-----------------------------
这样写一大排css总是不好的，感觉像不枚举却写一大堆if else一样
经过了改进，最后把导航栏写到了js文件里
1.设置一个变量，把颜色都写进来：var color=[]
2.each循环每项，每一项依次设置click，mouseover，mouseout
改变css里的background 和color
3.注意，点击后不要执行mouseout，mouseover时候才mouseout

以后一定还可以再改进的，慢慢学习积累吧。