/*使用伪元素制作导航列表项分隔线*/
.nav li:before{content:"";width:1px;height:15px;display:inline-block;position:absolute;right:0;top:35%;
background-image: linear-gradient(to bottom,#f65f57, #8E8E8E ,#f65f57); }
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:before{background:none;}
.nav li:before{content:"";width:1px;height:15px;display:inline-block;position:absolute;right:0;top:35%;
background-image: linear-gradient(to bottom,#f65f57, #8E8E8E ,#f65f57); }
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:before{background:none;}
2016-06-17
CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画;
tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形;
transition: property duration timing-function delay;
animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;
tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形;
transition: property duration timing-function delay;
animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;
2016-06-17
a[class^=column]{background:#ff0000;}
a[href$=doc]{background:#00ff00;}
a[title*=box]{background:#0000ff;color:#fff;}
a[href$=doc]{background:#00ff00;}
a[title*=box]{background:#0000ff;color:#fff;}
2016-06-16
讲道理说难得同学们没有仔细读题，老师出的是填空题，仔细看下都是考选择器的。动画和其他属性都是配置好的。仔细看下都能自己做出来的。
2016-06-14
稍微改改就可以和上一课东西串起来了。实现点击时，div逐步拉长，同时背景不断变幻。有意思
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
transition: all 2s ease-out .2s;
}
div:hover {
animation: changecolor 5s ease-out .2s;
height:260px;
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
transition: all 2s ease-out .2s;
}
div:hover {
animation: changecolor 5s ease-out .2s;
height:260px;
}
2016-06-13
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());
2016-06-13
要想动画更流畅的，
修改一下。
css
a{
.slider a {
display: inline-block;
width: 168px;
padding-top: 42px;
}
img.bg {
left:0;
//transfrorm 注释掉或删掉
修改一下。
css
a{
.slider a {
display: inline-block;
width: 168px;
padding-top: 42px;
}
img.bg {
left:0;
//transfrorm 注释掉或删掉
2016-06-13
任务一
.slider li:nth-of-type(1) **（括号里的依次用1-5）
任务二
.slider a:after
任务三
.slider a:nth-of-type(1)::after *（括号里的依次用1-5）
任务四
.slider a::before
任务五
.slider a:hover::before
任务六
img:nth-of-type(1):target *（括号里的依次用1-5）
任务七
img:not(:target)
.slider li:nth-of-type(1) **（括号里的依次用1-5）
任务二
.slider a:after
任务三
.slider a:nth-of-type(1)::after *（括号里的依次用1-5）
任务四
.slider a::before
任务五
.slider a:hover::before
任务六
img:nth-of-type(1):target *（括号里的依次用1-5）
任务七
img:not(:target)
2016-06-13
在360极速下的chrome下，居然不行，不过使用下面的语句可能一样通过
input[type="text"]:not(:read-only){
border:4px solid red;
}
input[type="text"]:not(:read-only){
border:4px solid red;
}
2016-06-13
最赞回答 / qq_曉露_0
谢谢你的回答~我查了一下，可以是别的字体~说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：一、TureTpe(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+...
2016-06-13