<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<div class="nav">
<!--汉堡logo menu--> <label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">Business</a>
<a href="#">Service</a>
<a href="#">Learn more</a>
<a href="#"><span>Free Trial</span></a>
</div></div>
这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小
二、css样式 -通用
body{
width: 100%
height: 100%
margin:0 //浏览器默认的body的margin是8px由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，
}
html{
font-family:'helvetica neue',sans-serif //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的
}.nav{
float: right
text-align: right
height: 70px
line-height: 70px
border-bottom: 1px solid #eaeaea
}
label{
display: none
}
#toggle{
display:none
}
.menu a{
margin: 0 10px
text-decoration: none
color: gray
}
.menu{
margin: 0 30px 0 0
}
.menu a span{
color:#54d17a
}
//添加@media样式：
@media only screen and (max-width: 500px) {
label{
display: block
cursor: pointer
width: 26px
float: right
}
.menu{
width: 100%
display: none
text-align: center
}
.menu a{
display: block
clear:right
}
#toggle:checked + .menu{ //这是个技术点
transition:all 0.4s ease-in
display: block
}
}
label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能
HTML《label》标签定义和用法
<label>标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同。
<form><label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
提示和注释：
注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
