Hamburger_icon
PC端和手机移动端均适配，依据设备的宽度大小决定是否值下拉菜单样式
一、 head里添加meta移动端的样式
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里 设置屏幕宽度为设备宽度
☰ 这个汉堡包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时
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
