发表于: 2016-03-26 23:12:41

1 2457


今天完成的事情:

1、终于把轮播图弄好了,今天把纯css实现轮播图的原理弄明白了(多年的老便秘被治好了),把task7和task8链接起来。

2、做了个任务主页。http://119.10.57.69/ptt06/css-410-task.html


明天计划的事情:

1、开始task9。


遇到的问题:

1、今天没啥状态,只把纯CSS实现轮播图搞明白了。

2、轮播图自动播放的功能还没实现,不过有些思路,明天试验试验。


收获:

1、纯CSS实现轮播图要把label标签运用好,实现左右切换的功能,用label标签把底部小圆点的功能连起来。另外一个就是CSS3里新增的选择器()理解加运用。之前一直只习惯用几个常用的选择器,忽略了其他的选择器作用。

element1~element2p~ul选择前面有 <p> 元素的每个 <ul> 元素。3
[attribute^=value]a[src^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。3
[attribute*=value]a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。3
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。3
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。3
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。3
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3
:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3
:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个 <p> 元素(包括文本节点)。3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 <input> 元素。3
:disabledinput:disabled选择每个禁用的 <input> 元素3
:checkedinput:checked选择每个被选中的 <input> 元素。3
:not(selector):not(p)选择非 <p> 元素的每个元素。3
::selection::selection选择被用户选取的元素部分。3



返回列表 返回列表
评论

    分享到