CSS导航栏_web前端界面设计工具
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
CSS导航栏_web前端界面设计工具,希望能够帮助你!!!。
css导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS，可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏就相当于链接列表，因此使用<ul> 和 <li> 就会很有意义
垂直导航栏
如果想要实现如图所示的导航栏：
要求：当鼠标经过每个小li 的时候都要将其变为如图所示：
当鼠标经过时每个小li变化颜色，并且字体颜色发生改变，但是当经过第一个小li的时候背景颜色并不改变
代码如下
- 因为导航栏就相当于链接列表，所以首先要在body标签里面先来个列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px 100px;
}
li {
/* 将每个li前面的小点去掉 */
list-style: none;
background-color: #ccc;
width: 200px;
}
.active {
/* 将第一个小li的样式单独设置 */
background-color: #4CAF50;
color: #fff;
}
li a {
/* 将链接显示为块元素display: block;可以使整个链接区域都可以被单击(而不仅仅是文 本) */
display: block;
padding: 16px;
color: #000;
text-decoration: none;
}
/* 这是为了让每个li里面的类不为active的a标签设置样式 */
li a:hover:not(.active) {
color: #fff;
background-color: #555;
}
</style>
</head>
<body>
<ul>
<li><a href="###" class="active">HTML</a></li>
<li><a href="###">CSS</a></li>
<li><a href="###">Javascript</a></li>
</ul>
</body>
</html>水平导航栏
如果想要实现如图所示的导航栏：
要求：当鼠标经过每个小li的时候都要改变背景颜色，但是第一个不改变颜色
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
overflow: auto;
/* overflow: hidden; */
background-color: #333;
}
ul li {
float: left;
}
ul li a {
display: inline-block;
padding: 16px;
color: #fff;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="###" class="active">Home</a></li>
<li><a href="###">News</a></li>
<li><a href="###">Contact</a></li>
<li><a href="###">About</a></li>
</ul>
</body>
</html>这里有一个问题，当给ul加上overflow: hidden; (或者overlow: auto;)之后，ul的背景颜色才能显示出来
具体解释可以看这篇文章:CSS导航栏
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
