12、css

伪元素，不是真元素
做太极
css3 linear gradlent(渐变) generator（生成器）
内联元素的上下padding没有用，只有左右有用，要加个display：inline-block就有用了，然后如果宽度不确定，想要居中，就在加个爸爸，然后再爸爸身上设置style="text-align:center"
然后想要框框角不是方的border-radius: 2px;
又想要鼠标悬浮在上面有阴影的样子，于是度一下css shadow generator,调好之后把最后一行复制过来box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.5);

然后开始设置间距
分为条条上下
框框四周
左右间距
其中左右间距有点麻烦，我们设置float、left那个，因为之前是左右各占50%，所以我们加上一句box-sizing：border-box；就把后来在里面加的border或者padding都算在50%里面了，但是这样右边的右边也会有空，
所以我们用左右浮的那个来，但是这时候要浮在左右二边的都是li标签的，所以引入了
：nth-child（odd或者even这种表示选择的东西），然后分别作用，注意要留下间距，所以设成48%哦

image.png

然后做作品集，先浮动成行（略）
然后居中ol，反正这里我又蒙圈圈了
section.portfolio>nav{
text-align: center;}
section.portfolio>nav>ol{
display: inline-block;
vertical-align: top;
margin: 0 auto(这一行没有好像也无所谓);}
然后给间距，在把第一个的左边margin调掉，这样才能居中哦
在做下面的bar条条，这个时候想要它居中（和上面的套路一样，但是这里要通过nav来完成，等会儿我要试试直接可不可以）让nav下也加上display: inline-block;
vertical-align: top,然后在nav的父元素上面加上 text-align: center;
然后调那个红条条的静态就不写了

重点是状态基哦
<nav>
<ol class="clearfix">
<li id="portfolio1">所有</li>
<li id="portfolio2">框架</li>
<li id="portfolio3">原生JS&CSS</li>
</ol>
<div id="portfolioBar" class="bar state-1" >
<div class="bar-inner"></div>
</div>
</nav>

       <script>
           portfolio1.onclick= function(){
            portfolioBar.className = 'bar state-1'
           }
           portfolio2.onclick= function(){
            portfolioBar.className = 'bar state-2'
           }
           portfolio3.onclick= function(){
            portfolioBar.className = 'bar state-3'
           }
        </script>

css部分
section.portfolio > nav .bar.state-1 .bar-inner{
margin-left: 0px;
width: 50px;
}
section.portfolio > nav .bar.state-2 .bar-inner{
margin-left: 65px;
width: 50px;
}
section.portfolio > nav .bar.state-3 .bar-inner{
margin-left: 140px;
width: 96px;
}
可以在内部变化的条条上加上 transition: all 0.3s;控制速度
还可以让鼠标到字上面变成小爪子 cursor: pointer;

最后弄作品集，用绝对定位来即可，略了