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 选择器会选择当前活动的目标元素。
（3）关于CSS3的动画属性
时间： 2024-10-07 07:52:26