发表于： 2018-11-21 22:05:32
1 768
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
做任务13的第一个页面，重新写，多了一个新的内容就是侧边栏，隐藏侧边栏和显示侧边栏。代码如下：
<input type="checkbox" id="sidemenu" />
<aside>
<ul id="sideul">
<a href="##">
<li>
<div class="circle">
<img src="../css13/img/sound .png" alt="" />
</div>
<span>公告</span>
<div class="back"></div>
</li>
</a>
<a href="##">
<li>
<div class="circle">
<img src="../css13/img/Shape 9.png" alt="" />
</div>
<span>设置</span>
<div class="back"></div>
</li>
</a>
<a href="##">
<li>
<div class="circle-1">
<img src="../css13/img/Shape 121.png" alt="" />
</div>
<span>帮助</span>
<div class="back"></div>
</li>
</a>
<a href="##">
<li>
<div class="circle-1">
<img src="../css13/img/Shape 120.png" alt="" />
</div>
<span>关于</span>
<div class="back"></div>
</li>
</a>
</ul>
</aside>
<div id="wrap">
<label id="sideMenuControl" for="sidemenu">≡</label>
<!--
for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定
-->
得到的效果如下：
这是写完之后得到的效果。
解决问题如何将页面平移向右获得到整体又推的效果。
aside {
/*侧边栏,初始位置为-200px，即隐藏效果*/
position: absolute;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
background: #29bde0;
transition: 0.2s ease-out;
/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
z-index: 1000;
}
之后就是写页面。
明天计划的事情：（一定要写非常细致的内容）
完成任务13
遇到的问题：（遇到什么困难，怎么解决的）
暂无
收获：（通过今天的学习，学到了什么知识）
侧边栏的写法
返回列表
评论