[北京|结业弟子]JS-韩筠宜|2017年07月08日的日报-技能树.IT修真院

发表于： 2017-07-08 23:15:36

1 877

今天的工作主要是开始了任务8并且整理了小课堂所需的东西

1. 小课堂主要是整理了数组的几种重要方法，在这里不具体展开，等到小课堂结束再整理。

2. 接下来是关于任务7的部分，主要完成的工作是静态页面的制作，所以先从css和html的方向总结一下完成的部分

首先，根据http://dev.admin.carrots.ptteng.com/#/articleList/1/10中的页面样式，先写出自己需要加载的页面部分，这是一个两栏布局，思路是左边定宽，右边自适应，使用vh，vw作为单位。

做的是article列表页，调节了一下萝卜多的页面，发现要做响应式。不过先实现功能再说吧~~~

这部分的网站标题采用媒体查询进行布局，导航栏使用bootstrap。

首先，当导航栏在左侧排成竖列时，使用bootstrap默认的模板进行制作，在左侧的竖列中形成三个按钮式的下拉菜单框，但是实际点击按钮的时候，下拉菜单会直接浮在导航栏上方，不会出现点击==>展开，原本隐藏的列表部分出现，下方的隐藏按钮会下移的效果

所以更改bootstrap导航栏内容如下

<li class="dropdown">
   <div class="dropdown-toggle unit" data-toggle="dropdown">
       <i class="fa fa-pencil">信息管理</i>
       <i class="fa fa-caret-down" aria-hidden="true"></i>
   </div>
   <ul class="dropdown-menu">
       <li><a href="#">公司列表</a></li>
       <li><a href="#">职位列表</a></li>
   </ul>
</li>

点击元素换用过<a>和<button>，但是改css样式的时候麻烦很多，还涉及到了点击激活的样式，所以最终改用了div，使用bootstrap里面自带的样式和js文件就可以达到点击展开的效果。

接下来是点击展示的<ul>样式如何改写

元素审查找到了boostrap自带的下拉菜单样式，用自己的css样式表覆盖掉原有样式，去除position：absolute；和float：left；去除z轴值，最终的样式为

.dropdown-menu {
 float: none;
 border: none;
 box-shadow: none;
 position: static;
 background-color: $primaryColor1;
 min-width: 0;
 li {
   a {color: #fff;}
 }
}