发表于： 2020-06-17 22:20:48
1 1325
今天完成的事情：
完成了任务13的页面
关于隐藏侧边栏
html代码：
<div class="label">
<div class="label-1"></div>
<div class="label-1"></div>
<div class="label-1"></div>
<aside>
<ul>
<li>
<div class="head">
<img src="13w/小狗.png">
</div>
<span>我的</span>
</li>
<li>
<img src="13w/通知.png">
<span>公告</span>
<img class="img-right" src="13w/右箭头.png">
</li>
<li>
<img src="13w/设置.png">
<span>设置</span>
<img class="img-right" src="13w/右箭头.png">
</li>
<li>
<img src="13w/帮助.png">
<span>帮助</span>
<img class="img-right" src="13w/右箭头.png">
</li>
<li>
<img src="13w/关于.png">
<span>关于</span>
<img class="img-right" src="13w/右箭头.png">
</li>
</ul>
</aside>
</div>
css代码：
html{
overflow: hidden; //超出部分隐藏//
}
body{
margin: 0 auto;
padding: 0;
max-width: 480px;
min-width: 320px;
overflow: hidden; //超出部分隐藏 html和body都需要设置该属性//
position: relative; //父级相对定位//
}
header{
@include flex;
width: 100%;
height: 60px;
background: $header-background;
.label{
.label-1{
width: 22px;
height: 3px;
background: #fbfbfb;
margin: 5px 10px;
}
}
aside{
width: 250px;
position: absolute; //子级绝对定位//
top:0;
bottom: 0;
left: -250px; //将导航栏拖到页面左侧//
background: #fbfbfb;
transition: 0.2s ease-out; //添加过度动画//
font-size: 17px;
color:$header-background;
box-shadow: -1px 0 5px #d9d9d9 inset;
.head{
@include flex;
width: 40px;
height: 40px;
margin: 0 10px 0 20px;
background: $header-background;
border-radius: 50%;
img{
margin: 0 auto;
}
}
li{
@include flex;
height: 50px;
border-bottom: 2px solid #f0f0f0;
img{
height: 23px;
margin: 0 20px;
}
.img-right{
margin-left: auto;
}
&:hover{
background: #d8d8d8;
}
}
}
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
然后用input属性设置点击触发侧边栏
返回列表
评论