前端学习知识点博客学习路线一
1.导航栏
实现效果如下：
1.1 垂直导航栏：
1. 要一个链接，所以首先用<ul>、<li>和<a>标签，有：
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
效果如下：
2. 删除边距和和填充，同时每一行前面的标识也要删除：
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
说明：
list-style-type: none;-移除列表前小标志。一个导航栏并不需要列表标记。
效果如下：
3.然后对链接进行样式修改，使得链接以一个块出现
a{
display:block;
width:60px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
a:hover {
background-color: #555;
color: white;
}
说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。
text-decoration: none; - 让链接文字没有文本装饰(之前是下划线)
此时效果如下：
4.对ul的大小和颜色进行设计，综合前面可以得到以下代码：
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
效果如下：
5.进一步设计，使链接点了之后颜色变化，以及增加边框
ul {
border: 10px solid #555;
}
li {
text-align: center;
border-bottom: 5px solid #555;
}
/*最后一个就不需要边框了*/
li:last-child {
border-bottom: none;
}
/*点击之后的颜色*/
a.active {
background-color: #4CAF50;
color: white;
}
/*当鼠标放在除了active类上的时候改变颜色*/
a:hover:not(.active) {
background-color: #555;
color: white;
}
效果如下：
5.最后我们让导航栏不能动，其他内容可以动。
ul{
height:20%;
position: fixed;
overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
效果如下：
6.最后整合一下前面的，得到最开始效果图的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直导航栏</title>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 75%;
background-color: #f1f1f1;
position: fixed;
height: 30%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
1.2 水平导航栏：
1.水平导航栏同垂直导航栏，增加浮动即可
/*因为水平导航栏，关闭允许滑动*/
ul{
overflow:hidden;
}
/*每个li块都向左对齐*/
li{
float:left;
}
/*同时关于连接放在最右边*/
<li style="float:righr"><a href="#">关于</a></li>
效果如下：
2.增加分割线，并且固定
ul {
position: fixed;
top: 0;
width: 100%;
}
/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
效果如下：
3.最后增加颜色、修改鼠标放在上面颜色等等，综合上面代码有：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平导航栏</title>
<style>
body {
margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li style="float:right"><a href="#about">关于</a></li>
</ul>
</div>
</body>
</html>
效果如下：(个人觉得不加分割线更好看点)
2.下拉菜单
这部分比较简单，直接看代码，然后看效果图即可明白~
基本上看注释就明白啦~
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">下拉1</a>
<a href="#">下拉2</a>
<a href="#">下拉3</a>
</div>
</div>
效果图：
3.
转载：https://blog.csdn.net/weixin_43901733/article/details/107247955
查看评论