今天完成的事情：

写了一个侧边栏，网上的方法有很多，我找到了一个最合适的。

明天计划的事情：

任务13俩个页面

遇到的问题：

侧边栏的问题，网上很多教程，

实现原理利用:target，把a标签自身的href以及id设置成一样的。

案例1：实现元素的切换

HTML：

<div id="box">
　　<a href="#a" id="a">
　　　　<p>我是P1的内容</p>
　　</a>
　　<a href="#b" id="b">
　　　　<p>我是P2的内容</p>
　　</a>
</div>

CSS：

body,div{
　　margin:0;
　　padding:0;
}
#box>a{
　　display:none;
}
#box>a:first-of-type{
　　display:block;
}
#box>a:target{
　　display:none;
}
#box>a:target + a{
　　display:block;
}

有用a标签加上点击做的，但是这种并不是很好，

元素基本的css

 body{overflow:hidden;}
           dl,dt,dd{margin:0px;padding:0px;font-size:12px;}
           dl{width:175px;background-color:#ddd;position:absolute; right:-157px;cursor: pointer;}
           dt{width:10%;background:orange;float:left;text-align:center;color:#fff;padding:5px 0px;font-weight:bold;}
           dd{width:90%;}
           dd a{margin:5px; color:red;}

这些是我们基本的页面元素

第二步 我们来分析一下侧边栏的运行原理

其实也没什么可分析的，它主要实现的也就是一个显示隐藏效果。用到的事件分别是当鼠标划上显示，鼠标划出隐藏。

谈到鼠标时间css能控制的鼠标事件大家应该能想到就是：hover伪类。

ok。我们下面的3种实现方式都是通过：hover这个伪类来实现的。

第三步  切入正题

方法一：通过css2基本的伪类方式来实现

我们所要控制运动的选择器为dl；当鼠标划上的时候修改dl的right属性就OK了。代码如下：

dl：hover｛right:0px;｝

这个是最简单目前浏览器兼容最好的。如果没有运动效果的要求这个足够了。涉及到运动效果的时，css2就有点力不从心了。这时候我们就需要用到css3的新技术。

第四步 讲讲css3的控制动画的属性：animation和transition;

这两个属性都是css3中新增的用来实现动画的属性。

Animations：
animation-name:指定动画关键帧名称；（需要我们自己定义）
animation-duration:动画执行时间；（比如1s表示1秒）
animation-timing-funcion:表示执行什么种类的动画，也就是动画执行的计算种类；
animation-iteration-count:动画执行次数，整数为多少表示执行多少次，infinite表示循环执行；
Transitions
property：表示对那个属性进行动画设置，比如background,color等（在后面的课程会列出可变换属性列表）；
duration：表示在多长时间内完成动画，也就是动画执行事件，比如1s表示1秒，0.5s表示半秒；
timing-function：表示执行什么种类的动画，也就是动画执行的计算种类，比如linear渐变（在后面的课程同样也会列出动画执行的计算种类列表）

还有就是动画效果的这种就比较高级一点，做出来的效果很好看，

收获：

做好了侧边栏，不过需要修改

    background: white;
    border-radius: 70px;
    color: orange;
    cursor: pointer;
    display: block;
    font-family: Courier New;
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    display: inline-block;
}

label:hover {
    background: #000;
}

#sideul li {
    list-style: none;
    color: white;
    width: 100%;
    height: 1.8em;
    font-size: 1.5em;
    text-align: center;
}

a {
    text-decoration: none;
}

#sideul li:hover {
    color: orange;
}

hover加上动画效果组成的。