web设计——NBA队标

案例地址：http://wanwanweb.sinaapp.com/ygnba/
源码在下方仅供参考，自己动手设计一款类似的版式，然后亲自动手试一下。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>ygtj</title>
  5     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  6     <script type="text/javascript" src="../ygnba/js/jquery.js"></script>
  7     <style type="text/css">
  8     *{
  9         margin: 0;
 10         padding: 0;
 11         list-style: none;
 12         font-size: 14px;
 13     }
 14     body{
 15         background: #873d0d;
 16     }
 17     #main{
 18         margin: 25px auto;
 19         width: 800px;
 20         height: 240px;
 21         /*background: #ccc;*/
 22     }
 23     h2{
 24         display: block;
 25         width: 120px;
 26         height: 25px;
 27         margin: 10px auto;
 28         text-align: center;
 29         line-height: 25px;
 30         font-size: 24px;
 31     }
 32     ul{
 33         height: 155px;
 34         /*background: red;*/
 35         margin: 0 auto;
 36     }
 37 
 38     li{
 39         float:left;
 40         
 41     }
 42     
 43     li a{
 44         display: block;
 45         width: 155px;
 46         height: 155px;        
 47         text-indent: -999px;
 48         overflow: hidden;
 49     }
 50 
 51     li.liA0 a{
 52         background: url("../ygnba/images/nbabj.jpg") no-repeat 0 0;
 53         margin-right: 6.25px;
 54     }
 55 
 56     li.liA1 a{
 57         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px 0;
 58         margin-right: 6.25px;
 59     }
 60 
 61     li.liA2 a{
 62         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px 0;
 63         margin-right: 6.25px;
 64     }
 65 
 66     li.liA3 a{
 67         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px 0;
 68         margin-right: 6.25px;
 69     }
 70 
 71     li.liA4 a{
 72         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px 0;
 73     }
 74 
 75     li.liB0 a{
 76         background: url("../ygnba/images/nbabj.jpg") no-repeat 0px -155px;
 77         margin-right: 6.25px;
 78     }
 79 
 80     li.liB1 a{
 81         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px -155px;
 82         margin-right: 6.25px;
 83     }
 84     li.liB2 a{
 85         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px -155px;
 86         margin-right: 6.25px;
 87     }
 88     li.liB3 a{
 89         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px -155px;
 90         margin-right: 6.25px;
 91     }
 92     li.liB4 a{
 93         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px -155px;
 94     }
 95 
 96     li.liC0 a{
 97         background: url("../ygnba/images/nbabj.jpg") no-repeat 0px -310px;
 98         margin-right: 6.25px;
 99     }
100 
101     li.liC1 a{
102         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px -310px;
103         margin-right: 6.25px;
104     }
105     li.liC2 a{
106         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px -310px;
107         margin-right: 6.25px;
108     }
109     li.liC3 a{
110         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px -310px;
111         margin-right: 6.25px;
112     }
113     li.liC4 a{
114         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px -310px;
115     }
116 
117     li.liD0 a{
118         background: url("../ygnba/images/nbabj.jpg") no-repeat 0px -465px;
119         margin-right: 6.25px;
120     }
121 
122     li.liD1 a{
123         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px -465px;
124         margin-right: 6.25px;
125     }
126     li.liD2 a{
127         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px -465px;
128         margin-right: 6.25px;
129     }
130     li.liD3 a{
131         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px -465px;
132         margin-right: 6.25px;
133     }
134     li.liD4 a{
135         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px -465px;
136     }
137 
138     li.liE0 a{
139         background: url("../ygnba/images/nbabj.jpg") no-repeat 0px -620px;
140         margin-right: 6.25px;
141     }
142 
143     li.liE1 a{
144         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px -620px;
145         margin-right: 6.25px;
146     }
147     li.liE2 a{
148         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px -620px;
149         margin-right: 6.25px;
150     }
151     li.liE3 a{
152         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px -620px;
153         margin-right: 6.25px;
154     }
155     li.liE4 a{
156         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px -620px;
157     }
158 
159     li.liF0 a{
160         background: url("../ygnba/images/nbabj.jpg") no-repeat 0px -775px;
161         margin-right: 6.25px;
162     }
163 
164     li.liF1 a{
165         background: url("../ygnba/images/nbabj.jpg") no-repeat -161.25px -775px;
166         margin-right: 6.25px;
167     }
168     li.liF2 a{
169         background: url("../ygnba/images/nbabj.jpg") no-repeat -322.5px -775px;
170         margin-right: 6.25px;
171     }
172     li.liF3 a{
173         background: url("../ygnba/images/nbabj.jpg") no-repeat -483.75px -775px;
174         margin-right: 6.25px;
175     }
176     li.liF4 a{
177         background: url("../ygnba/images/nbabj.jpg") no-repeat -645px -775px;
178     }
179 
180     .selBox{
181         width: 250px;
182         height: 25px;
183         margin: 25px auto;
184     }
185     
186     .selBox .sel{
187         width: 250px;
188         height: 25px;
189         font-size: .95em;
190     }
191     </style>
192 </head>
193 <body>
194     <div id="main">
195         <h2>大西洋赛区</h2>
196         <ul>
197             <li><a href="http://www.cnblogs.com/yuge790615">凯尔特人</a></li>
198             <li><a href="http://www.cnblogs.com/yuge790615">篮网</a></li>
199             <li><a href="http://www.cnblogs.com/yuge790615">尼克斯</a></li>
200             <li><a href="http://www.cnblogs.com/yuge790615">76人</a></li>
201             <li><a href="http://www.cnblogs.com/yuge790615">猛龙</a></li>
202         </ul>
203         <div class="selBox">
204             <select class="sel">
205                 <option value="大西洋赛区">大西洋赛区</option>
206                 <option value="中部赛区">中部赛区</option>
207                 <option value="东南赛区">东南赛区</option>
208                 <option value="西南赛区">西南赛区</option>
209                 <option value="西北赛区">西北赛区</option>
210                 <option value="太平洋赛区">太平洋赛区</option>
211             </select>
212         </div>
213     </div>
214 </body>
215 </html>
216 <script type="text/javascript">
217     var liClass = $("li");
218     var liFrist = $("option:eq(0)");
219     var h2Txt = $("h2");
220     $(function(){
221         liFrist.attr("selected", "selected");
222         for (var i = 0; i < liClass.length; i++) {
223             $("li:eq(+"+i+")").addClass('liA'+i);
224         }
225     
226     $(".sel").change(function(event) {
227         var msg = $(this).val();    
228         switch(msg){
229             case "大西洋赛区":
230                 for (var i = 0; i < liClass.length; i++) {
231                     $("li:eq(+"+i+")").removeClass();
232                     $("li:eq(+"+i+")").addClass('liA'+i);
233                 }
234                 h2Txt.html(msg);
235                 break;
236             case "中部赛区":
237                 for (var i = 0; i < liClass.length; i++) {
238                     $("li:eq(+"+i+")").removeClass();
239                     $("li:eq(+"+i+")").addClass('liB'+i);
240                 }
241                 h2Txt.html(msg);
242                 break;
243             case "东南赛区":
244                 for (var i = 0; i < liClass.length; i++) {
245                     $("li:eq(+"+i+")").removeClass();
246                     $("li:eq(+"+i+")").addClass('liC'+i);
247                 }
248                 break;
249             case "西南赛区":
250                 for (var i = 0; i < liClass.length; i++) {
251                     $("li:eq(+"+i+")").removeClass();
252                     $("li:eq(+"+i+")").addClass('liD'+i);
253                 }
254                 h2Txt.html(msg);
255                 break;
256             case "西北赛区":
257                 for (var i = 0; i < liClass.length; i++) {
258                     $("li:eq(+"+i+")").removeClass();
259                     $("li:eq(+"+i+")").addClass('liE'+i);
260                 }
261                 h2Txt.html(msg);
262                 break;
263             case "太平洋赛区":
264                 for (var i = 0; i < liClass.length; i++) {
265                     $("li:eq(+"+i+")").removeClass();
266                     $("li:eq(+"+i+")").addClass('liF'+i);
267                 }
268                 h2Txt.html(msg);
269                 break;
270         }
271     });
272 });
273 </script>
View Code
posted @ 2015-08-24 03:44 yuge790615 阅读(366) 评论(2) 收藏举报
刷新页面返回顶部
昱歌

http://www.tudou.com/home/_117940704/item

web设计——NBA队标
