37、IFE任务12——学习CSS 3的新特性
0、题目
- 实现 示例图（点击查看） 中的几个例子
- 实现单双行列不同颜色，且前三行特殊表示的表格
- 实现正常状态和focus状态宽度不一致的input文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现
- 不使用JavaScript，实现一个Banner图轮流播放的效果，且点击右下角的1，2，3可以切换到对应Banner图片
1、解题过程
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Task 12-CSS 3的新特性</title> 6 </head> 7 <body> 8 <table class='table'> 9 <tr> 10 <th>排名</th> 11 <th>网站</th> 12 <th>热度</th> 13 </tr> 14 <tr> 15 <td>1.</td> 16 <td>百度前端技术学院</td> 17 <td>13000</td> 18 </tr> 19 <tr> 20 <td>2.</td> 21 <td>百度前端技术学院</td> 22 <td>11000</td> 23 </tr> 24 <tr> 25 <td>3.</td> 26 <td>百度前端技术学院</td> 27 <td>10000</td> 28 </tr> 29 <tr> 30 <td>4.</td> 31 <td>百度前端技术学院</td> 32 <td>9000</td> 33 </tr> 34 <tr> 35 <td>5.</td> 36 <td>百度前端技术学院</td> 37 <td>8000</td> 38 </tr> 39 <tr> 40 <td>6.</td> 41 <td>百度前端技术学院</td> 42 <td>7000</td> 43 </tr> 44 <tr> 45 <td>7.</td> 46 <td>百度前端技术学院</td> 47 <td>7000</td> 48 </tr> 49 <tr> 50 <td>8.</td> 51 <td>百度前端技术学院</td> 52 <td>6000</td> 53 </tr> 54 <tr> 55 <td>9.</td> 56 <td>百度前端技术学院</td> 57 <td>5000</td> 58 </tr> 59 <tr> 60 <td>10.</td> 61 <td>百度前端技术学院</td> 62 <td>4000</td> 63 </tr> 64 </table> 65 <input type='text' class='input'> 66 <div class='carousel'> 67 <div class='pics'> 68 <div class='pic' id='one'></div> 69 <div class='pic' id='two'></div> 70 <div class='pic' id='three'></div> 71 </div> 72 </div> 73 <div> 74 <a href='#one' class='tag1 tag'>1</a> 75 <a href='#two' class='tag2 tag'>2</a> 76 <a href='#three' class='tag3 tag'>3</a> 77 </div> 78 </body> 79 </html>
style.css
1 /*表格和输入框*/ 2 .table{ 3 border-collapse: collapse; 4 text-align: left; 5 margin:30px 0; 6 width: 350px; 7 } 8 th,td{ 9 height:25px; 10 border: 2px solid white; 11 } 12 th{ 13 background-color: black; 14 color: white; 15 } 16 tr:nth-child(odd){ 17 background-color: #ccc; 18 } 19 tr:nth-child(2),tr:nth-child(3),tr:nth-child(4){ 20 color:#FF6666; 21 } 22 .input{ 23 margin-left:100px; 24 width:100px; 25 transition:width .5s; 26 } 27 .input:focus{ 28 width: 200px; 29 } 30 /*轮播图*/ 31 .carousel{ 32 position: relative; 33 width:300px; 34 height: 150px; 35 margin-top:20px; 36 overflow: hidden; 37 } 38 .pics{ 39 position:absolute; 40 left: 0; 41 width:900px; 42 height:150px; 43 animation: carousel linear 12s infinite; 44 } 45 @keyframes carousel{ 46 0%{ left: 0; } 47 28%{ left: 0; } 48 35%{ left: -300px; } 49 63%{ left: -300px; } 50 70%{ left: -600px; } 51 98%{ left: -600px; } 52 100%{ left: 0; } 53 } 54 .pic{ 55 position:absolute; 56 display: inline-block; 57 width:300px; 58 height:150px; 59 } 60 #one{ 61 background-color:#FFCCCC; 62 left: 0; 63 } 64 #two{ 65 background-color:#FF9999; 66 left: 300px; 67 } 68 #three{ 69 background-color:#FF6666; 70 left:600px; 71 } 72 .tag{ 73 display: inline-block; 74 width:30px; 75 height: 30px; 76 margin:0; 77 position: relative; 78 top:-30px; 79 left: 194px; 80 background-color: rgba(0,0,0,0.5); 81 color:white; 82 line-height: 30px; 83 text-align: center; 84 } 85 .tag1:target{ 86 left: 0; 87 animation: .1s 1; 88 } 89 .tag2:target{ 90 left:0; 91 animation: .1s 1; 92 } 93 .tag3:target{ 94 left:0; 95 animation: .1s 1; 96 }
2、遇到的问题
（1）关于nth-child() 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
A、用法一
Odd (奇)和 even(偶) 是用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
B、用法二
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
比如： p:nth-child(3n+0) 指下标是 3 的倍数的所有 p 元素
C、详情见：CSS3 :nth-child() 选择器
D、扩展：:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素.（其余用法和 :nth-child(n) 类似）
（2）:target 选择器
:target 选择器可用于选取当前活动的目标元素。
<p><a href="#news1">跳转至内容 1</a></p> <p id="news1">内容 1...</p> // 目标元素
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
点击p里面的链接，:target 选择器会选择当前活动的目标元素。
