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

转载于:https://www.cnblogs.com/yuge790615/p/4753731.html

web设计——NBA队标相关推荐

Web设计人员的云存储
The cloud is not just for programmers anymore. Most cloud providers have simple, intuitive interface ...
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
写在前面书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...
如何用手绘草图+头脑风暴进行移动Web设计
如何用手绘草图+头脑风暴进行移动Web设计编者按:前段时间在微博上流传过一张名为"外国设计师VS国内设计师:精采PK"的趣图,在图中我们可以看到老外设计师在做设计前先签好合同,按 ...
通过响应式web设计，使本站支持手机浏览
2019独角兽企业重金招聘Python工程师标准>>> 2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页 ...
平面广告设计和Web设计的差别
最近因为举行线下活动,与一些广告业内人士做了一些交流.在一个广告设计做的不错的公司,问他们为什么不做web设计.老板直接说了句话:招不到好的设计师. 同样这几天因为设计团队的合作伙伴有事在身, ...
非标自动化企业前十名_非标自动化设计：非标自动化是如何被称做企业里的血液？...
非标机械设计,就是根据客户提供的样板或者提出的要求来订做设计的.相信还有很多人对这个词感到很陌生,提起来也只是大概知道它是一种什么东西,那么接下来,小编就来为您简单的科普一下,非标机械设计都有哪些特点 ...
[Share]2008年国外最佳Web设计/开发技巧、脚本及资源总结
今天是2008年的最后一天,彬Go为大家奉上今年的最后大餐,这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程.技巧.脚本.实例及工具资源等,有一些是曾经彬Go发表过的翻译文章.实在是丰 ...
《写给大家看的Web设计书（第3版）》即将上市
<写给大家看的设计书>姊妹篇--<写给大家看的Web设计书(第3版)> 即将上市.它是Robin Williams的又一本设计书. 也许大家对Robin Williams的畅销 ...
Web设计离不开的4项基本原则
Web设计离不开的4项基本原则本文转载自:http://turingbook.group.javaeye.com/group/blog/306608(作者为资深Web设计师) 很高兴在上个星期收到了 ...
《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...

web设计——NBA队标

web设计——NBA队标相关推荐

最新文章

热门文章