web设计——NBA队标
生活随笔
收集整理的這篇文章主要介紹了
web设计——NBA队标
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
案例地址：http://wanwanweb.sinaapp.com/ygnba/
源碼在下方僅供參考，自己動(dòng)手設(shè)計(jì)一款類似的版式，然后親自動(dòng)手試一下。?
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>大西洋賽區(qū)</h2> 196 <ul> 197 <li><a href="http://www.cnblogs.com/yuge790615">凱爾特人</a></li> 198 <li><a href="http://www.cnblogs.com/yuge790615">籃網(wǎng)</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="大西洋賽區(qū)">大西洋賽區(qū)</option> 206 <option value="中部賽區(qū)">中部賽區(qū)</option> 207 <option value="東南賽區(qū)">東南賽區(qū)</option> 208 <option value="西南賽區(qū)">西南賽區(qū)</option> 209 <option value="西北賽區(qū)">西北賽區(qū)</option> 210 <option value="太平洋賽區(qū)">太平洋賽區(qū)</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 "大西洋賽區(qū)": 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 "中部賽區(qū)": 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 "東南賽區(qū)": 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 "西南賽區(qū)": 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 "西北賽區(qū)": 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 "太平洋賽區(qū)": 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?
轉(zhuǎn)載于:https://www.cnblogs.com/yuge790615/p/4753731.html
總結(jié)
以上是生活随笔為你收集整理的web设计——NBA队标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 域名注册管理机构域名注册服务机构的基本概
- 下一篇： 移动端自适应方案（转载）