这里分享下侧边栏上移的方法。
设备：联想电脑
系统：win8
软件：PhpStorm 2019.3.1 x64
1、首先在电脑中打开编辑器，创建html，如下图所示。
2、接着输入设置侧边栏代码，如下图所示。
3、然后设置一下定位。
4、接着添加伪类。
5、这个时候点击就会有侧边栏效果了。
html调试的方法如下：1、在chrome中打开开发者工具，使用快捷键F12来打开。
2、找到一个叫做“Sources”并点击。
3、可以在左侧侧栏的序号那些位置点击一下就设置成断点，当要执行某个函数的时候浏览器就会自动进入调试模式了。
超文本标记语言（HyperTextMarkupLanguage），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言（markuplanguage），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言（或超文本标签语言）的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML5+CSS3做一个后台管理系统的侧边导航栏，点击三条杠，可以收起或展开侧边导航栏。收起时，图标变大，文本在图标下方，管理员头像右侧的欢迎语隐藏；展开时图标变小，文本在图标的右侧显示，管理员头像右侧的欢迎语显示。切换过程伴有过渡动画，右侧内容区可以放自己的内容。
效果：
源码：
