Hamburger_icon
PC端和手机移动端均适配，依据设备的宽度大小决定是否值下拉菜单样式
一、 head里添加meta移动端的样式
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
| width | viewport的宽度 |
|---|---|
| height | viewport的高度 |
| initial-scale | 初始的缩放比例 eg:设置成2.0 那么最初加载的页面就会放大2倍 |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 eg:设置成2.0 那么页面用户最多可以放大2倍 |
| user-scalable | 用户是否可以手动缩放 默认值是yes，如果我们设置成no，那么上面的两个sacle就失效，因为已经禁止用户手动调整缩放 |
| width=device-width | 在content里 设置屏幕宽度为设备宽度 |
<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
- 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实现了点击按钮下拉菜单出现的功能
↑(●'◡'●)设备宽度大于500px时
↑(●'◡'●) 设备宽度小于500px时
