[外门弟子]JS-1892|2019年06月06日的日报-技能树.IT修真院

发表于： 2019-06-06 08:47:13

1 768

今天完成的事情：

为首页添加侧边栏。

<label id='sideMenuControl' for='sidemenu'><img src="img/1-header.png" height="20"/></label>
<!--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定-->


#sidemenu {
  display: none;
  //隐藏侧边栏
}
#sidemenu:checked + aside {
  left: 0;
  //点击后侧边栏从页面最左侧显示

}

#sidemenu:checked ~ article {
  padding-left: 50%;
  margin-right: -50%;
  //点击按钮主页内容右移
}

#sideul {
  padding: 0;
  //去除ul自带左内边距*不去除会使侧边栏内容溢出到主页面
}

  label {
    /*控制侧边栏进出的按钮*/
    cursor: pointer;
    display: block;
    color: white;
    padding: 1rem;
    transition: 0.2s ease-out;
    //控制侧边栏进出样式
  }
}