今日完成：

     任务八网页修改完毕  任务九学习进度条（横向时间轴）及纵向时间轴css实现方法。

明日计划：

      1.任务九完成底部响应式设计 

      2.radio修改样式学会  明白原理

今日遇到的问题：

     1.任务九底部自适应布局实现时出现问题，无法达到最右边联系方式与二维码的美观对齐。明天再尝试新的做法试着去做到美观的响应式布局。

      2.导航栏 四个按钮自适应时不美观，明天继续修改。自适应还是用的不熟啊！！！！

     其他时间在写基本布局和修改任务八，基本没遇到问题。

今日收获：

    1.MDN中::before 和::after的解释和用法

     含义 ——  在CSS中，:: before会创建一个伪元素，它是所选元素的第一个子元素。它通常用于将装饰性内容添加到具有内容属性的元素。它默认是内联的。

      在CSS中，:: after会创建一个伪元素，它是所选元素的最后一个子元素。它通常用于将装饰性内容添加到具有内容属性的元素。它默认是内联的。

      注意：由:: before和:: after生成的伪元素由元素的格式框包含，因此不适用于替换的元素，例如<img>或<br>元素。

      CSS3引入了:: before符号和::after（带有两个冒号）来区分伪类和伪元素。浏览器也接受：before和:after，它们之前在CSS2中引入。

   示例 ——

   1.添加引号

    在伪元素之前使用::的一个简单例子是提供引号。这里使用:: before和:: after来插入引号字符。

   2.装饰性应用

    我们可以以任何我们想要的方式在内容属性中设置文本或图像的样式。

   3.待办事项列表

   我们将使用伪元素创建一个简单的待办事项列表。通常可以使用此方法向UI添加小型触摸并改善用户体验。

   4.简单的用法

    我们创建两个类：一个用于无聊段落，另一个用于令人兴奋的段落。我们可以使用这些类将伪元素添加到段落的开头或者末尾。

   5.提示

    使用:: after，与attr（）CSS表达式和data-descr自定义数据属性一起创建工具提示。

   根据CSS规范，“说明：之前和之后：伪元素元素与其他框交互作用......它们如同是真实元素。”

  2.：checked的用法

 含义 —— ：checked过的CSS伪类选择器表示任何单选框（<input type =“radio”>），复选框（<input type =“checkbox”>）或选项（<select>中的<option>）元素或切换到开启状态。

         用户可以通过检查/选择元素来进入该状态，或者通过取消选中/取消选择元素来使其脱离。

 用法 ——

   1.改变单选框，复选框，下拉框的样式

   2.使用隐藏复选框切换元素

    ：checked伪类来让用户根据复选框的状态切换内容，而不使用JavaScript。

   3.图片库

   可以使用：checked伪类来构建带有全尺寸图像的图库，仅当用户单击缩略图时才显示图像。

   注意：对于类似的效果，需要基于：hover伪类且没有隐藏的radiobox

   3.学习了进度条（横向和纵向的时间轴）css实现方法

   HTML结构如下

<ul class="time-vertical">
    <li><b></b><span>1</span>keso</li>
    <li><b></b><span>2</span>FlyElephant</li>
    <li><b></b><span>3</span>博客园</li>
    <li><b></b><span>4</span>创业</li>
</ul>

 css实现原理横轴纵轴相似，此处展示纵轴的。

  主轴线可以用ul 或者li的左边框实现，再通过位置调整，达到字与轴线上的圆对应的效果。 

 .time-vertical {

            list-style-type: none;

            border-left: 1px solid #707070;  //横轴的话用border-top和宽度

            padding: 0px;

            height: 400px;

        }

        .time-vertical li {

            height: 100px;

            position: relative;

        }

        .time-vertical li a {

            display: inline-block;

            margin-left: 20px;

            margin-top: 15px;

            text-decoration: none;

            color: #000;

        }

        .time-vertical li b:before {

            content: '';

            position: absolute;

            top: 15px;

            left: -12px;

            width: 18px;

            height: 18px;

            border: 2px solid #98FB98;

            border-radius: 10px;

            background: #98FB98;

        }

        .time-vertical li span {

            position: absolute;

            color: #fff;

            top: 18px;

            left: -6px;

        }

进度：CSS-任务10

开始时间：2018.06.09

结束时间：2018.06.11

有无延期风险： 无。

禅道：http://task.jnshu.com/zentao/my/