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>

View Code

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     }

View Code

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)。