[深圳|结业弟子]JS-叶泽彪|2018年06月19日的日报-技能树.IT修真院

发表于： 2018-06-19 22:37:45

1 682

一、今天完成的事情：

1.完成任务10的顶部和底部模块

2.解决汉堡菜单下拉菜单重叠问题

3.学习流程条不使用切图写

二、明天计划的事情：

完成任务10

三、遇到的问题：

改变radio的默认样式

在网上找了几种方法，有些是使用图片替换按钮的，不符合任务的要求。有些需要用JS，有些代码有点复杂，看不太懂，不知道如何拿来使用，明天再继续寻找改变radio的默认样式的方法。

四、收获：

1.使用Bootstrap写汉堡菜单的时候，出现了个问题，就是弹出下拉菜单时，下面的页面会跟下拉菜单重叠在一起。一开始没有什么头绪，不知道问题是哪里，找了半天发现是给汉堡菜单父元素定了height高度，当弹出下拉菜单的时候，因为height高度被固定了，不会跟随子元素的下拉动作而扩展自己的高度，使得跟后面的页面重叠在一起。后面不给父元素定高度，让其自然跟随子元素扩充。需要注意的是未折叠成汉堡菜单的时候，其高度主要让子元素通过margin值来支撑就可以了。

2.流程条不使用切图写

一开始以为不使用切图的话会比较难写，但其实蛮简单的。思路时将建两个div，一个是圆的div，一个是长条的div，然后通过各自需要的样式写成圆和长条。再通过margin的负值来移动圆到长条上。然后要制作成响应式的页面，考虑流程条分段的话就不直观，所以父元素和子元素都不要定宽，而使用栅格布局来让长条随页面宽度的变化而变化。

.cont {
    padding: 0;
}
.cont .plan-box{
    margin: 40px 5%;
}
.cont .plan-box .plan {
    float: right;
    padding: 0;
    text-align: center;
}
.cont .plan-box .plan .text {
    display: inline-block;
    margin-top: 20px;
    font-size: 17px;
    color: #d0d0d0;
}
.cont .plan-box .plan .text-1 {
    color: #fc8002;
}
.cont .plan-box .plan .icon {
    padding-top: -10px;
}
.cont .plan-box .plan .icon .circle {
    margin: 0 auto;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #cccccc;
    color: #ffffff;
    text-align: center;
    line-height: 25px;
}
.cont .plan-box .plan .icon .circle-1 {
    background-color: #fc8002;
}
.cont .plan-box .plan .icon .bar {
    margin-top: -15px;
    height: 5px;
    border-radius: 5px;
    background-color: #cccccc;
}
.cont .plan-box .plan .icon .bar-1 {
    background-color: #fc8002;
}