0. 导航栏
导航栏实际上包括了列表,超链接,定位,下拉菜单,等内容,统一以导航栏为主体学习他们的样式。
1. 垂直导航栏
- 垂直导航栏使用到的是垂直列表
- 设置导航栏的背景色为gray灰色
- 设置正常字体为黑色,悬停字体为白色
- 设置导航栏悬停时更改背景色为green绿色
- 将列表项中的超链接设置为有合适长度和宽度的元素
- 添加激活列表项始终是背景色为green绿色,字体白色
- 将超链接中的的文本内容居中
- 添加超链接的边框
在原来导航栏的基础上可以将导航栏设置为高度百分之百,宽度固定
创建具有灰色背景色的基本垂直导航栏,并在用户将鼠标移到链接上方时更改链接的背景色:
2. 水平深色导航栏
创建水平导航栏,可以使用inline和float两种方式
将列表项设置为内联元素
默认情况下,<li>
元素是块元素。 在这里,我们删除每个列表项之前和之后的换行符,以将其显示在一行上
创建水平导航栏的另一种方法是浮动<li>
元素,并为导航链接<a>
指定布局:
创建具有深色背景色的基本水平导航栏,并在用户将鼠标移到链接上方时更改链接的背景色:
Add an “active” class to the current link to let the user know which page he/she is on:
通过将列表项向右浮动来右对齐链接(float:right;)
:解决
将border-right属性添加到<li>
以创建链接分隔符:
最终的深色水平导航栏效果图:
html.code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
background-color: #333;
/*border: 1px solid black;*/
overflow: hidden;
}
li {
float: left;
/*border: 1px solid black;*/
}
a {
color: white;
display: block;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
</style>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系方式</a></li>
<li style="float:right"><a href="#" class="active">关于</a></li>
</ul>
</body>
</html>
3. 固定导航栏
使导航栏保持在页面顶部或底部,即使用户滚动页面也是如此:
注意:固定位置(fixed position)在移动设备上可能无法正常工作。
/*浏览器顶部固定导航栏*/
/*position: fixed;*/
/*top: 0px;*/
/*width: 100%;*/
/* 浏览器的底部定位导航栏*/
position: fixed;
bottom: 0px;
width: 100%;
4. 水平灰色导航栏
5. 粘性导航栏
Add position: sticky; to <ul>
to create a sticky navbar.创建粘性导航栏
粘性元素根据滚动位置在相对和固定之间切换。 它将相对定位,直到在视口中遇到给定的偏移位置为止-然后将其“粘贴”在适当的位置(例如position:fixed)。
position:sticky;
top:0px;
效果图:
注意:Internet Explorer不支持粘性定位。 Safari需要-webkit-前缀。 您还必须指定顶部,右侧,底部或左侧中的至少一个属性,以使粘性定位起作用。
6. 响应式顶部导航栏
在前面水平导航栏的基础上,导航栏是使用浮动设计的,那么响应式的时候添加如下代码(响应的时候清除浮动)实现响应式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media screen and (max-width: 600px) {
li {
float: none;
}
响应前
当屏幕小于600的响应后:
7. 响应式侧边导航栏
正常效果:
当屏幕小于900时响应:
当屏幕小于600时响应:
html.code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 响应式网页的头信息-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
/*解决父级元素塌陷问题*/
overflow: hidden;
/*顶部粘性定位导航栏*/
position: sticky;
top: 0px;
}
li {
float: left;
/*border: 1px solid black;*/
}
a {
color: #666;
display: block;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
a:hover:not(.active) {
/*background-color: #111;*/
background-color: #ddd;
}
.active {
background-color: #4CAF50;
}
li {
/*border-right: 1px solid #bbb;*/
}
li:last-child {
/*border-right: none;*/
}
@media screen and (max-width: 600px) {
li {
float: none;
}
}
</style>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a href="#" class="active">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
</body>
</html>
8. 下拉菜单导航栏
效果:
9. 下拉悬停菜单
使用CSS创建一个可悬停的下拉列表。
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.dropDown {
position: relative;
display: inline-block;
}
.dropDown-content {
min-width: 160px;
background-color: #f9f9f9;
display: none;
position: absolute;
}
.dropDown-content a {
color: black;
display: block;
/*border: 1px solid black;*/
padding: 12px 16px;
text-decoration: none;
}
.dropbtn {
padding: 14px 16px;
font-size: 16px;
background-color: #4CAF50;
border: none;
color: white;
}
.dropDown:hover .dropDown-content {
display: block;
}
.dropDown-content a:hover {
background-color: #f1f1f1
}
</style>
<body>
<div class="dropDown">
<button class="dropbtn">Dropdown</button>
<div class="dropDown-content">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
</div>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
</body>
</html>