当我们学习了媒体查询后 我们可以试试去写一下Bootstrap的导航栏 练练手
当屏幕尺寸小于767px的时候它的导航栏样式为下图所示
首先我们先来写个布局 写响应式网站的时候原则是从大到小 或从小到大 (屏幕) 我们写的是从小到大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
height: 50px;
background-color: black;
line-height: 50px;
}
h1 {
max-width: 300px;
color: #9d9d9d;
float: left;
font-size: 20px;
padding-left: 10px;
}
/* svg的样式 */
.icon {
fill: white;
}
.svgdiv {
height: 20px;
float: right;
border: 1px solid #333;
padding: 5px 10px;
line-height: 30px;
margin-top: 10px;
text-align: center;
}
/* 装下拉列表的盒子 默认隐藏 */
.ul_list {
border-top: 1px solid #333;
height: 280px;
background: black;
display: none;
clear: both;
}
.ul_list_ul {
list-style: none;
}
.ul_list_ul li {
height: 40px;
color: #9d9d9d;
padding-left: 10px;
line-height: 40px;
}
.ul_list_ul li:hover {
color: white;
}
.blockk {
display: block;
}
.noneee {
display: none;
}
</style>
</head>
<body>
<header>
<h1>Bootstrap中文网</h1>
<div class="svgdiv">
<svg t="1601970135882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="1179" width="20" height="20">
<path
d="M44.4 245.9h935.2c24.4 0 44.4-20 44.4-44.4s-19.8-44.4-44.4-44.4H44.4C20 157.1 0 177.1 0 201.5s20 44.4 44.4 44.4z m935.2 221.8H44.4C20 467.7 0 487.7 0 512.1s20 44.4 44.4 44.4h935.2c24.4 0 44.4-20 44.4-44.4s-20-44.4-44.4-44.4z m0 310.4H44.4C20 778.1 0 797.8 0 822.5s20 44.4 44.4 44.4h935.2c24.4 0 44.4-19.8 44.4-44.4s-20-44.4-44.4-44.4z"
p-id="1180"></path>
</svg>
</div>
<div class="ul_list">
<ul class="ul_list_ul">
<li>Bootstrap3中文文档</li>
<li>Bootstrap4中文文档</li>
<li>Sass 教程</li>
<li>Less 教程</li>
<li> jQuery API</li>
<li>网站实例</li>
<li>关于</li>
</ul>
</div>
</header>
</body>
</html>
写出来的效果是这样的
接下来我们写第二个查询 屏幕大于767px 小于 991px
需要隐藏 h1标签 和 下拉按钮
需要把ul给显示出
需要把最后一个li(关于)隐藏
/* 当屏幕大于767px的时候 */
@media all and (min-width: 767px) and (max-width: 991px) {
h1 {
display: none;
}
.svgdiv {
display: none;
}
.ul_list {
display: block;
height: 50px;
}
.ul_list li {
height: 50px;
line-height: 50px;
width: 15%;
float: left;
font-size: 14px;
text-align: center;
padding: 0;
}
/* .ul_list li:first-of-type {
width: 20%;
} */
.ul_list li:nth-of-type(-n+2) {
width: 20%;
}
.ul_list li:last-of-type {
display: none;
}
.noneee {
display: block !important;
}
}
第三个查询 屏幕大于991px
需要在原来的基础上把最后一个显示 然后调整一下布局就好
@media all and (min-width: 991px) {
h1 {
max-width: 20%;
display: block;
float: left;
}
.svgdiv {
display: none;
}
.ul_list {
width: 80%;
display: block;
height: 50px;
float: right;
border: none;
position: absolute;
right: 0;
top: 0px;
}
.ul_list li {
width: 12%;
height: 50px;
line-height: 50px;
float: left;
font-size: 14px;
text-align: center;
padding: 0;
}
.ul_list li:nth-of-type(-n+2) {
width: 20%;
}
.noneee {
display: block !important;
}
}
写出来就是这样 再加上 点击显示下拉的效果
var svgdiv = document.querySelector('.svgdiv')
var isok = true
svgdiv.addEventListener('click', function () {
if (isok) {
document.querySelector('.ul_list').className = 'ul_list blockk'
} else {
document.querySelector('.ul_list').className = 'ul_list noneee'
}
isok = !isok
})
基本实现了响应式导航栏
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
height: 50px;
background-color: black;
line-height: 50px;
/* z-index: 2; */
}
h1 {
max-width: 300px;
color: #9d9d9d;
float: left;
font-size: 20px;
padding-left: 10px;
}
/* svg的样式 */
.icon {
fill: white;
}
.svgdiv {
height: 20px;
float: right;
border: 1px solid #333;
padding: 5px 10px;
line-height: 30px;
margin-top: 10px;
text-align: center;
}
/* 装下拉列表的盒子 默认隐藏 */
.ul_list {
border-top: 1px solid #333;
height: 280px;
background: black;
display: none;
clear: both;
}
.ul_list_ul {
list-style: none;
}
.ul_list_ul li {
height: 40px;
color: #9d9d9d;
padding-left: 10px;
line-height: 40px;
}
.ul_list_ul li:hover {
color: white;
}
/* 当屏幕大于767px的时候 */
@media all and (min-width: 767px) and (max-width: 991px) {
h1 {
display: none;
}
.svgdiv {
display: none;
}
.ul_list {
display: block;
height: 50px;
}
.ul_list li {
height: 50px;
line-height: 50px;
width: 15%;
float: left;
font-size: 14px;
text-align: center;
padding: 0;
}
/* .ul_list li:first-of-type {
width: 20%;
} */
.ul_list li:nth-of-type(-n+2) {
width: 20%;
}
.ul_list li:last-of-type {
display: none;
}
.noneee {
display: block !important;
}
}
@media all and (min-width: 991px) {
h1 {
max-width: 20%;
display: block;
float: left;
}
.svgdiv {
display: none;
}
.ul_list {
width: 80%;
display: block;
height: 50px;
float: right;
border: none;
position: absolute;
right: 0;
top: 0px;
}
.ul_list li {
width: 12%;
height: 50px;
line-height: 50px;
float: left;
font-size: 14px;
text-align: center;
padding: 0;
}
.ul_list li:nth-of-type(-n+2) {
width: 20%;
}
.noneee {
display: block !important;
}
}
.blockk {
display: block;
}
.noneee {
display: none;
}
</style>
</head>
<body>
<header>
<h1>Bootstrap中文网</h1>
<div class="svgdiv">
<svg t="1601970135882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="1179" width="20" height="20">
<path
d="M44.4 245.9h935.2c24.4 0 44.4-20 44.4-44.4s-19.8-44.4-44.4-44.4H44.4C20 157.1 0 177.1 0 201.5s20 44.4 44.4 44.4z m935.2 221.8H44.4C20 467.7 0 487.7 0 512.1s20 44.4 44.4 44.4h935.2c24.4 0 44.4-20 44.4-44.4s-20-44.4-44.4-44.4z m0 310.4H44.4C20 778.1 0 797.8 0 822.5s20 44.4 44.4 44.4h935.2c24.4 0 44.4-19.8 44.4-44.4s-20-44.4-44.4-44.4z"
p-id="1180"></path>
</svg>
</div>
<div class="ul_list">
<ul class="ul_list_ul">
<li>Bootstrap3中文文档</li>
<li>Bootstrap4中文文档</li>
<li>Sass 教程</li>
<li>Less 教程</li>
<li> jQuery API</li>
<li>网站实例</li>
<li>关于</li>
</ul>
</div>
</header>
<script>
var svgdiv = document.querySelector('.svgdiv')
var isok = true
svgdiv.addEventListener('click', function () {
if (isok) {
document.querySelector('.ul_list').className = 'ul_list blockk'
} else {
document.querySelector('.ul_list').className = 'ul_list noneee'
}
isok = !isok
})
</script>
</body>
</html>
拜