任务十

今天完成的事情

1. 1. 完成表单页面的布局以及头部尾部样式的编写。
2. 2.用css加伪元素after实现流程图。
3. 3.使用纯css更改input的内置样式。

明天计划的事情

1. 1.完成任务10。
   
2. 2.开始任务11。

遇到的问题

1. 1.对与流程图如何实现，如果直接div+span总感觉比较粗暴，并且流程图的线条颜色应该会随着状态的变化而变化，查找资料后，发现了一个用伪元素的写法。代码简介，在html结构上只需要在对应的步骤上调用active类就可以实现变色的效果。下面附上html代码

2. <div class="flow-chart center">
      <ul class="steps ">
         <li class="active">1.定制纸箱</li>
         <li >2.选择数量</li>
         <li>3.上传附件</li>
         <li>4.确认下单</li>
      </ul>
   </div>

3. css部分代码

4. .steps li {
    position: relative;
    float: left;
    width: 25%;
    list-style-type: none;
    font-size: 0.18rem;
    text-align: center;
    color: #ff7f02;
    /*background-color: rgba(0,0,0,0.4);*/
   }
   /*步骤数字*/
   .steps li:before {
    display: block;
    content: counter(step); /*设定计数器内容*/
    counter-increment: step;  /*计数器值递增*/
    width: 24px;
    height: 24px;
    background-color: #ff7f02;
    line-height: 24px;
    border-radius: 24px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    /*font-weight: 700;*/
    margin: 0 auto 24px auto;
   }
   
   /*连接线*/
   .steps li:after {
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #ff7f02;
   }
   /*将当前/完成步骤之后的数字及连接线变灰*/
   .steps li.active ~ li:before,
   .steps li.active ~ li:after {
    background-color: #ccc;
   }
   .steps li.active ~ li{
    color: #ccc;
   }

5. 最后两个通配符的运用，相当的巧妙。

2.radio内置样式的修改。看了网上的一个css的写法，很不错。大概做法是将radio隐藏，然后后面用一个自定义样式的span代替，再结合check伪类确实可以实现单选按钮的效果，但是我比较在意的是radio设置为display：none后，我们还能不能获取的到被选中的radio的值。

收获

1. 1.小课堂上师兄讲解了icon-font，网站使用iconfont图标代替图片图标，可以大大增加前端开发效率。举个例子，假如需要做一个图标，鼠标经过时会变色，如采用iconfont来实现，则2行CSS代码搞定，而且可以自定义图标的任意颜色，如需用到其他项目中去，只需改动代码即可；而采用图片图标来实现，则需要做两张图片，且后期如页面上需要调整颜色，则需重新在绘图软件里修改，较为麻烦。其二是，使用iconfont图标代替图片图标，能减少文件体积、降低服务器请求数，节约宽带资源。
2. 2.加深了对after伪类的用法，after的默认位置其父级的左上角。
3. 3.关于radio，如果radio后面的文本被点击了，则radio也会变为check状态。