首页 > 代码库 > 百度前端学院---小薇学院---任务---12

百度前端学院---小薇学院---任务---12

2024-11-06 02:06:39   206人阅读

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             tr th {
  8                 color: #fff;
  9                 background-color: #000;
 10             }
 11 
 12             tbody tr:nth-child(1),
 13             tbody tr:nth-child(2),
 14             tbody tr:nth-child(3) {
 15                 color: red;
 16             }
 17 
 18             tbody tr:nth-child(2n) {
 19                 background-color: #ccc;
 20             }
 21             .input:focus {
 22                 width: 350px;
 23                 border-radius: 8px;
 24                 height: 30px;
 25                 transition: width 1.5s;
 26                 outline: none;
 27                 box-shadow: 0px 0px 1px 1px #aaa;
 28             }
 29 
 30             #a {
 31                 background-color: #8EC63F;
 32             }
 33 
 34             #b {
 35                 background-color: #FFCC00;
 36             }
 37 
 38             #c {
 39                 background-color: #FF0000;
 40             }
 41         ul ,ol{
 42             list-style: none;
 43         }
 44         .banner{
 45             width: 200px;
 46             height: 100px;
 47             position: relative;
 48         }        
 49         ul{
 50             
 51              overflow: hidden; 
 52         }
 53         ul li{
 54             
 55             position: absolute; 
 56             width: 200px;
 57              height: 100px;            
 58             float: left;
 59         }
 60         ol{    
 61              
 62             z-index: 3;
 63             position: absolute;
 64             bottom: 0;
 65             right: 0;
 66         }
 67         ol li{
 68             line-height: 25px;
 69             text-align: center;
 70             cursor: pointer;
 71             width: 25px;
 72             height: 25px;
 73             float: left;
 74             margin-left: 5px;
 75             color: #FFFFFF;
 76             background-color: #CCCCCC;
 77         }
 78         a{    
 79             color: #fff;
 80             text-decoration: none;
 81         }
 82         ul li:target{
 83             z-index: 2;
 84             animation: .3s linear scroll;
 85         }
 86         @keyframes scroll {
 87             from {
 88             left: 0;
 89             }
 90             to {
 91             left: 10px;
 92             }
 93         }
 94         </style>
 95     </head>
 96     <body>
 97         <table>
 98             <thead>
 99                 <tr>
100                     <th>排名</th>
101                     <th>网站</th>
102                     <th>热度</th>
103                 </tr>
104             </thead>
105             <tbody>
106                 <tr><td>1.</td><td>百度前端学院</td><td>13000</td></tr>
107                 <tr><td>2.</td><td>百度前端学院</td><td>12000</td></tr>
108                 <tr><td>3.</td><td>百度前端学院</td><td>11000</td></tr>
109                 <tr><td>4.</td><td>百度前端学院</td><td>10000</td></tr>
110                 <tr><td>5.</td><td>百度前端学院</td><td>9000</td></tr>
111                 <tr><td>6.</td><td>百度前端学院</td><td>8000</td></tr>
112                 <tr><td>7.</td><td>百度前端学院</td><td>7000</td></tr>
113                 <tr><td>8.</td><td>百度前端学院</td><td>6000</td></tr>
114                 <tr><td>9.</td><td>百度前端学院</td><td>5000</td></tr>
115                 <tr><td>10.</td><td>百度前端学院</td><td>4000</td></tr>                 
116             </tbody>             
117         </table>
118         <div>
119             <input type="text"><br><br>
120             <input type="text" class="input">
121         </div>
122         <div class="banner">
123         <ul class="ul">
124             <li id="a"></li>
125             <li id="b"></li>
126             <li id="c"></li>
127             <p style="clear: both;"></p>
128         </ul>
129         <ol>
130             <li><a href="#a">1</a></li>
131             <li><a href="#b">2</a></li>
132             <li><a href="#c">3</a></li>
133         </ol>
134     </div>
135     </body>
136 </html>

技术分享

target 属性很不错呦技术分享

百度前端学院---小薇学院---任务---12


联系
我们