首页 > 代码库 > 仿写网易云-排行榜页面
仿写网易云-排行榜页面
第一次仿写页面（内心还是很鸡冻啊~~~）
还有很多地方没有完善 暂时就先这样吧 以后有机会在加效果
多练习 熟能生巧~
好喜欢网易云音乐啊~音乐的天堂~希望以后自己也能去网易云工作就好了了~~~~~
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>我的网易云</title> 8 9 <!-- 新 Bootstrap 核心 CSS 文件 --> 10 <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 11 <!--引入字体--> 12 <link href=http://www.mamicode.com/"//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 13 14 <!-- 可选的Bootstrap主题文件（一般不用引入） --> 15 <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> 16 <!--<link rel="stylesheet" href=http://www.mamicode.com/"wyy.style.css" type="text/css">--> 17 <link rel="stylesheet" href=http://www.mamicode.com/"wyy.style" type="text/css"> 18 <style> 19 <!--导航栏--> 20 #body{background-color:#F8F8FF} 21 #img-brand{width:40px;height:40px;display:inline;margin-top:-10px;margin:1px 10px} 22 #nav1{width:100%;height:70px;} 23 #nav1-input{border-radius:3em;width:220px;margin:10px 5px;} 24 #nav2-ul a,#nav2-ul a:hover{color:white;} 25 #nav1-li{margin:10px 5px;} 26 #nav1-li active{height:50px} 27 #nav1-li2{margin:10px 5px;padding-right:50px} 28 #nav2 { 29 width: 100%; 30 height:20px; 31 margin-top: -20px; 32 line-height: 40px; 33 } 34 #nav2-ul{ 35 width:100%; 36 height:40px; 37 margin:0 auto; 38 padding:0px 510px 0 260px; 39 background-color: FireBrick; 40 line-height:30px; 41 <!--padding-left:20px--> 42 } 43 44 #nav2-ul li{ 45 float: left; 46 width: 16%; 47 text-align: center; 48 text-decoration:none; 49 list-style-type: none; 50 font-color: white; 51 margin:0 auto; 52 53 } 54 <!--主体内容-content--> 55 .font1{color:grey;} 56 #content-left .list-group .font-header{padding-top:30px} 57 #content{margin:0 auto;padding-top:20px;} 58 <!--主体内容-content-left--> 59 #content-left{ 60 <!--width:auto;--> 61 <!--height:100%;--> 62 padding-top:20px; 63 background-color:#F8F8FF; 64 border:2px solid #E8E8E8; 65 border-top:none; 66 border-bottom:none; 67 } 68 #content-left h5{margin-top:35px;margin-bottom:15px;margin-left:10px;color:black} 69 #content-left .list-group-item{ 70 border:none; 71 padding:-5px 0; 72 height:60px 73 } 74 #content-left{ 75 padding:0; 76 width:260px; 77 border:2px solid #E8E8E8; 78 border-top:none; 79 border-bottom:none;} 80 #content-left .list-group-item{ 81 background-color:#F8F8FF; 82 border:0px solid #E8E8E8; 83 border-right:2px solid #E8E8E8; 84 border-bottom:none; 85 } 86 #content-left .list-group-item h6{margin-top:-1px} 87 #content-left .list-group-item p{font:12px} 88 #content-left .list-group-item img{ 89 float:left; 90 margin-right:15px; 91 } 92 93 #list-group1{background-color:red} 94 #list-group1 h6{color:black} 95 #list-group{background-color:#F8F8FF} 96 #content-left .list-group .list-group-item{width:259px} 97 #content-left .list-group .list-group-item h6{color:black} 98 #content-left a:hover{background-color:#dcdcdc} 99 <!--主体内容-content-right--> 100 101 #content-right{ 102 height:2000px; 103 background-color:#ffffff; 104 } 105 #media-top{padding-top:30px;border:1px solid #E8E8E8; border-bottom-style:none;margin:0} 106 #btn{padding-top:30px} 107 #media-top .media-body{FireBrick} 108 #media-top h4{padding-bottom:10px;padding-top:20px;padding-left:10px} 109 #media-top p{padding-left:15px;font:12px;color:grey} 110 111 <!--表格-table--> 112 #i1{color:red;padding-left:10px} 113 #img1{margin:10px} 114 #tbody-tr .media-table-tr td{padding-top:10px} 115 #media-table-h3{float:left;display:inline} 116 #small{padding-left:10px} 117 #media-table-p2{float:right} 118 #media-table-p2 red{color:} 119 #media-table{border:0px solid #E8E8E8;border-left:none;padding:10px 10px} 120 #media-table{ 121 border-top: 2px solid FireBrick; 122 border-left: 1px solid #E8E8E8; 123 border-right: 1px solid #E8E8E8; 124 border-bottom: 1px solid #E8E8E8; 125 } 126 #media-table-thead{ 127 padding-top:-20px; 128 border:1px solid #E8E8E8; 129 } 130 #media-table-thead .media-table-tr{border-top-style:4px dotted FireBrick;} 131 #media-table-thead-hr{padding-bottom:-40px} 132 #media-table .media-table-tr{color:grey} 133 134 <!--底部-bottom--> 135 #view-bottom h4 { float:left;color:black} 136 #view-bottom-p1 { 137 padding-top:15px; 138 padding-left:15px; 139 font-size:12px; 140 } 141 #view-bottom{margin:10px 30px -10px 30px} 142 #view-bottom b{padding-bottom:-10px} 143 #view-bottom textarea { 144 width:100%; 145 height: 70px; 146 padding: 10px; 147 } 148 #view-bottom-medial a{ 149 margin-top:20px; 150 margin-right:15px; 151 text-decoration:none} 152 #view-bottom-medial a:link {color:grey} /* 未被访问的链接 153 #view-bottom-medial a:hover{color:grey} /* 鼠标悬浮在上的链接 */ 154 155 #view-bottom-body p { 156 margin-top: 10px; 157 margin-right: 15px; 158 } 159 #media2,#media3{width:100%} 160 #hr2{color:#E8E8E8} 161 #tbody-tr img{float:left;padding:5px} 162 163 #tbody-tr p{float:left;padding:5px} 164 #tbody-tr i{float:left;padding:10px} 165 #tbody-tr .td-p{float-left;padding-left:5px;padding-top:5px} 166 #tbody-tr{border:1px solid #E8E8E8;row:0} 167 168 #btn1{padding-top:10px;padding:left:10px} 169 170 #nav-ul{padding:10px 100px 30px 100px} 171 172 <!--脚部-footer--> 173 #footer-row .col-md-4 .media .media-body-a{text-decoration:none;} 174 #footer-row{padding-top:0} 175 #footer-row .col-md-4 .media i{color:grey} 176 #footer-row .col-md-4 .media .media-body p{font-size:12px} 177 #footer-row .col-md-4 .media .media-body .media-heading-p{padding-left:10px;} 178 div{ 179 <i class="fa fa-plus"></i> 180 <i class="fa fa-folder-o"></i> 181 <i class="fa fa-share-square-o"> 182 <i class="fa fa-arrow-circle-o-down"> 183 } 184 </style> 185 186 187 188 </head> 189 <body id="body"> 190 <nav id="nav1" class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation"> 191 <div class="container"> 192 <!-- Brand and toggle get grouped for better mobile display --> 193 <div class="navbar-header"> 194 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 195 <span class="sr-only">Toggle navigation</span> 196 <span class="icon-bar"></span> 197 <span class="icon-bar"></span> 198 <span class="icon-bar"></span> 199 </button> 200 <a class="navbar-brand" href=http://www.mamicode.com/"#"><img id="img-brand" src=http://www.mamicode.com/"img/wyy1.jpg" alt="网易云标志" width="80px" height="50px"> 201 <strong>网易云音乐</strong></a> 202 </div> 203 204 <!-- Collect the nav links, forms, and other content for toggling --> 205 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 206 <ul id="nav1-li" class="nav navbar-nav"> 207 <li class="active"><a href=http://www.mamicode.com/"#">发现音乐</a></li> 208 <li><a href=http://www.mamicode.com/"#">我的音乐</a></li> 209 <li><a href=http://www.mamicode.com/"#">朋友</a></li> 210 <li><a href=http://www.mamicode.com/"#">商城</a></li> 211 <li><a href=http://www.mamicode.com/"#">音乐人</a></li> 212 <li><a href=http://www.mamicode.com/"#">下载客户端</a></li> 213 </ul> 214 <ul class="nav navbar-nav navbar-right"> 215 <li id="nav1-li2" class="dropdown"> 216 <a href=http://www.mamicode.com/"#" class="dropdown-toggle" data-toggle="dropdown">登录<span class="caret"></span></a> 217 <ul class="dropdown-menu" role="menu"> 218 <li><a href=http://www.mamicode.com/"#">手机号登录</a></li> 219 <li><a href=http://www.mamicode.com/"#">微信登录</a></li> 220 <li><a href=http://www.mamicode.com/"#">QQ登录</a></li> 221 <li><a href=http://www.mamicode.com/"#">新浪微博登录</a></li> 222 <li><a href=http://www.mamicode.com/"#">网易邮箱登录</a></li> 223 224 </ul> 225 </li> 226 </ul> 227 <form class="navbar-form navbar-right" role="search"> 228 <div class="form-group"> 229 <input id="nav1-input" type="text" class="form-control" placeholder="单曲/歌手/专辑/歌单/MV/用户"> 230 </div> 231 232 </form> 233 </div><!-- /.navbar-collapse --> 234 </div><!-- /.container-fluid --> 235 </nav> 236 <nav id="nav2" class="nav navbar-default"> 237 <ul id="nav2-ul"> 238 <li><a href=http://www.mamicode.com/"index.html"><small>推荐</small></a></li> 239 <li><a href=http://www.mamicode.com/"#"><small>排行榜</small></a></li> 240 <li><a href=http://www.mamicode.com/"#"><small>歌单</small></a></li> 241 <li><a href=http://www.mamicode.com/"#"><small>主播电台</small></a></li> 242 <li><a href=http://www.mamicode.com/"#"><small>歌手</small></a></li> 243 <li><a href=http://www.mamicode.com/"#"><small>新碟上架</small></a></li> 244 </ul> 245 </nav> 246 <div id="content" class="container"> 247 <div id="row" class="row"> 248 <div id="content-left" class="col-md-3 col-md-offset-1"> 249 <div class="list-group"> 250 <h5><b>云音乐特色榜</b></h5> 251 <a id="list-group1" href=http://www.mamicode.com/"#" class="list-group-item"> 252 <img src=http://www.mamicode.com/"img/bd1.png"> 253 <h6> 云音乐飙升榜</h6> 254 <p class="font1"><small>每天更新</small></p> 255 </a> 256 <a href=http://www.mamicode.com/"#" class="list-group-item"> 257 <img src=http://www.mamicode.com/"img/bd1.png"> 258 <h6>云音乐新歌榜</h6> 259 <p class="font1"><small>每天更新</small></p> 260 </a> 261 <a href=http://www.mamicode.com/"#" class="list-group-item"> 262 <img src=http://www.mamicode.com/"img/bd2.png"> 263 <h6>网易原创歌曲榜</h6> 264 <p class="font1"><small>每天更新</small></p> 265 </a> 266 <a href=http://www.mamicode.com/"#" class="list-group-item"> 267 <img src=http://www.mamicode.com/"img/bd2.png"> 268 <h6>云音乐热歌榜</h6> 269 <p class="font1"><small>每天更新</small></p> 270 </a> 271 272 </div> 273 <div class="list-group"> 274 <h5><b>全体媒体榜</b></h5> 275 <a href=http://www.mamicode.com/"#" class="list-group-item"> 276 <img src=http://www.mamicode.com/"img/bd5.png" alt=""> 277 <h6>云音乐ACG音乐榜</h6> 278 <p class="font1"><small>每天更新</small></p> 279 </a> 280 <a href=http://www.mamicode.com/"#" class="list-group-item"> 281 <img src=http://www.mamicode.com/"img/bd6.png" alt=""> 282 <h6>云音乐古典音乐榜</h6> 283 <p class="font1"><small>每天更新</small></p> 284 </a> 285 <a href=http://www.mamicode.com/"#" class="list-group-item"> 286 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 287 <h6>UK排行榜周榜</h6> 288 <p class="font1"><small>每天更新</small></p> 289 </a> 290 <a href=http://www.mamicode.com/"#" class="list-group-item"> 291 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 292 <h6>美国Billboard周榜</h6> 293 <p class="font1"><small>每天更新</small></p> 294 </a> 295 <a href=http://www.mamicode.com/"#" class="list-group-item"> 296 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 297 <h6>Beatport全球电子舞曲榜</h6> 298 <p class="font1"><small>每天更新</small></p> 299 </a> 300 <a href=http://www.mamicode.com/"#" class="list-group-item"> 301 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 302 <h6>法国 NRJ Vos Hiits 周榜</h6> 303 <p class="font1"><small>每天更新</small></p> 304 </a> 305 <a href=http://www.mamicode.com/"#" class="list-group-item"> 306 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 307 <h6>KTV唛榜</h6> 308 <p class="font1"><small>每天更新</small></p> 309 </a> 310 <a href=http://www.mamicode.com/"#" class="list-group-item"> 311 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 312 <h6>iTunes榜</h6> 313 <p class="font1"><small>每天更新</small></p> 314 </a> 315 <a href=http://www.mamicode.com/"#" class="list-group-item"> 316 <img src=http://www.mamicode.com/"img/bd6.png" alt=""> 317 <h6>日本Oricon周榜</h6> 318 <p class="font1"><small>每天更新</small></p> 319 </a> 320 <a href=http://www.mamicode.com/"#" class="list-group-item"> 321 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 322 <h6>韩国Mne排行榜周榜</h6> 323 <p class="font1"><small>每天更新</small></p> 324 </a> 325 <a href=http://www.mamicode.com/"#" class="list-group-item"> 326 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 327 <h6>美国Billboard周榜</h6> 328 <p class="font1"><small>每天更新</small></p> 329 </a> 330 <a href=http://www.mamicode.com/"#" class="list-group-item"> 331 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 332 <h6>Beatport全球电子舞曲榜</h6> 333 <p class="font1"><small>每天更新</small></p> 334 </a> 335 <a href=http://www.mamicode.com/"#" class="list-group-item"> 336 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 337 <h6>法国 NRJ Vos Hiits 周榜</h6> 338 <p class="font1"><small>每天更新</small></p> 339 </a> 340 <a href=http://www.mamicode.com/"#" class="list-group-item"> 341 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 342 <h6>KTV唛榜</h6> 343 <p class="font1"><small>每天更新</small></p> 344 </a> 345 <a href=http://www.mamicode.com/"#" class="list-group-item"> 346 <img src=http://www.mamicode.com/"img/bd7.png" alt=""> 347 <h6>iTunes榜</h6> 348 <p class="font1"><small>每天更新</small></p> 349 </a> 350 351 </div> 352 </div> 353 <div id="content-right" class="col-md-7"> 354 <div id="media-top" class="media"> 355 <a class="media-left media-middle" href=http://www.mamicode.com/"#"> 356 <img src=http://www.mamicode.com/"img/BSB.jpg" alt="..." width="150px" height="150px"> 357 </a> 358 <div class="media-body"> 359 <h4 class="media-heading"><b>云音乐飙升榜</b></h4> 360 <p><i class="fa fa-clock-o"></i>最近更新：01月20日 （每天更新）</p> 361 <div> 362 <div class="btn-group"> 363 <button type="button" class="btn btn-primary btn-group-xs"> 364 <i class="fa fa-play-circle-o"></i> 365 播放</button> 366 <button type="button" class="btn btn-primary btn-group-xs"> 367 <i class="fa fa-plus"></i> 368 </button> 369 370 </div> 371 <button type="button" class="btn btn-default btn-group-sm"> 372 <i class="fa fa-folder-open-o"></i> 373 (180837) 374 375 </button> 376 <button type="button" class="btn btn-default btn-group-sm"> 377 <i class="fa fa-share"></i> 378 (835) 379 380 </button> 381 <button type="button" class="btn btn-default btn-group-sm"> 382 <i class="fa fa-cloud-download"></i> 383 下载 384 385 </button> 386 <button type="button" class="btn btn-default btn-group-sm"> 387 <i class="fa fa-commenting-o"></i> 388 (37396) 389 </button> 390 </div> 391 392 393 394 395 </div> 396 <table id="media-table" class="table table-striped table-responsive"> 397 <span><strong>歌曲列表</strong>100首歌曲</span> 398 <p id="media-table-p2">播放： 399 <span class="red"><strong>7465644</strong></span>次 400 </p> 401 402 403 <thead id="media-table-thead"> 404 <!--<hr id="media-table-thead-hr" style=" height:4px;border:none;border-top:2px solid FireBrick;padding-bottom:-10px" />--> 405 <tr class="media-table-tr"> 406 <th></th> 407 <th>标题</th> 408 <th>时长</th> 409 <th>歌手</th> 410 </tr> 411 </thead> 412 <tbody id="tbody-tr"> 413 <tr class="media-table-tr" height="40px"> 414 <td class="td">1</td> 415 <td> 416 <img src=http://www.mamicode.com/"img/xzq.jpg" width="60px" height="60px"> 417 <i class="fa fa-play-circle-o td1"></i> 418 <p class="td-p td1">Goodbey</p> 419 420 </td> 421 <td class="td1 change"> 03：20</td> 422 <td class="tr-td td1">2NE1</td> 423 </tr> 424 <tr class="media-table-tr" height="40px" bgcolor="#ffffff"> 425 <td class="td">2</td> 426 <td> 427 <img src=http://www.mamicode.com/"img/xzq2.jpg" width="60px" height="60px"> 428 <i class="fa fa-play-circle-o td1"></i> 429 <p class="td-p td1">小幸运</p> 430 431 </td> 432 <td class="td1 change"> 03：20</td> 433 <td class="tr-td td1">田馥甄</td> 434 </tr> 435 <tr class="media-table-tr" height="40px"> 436 <td class="td">1</td> 437 <td> 438 <img src=http://www.mamicode.com/"img/tx.jpg" width="60px" height="60px"> 439 <i class="fa fa-play-circle-o td1"></i> 440 <p class="td-p td1">演员</p> 441 442 </td> 443 <td class="td1 change"> 03：20</td> 444 <td class="tr-td td1">薛之谦</td> 445 </tr> 446 <tr class="media-table-tr" bgcolor="#ffffff"> 447 <td>4</td> 448 <td> 449 <i class="fa fa-play-circle-o"></i> 450 <p class="td-p">晴天</p> 451 452 </td> 453 <td>03：20</td> 454 <td>周杰伦</td> 455 </tr> 456 <tr class="media-table-tr"> 457 <td>5</td> 458 <td> 459 <i class="fa fa-play-circle-o"></i> 460 <p class="td-p">九歌</p> 461 462 </td> 463 <td>03：20</td> 464 <td>小曲儿</td> 465 </tr> 466 <tr class="media-table-tr" bgcolor="#ffffff"> 467 <td>6></td> 468 <td> 469 <i class="fa fa-play-circle-o"></i> 470 <p class="td-p">下午茶</p> 471 472 </td> 473 <td>03：20</td> 474 <td>徐梦媛</td> 475 </tr> 476 <tr class="media-table-tr"> 477 <td>7</td> 478 <td> 479 <i class="fa fa-play-circle-o"></i> 480 <p class="td-p">火星人来过</p> 481 482 </td> 483 <td>03：20</td> 484 <td>薛之谦</td> 485 </tr> 486 <tr class="media-table-tr" bgcolor="#ffffff"> 487 <td>8</td> 488 <td> 489 <i class="fa fa-play-circle-o"></i> 490 <p class="td-p">意外</p> 491 492 </td> 493 <td>03：20</td> 494 <td>薛之谦</td> 495 </tr> 496 <tr class="media-table-tr"> 497 <td>9</td> 498 <td> 499 <i class="fa fa-play-circle-o"></i> 500 <p class="td-p">意外</p> 501 502 </td> 503 <td>03：20</td> 504 <td>薛之谦</td> 505 </tr> 506 <tr class="media-table-tr" bgcolor="#ffffff"> 507 <td>10</td> 508 <td> 509 <i class="fa fa-play-circle-o"></i> 510 <p class="td-p">意外</p> 511 512 </td> 513 <td>03：20</td> 514 <td>薛之谦</td> 515 </tr> 516 <tr class="media-table-tr"> 517 <td>11</td> 518 <td> 519 <i class="fa fa-play-circle-o"></i> 520 <p class="td-p">意外</p> 521 522 </td> 523 <td>03：20</td> 524 <td>薛之谦</td> 525 </tr> 526 <tr class="media-table-tr" bgcolor="#ffffff"> 527 <td>12</td> 528 <td> 529 <i class="fa fa-play-circle-o"></i> 530 <p class="td-p">意外</p> 531 532 </td> 533 <td>03：20</td> 534 <td>薛之谦</td> 535 </tr> 536 <tr class="media-table-tr"> 537 <td>13</td> 538 <td> 539 <i class="fa fa-play-circle-o"></i> 540 <p class="td-p">意外</p> 541 542 </td> 543 <td>03：20</td> 544 <td>薛之谦</td> 545 </tr> 546 <tr class="media-table-tr" bgcolor="#ffffff"> 547 <td>14</td> 548 <td> 549 <i class="fa fa-play-circle-o"></i> 550 <p class="td-p">意外</p> 551 552 </td> 553 <td>03：20</td> 554 <td>薛之谦</td> 555 </tr> 556 <tr class="media-table-tr"> 557 <td>15</td> 558 <td> 559 <i class="fa fa-play-circle-o"></i> 560 <p class="td-p">意外</p> 561 562 </td> 563 <td>03：20</td> 564 <td>薛之谦</td> 565 </tr> 566 <tr class="media-table-tr" bgcolor="#ffffff"> 567 <td>16</td> 568 <td> 569 <i class="fa fa-play-circle-o"></i> 570 <p class="td-p">意外</p> 571 572 </td> 573 <td>03：20</td> 574 <td>薛之谦</td> 575 </tr> 576 </tbody> 577 </table> 578 <div id="view-bottom"> 579 <h3 class="font1"><b>评论</b> <small id="view-bottom-p1">共37467条评论</small></h3> 580 <hr style=" height:4px;border:none;border-top:2px solid FireBrick;" /> 581 582 <!--<p id="view-bottom-p1" class="font1">共37467条评论</p>--> 583 <!--<hr id="hr3">--> 584 <div class="media"> 585 <div class="media-left media-top"> 586 <img src=http://www.mamicode.com/"img/view.png" alt="..."> 587 </div> 588 <div id="view-bottom-body" class="media-body"> 589 <textarea cols="60" rows="10" placeholder="评论"></textarea> 590 591 <a><i class="fa fa-smile-o fa-lg"></i></a> 592 <a><i class="fa fa-at fa-lg"></i></a> 593 <button id="btn1" class="btn btn-primary btn-sm pull-right" type="button">评论</button> 594 <p class="pull-right font1">140</p> 595 </div> 596 </div> 597 <div id="view-bottom2" class="user-view"> 598 <h6><b>精彩评论</b></h6> 599 <hr style=" height:1px;border:none;border-top:2px solid #E8E8E8;padding-top:0px" /> 600 <div class="media" id="media2"> 601 <div class="media-left"> 602 <img src=http://www.mamicode.com/"img/xzq.jpg" alt="" width="50px" height="50px"> 603 </div> 604 <div class="media-body"> 605 <p><a href=http://www.mamicode.com/"#">爱音乐的小圆圆</a>：说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢</p> 606 <p class="pull-left">03：23</p> 607 <p class="font1 pull-right"><a href=http://www.mamicode.com/"#"> 608 <i class="fa fa-thumbs-o-up"></i></a>(54) | 回复 609 </p> 610 </div> 611 612 </div> 613 <hr style=" height:1px;border:none;border-top:1px dotted #E8E8E8;padding-top:0px" /> 614 615 <div class="media" id="media3"> 616 <div class="media-left"> 617 <img src=http://www.mamicode.com/"img/xzq2.jpg" alt="" width="50px" height="50px"> 618 </div> 619 <div class="media-body"> 620 <p><a href=http://www.mamicode.com/"#">爱音乐的小圆圆</a>：说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢</p> 621 <p class="pull-left">03：23</p> 622 <p class="font1 pull-right"><a href=http://www.mamicode.com/"#"> 623 <i class="fa fa-thumbs-o-up"></i></a>(64) | 回复 624 </p> 625 </div> 626 627 </div> 628 629 630 <div id="view-bottom3" class="user-view"> 631 <h6><b>最新评论（84747）</b></h6> 632 <hr style=" height:1px;border:none;border-top:2px solid #E8E8E8;padding-top:0px" /> 633 <div class="media" id="media4"> 634 <div class="media-left"> 635 <img src=http://www.mamicode.com/"img/xzq.jpg" alt="" width="50px" height="50px"> 636 </div> 637 <div class="media-body"> 638 <p><a href=http://www.mamicode.com/"#">爱音乐的小圆圆</a>：说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢</p> 639 <p class="pull-left">03：23</p> 640 <p class="font1 pull-right"><a href=http://www.mamicode.com/"#"> 641 <i class="fa fa-thumbs-o-up"></i></a>(54) | 回复 642 </p> 643 </div> 644 645 </div> 646 <hr style=" height:1px;border:none;border-top:1px dotted #E8E8E8;padding-top:0px" /> 647 648 <div class="media" id="media5"> 649 <div class="media-left"> 650 <img src=http://www.mamicode.com/"img/tx.jpg" alt="" width="50px" height="50px"> 651 </div> 652 <div class="media-body"> 653 <p><a href=http://www.mamicode.com/"#">爱音乐的小圆圆</a>：说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢说些什么好呢</p> 654 <p class="pull-left">03：23</p> 655 <p class="font1 pull-right"><a href=http://www.mamicode.com/"#"> 656 <i class="fa fa-thumbs-o-up"></i></a>(54) | 回复 657 </p> 658 </div> 659 660 </div> 661 </div> 662 <nav id="nav-ul" class="nav-justified"> 663 <ul class="pagination"> 664 <li class="disabled"><a href=http://www.mamicode.com/"#">«上一页</a></li> 665 <li class="active"><a href=http://www.mamicode.com/"#">1</a></li> 666 <li><a href=http://www.mamicode.com/"#">2</a></li> 667 <li><a href=http://www.mamicode.com/"#">3</a></li> 668 <li><a href=http://www.mamicode.com/"#">4</a></li> 669 <li><a href=http://www.mamicode.com/"#">5</a></li> 670 <li><a href=http://www.mamicode.com/"#">下一页»</a></li> 671 </ul> 672 </nav> 673 </div> 674 </div><!--content-left--> 675 </div><!--media-top--> 676 </div><!--content-right--> 677 </div><!--row--> 678 </div><!--content--> 679 <hr style=" height:2px;border:none;border-top:2px solid #E8E8E8;padding-top:0px" /> 680 <div class="container"> 681 <footer> 682 <div id="footer-row" class="row"> 683 <div class="col-md-4"> 684 <div class="media"> 685 <a class="media-left media-middle" href=http://www.mamicode.com/"#"> 686 <i class="fa fa-rebel fa-2x"></i> 687 </a> 688 <div class="media-body"> 689 <h6 class="media-heading"><a class="media-body-a">独立音乐人招募计划</a></h6> 690 <p><a class="media-body-a">加入我们 即将与超过亿万乐迷互动</a></p> 691 </div> 692 </div> 693 </div> 694 <div class="col-md-4"> 695 <div class="media"> 696 <a class="media-left media-middle" href=http://www.mamicode.com/"#"> 697 <i class="fa fa-pinterest fa-2x"></i> 698 </a> 699 <div class="media-body"> 700 <h6 class="media-heading"><a class="media-body-a">音乐专栏招募计划</a></h6> 701 <p><a class="media-body-a">加入我们 与同道中人交流心得</a></p> 702 </div> 703 </div> 704 </div> 705 <div class="col-md-4"> 706 <div class="media"> 707 <div class="media-body"> 708 <h6 class="media-heading"> 709 <a class="media-body-a" href=http://www.mamicode.com/"#">关于网易</a>-<a class="media-body-a" href=http://www.mamicode.com/"#">客户服务</a>-<a class="media-body-a" href=http://www.mamicode.com/"#">服务条款</a>-<a class="media-body-a" href=http://www.mamicode.com/"#">网站导航</a> 710 </h6> 711 <p class="media-heading-p">网易公司版权所有?1997-2016</p> 712 <p>杭州网易雷火科技有限公司运营： 713 <a class="media-body-a media-heading-p" href=http://www.mamicode.com/"#">浙网文[2016]0155-055号</a> 714 <i class="fa fa-pencil"></i> 715 <a class="media-body-a media-heading-p" href=http://www.mamicode.com/"#">意见反馈</a> 716 </div> 717 </div> 718 </div> 719 </div> 720 </footer> 721 </div> 722 <script> 723 $(document).ready(function(){ 724 $(‘.media-table-tr‘).hover(function(event){ 725 $(this).find("td:eq(2)").empty(); 726 var $i1 = $(‘<i class="fa fa-plus"></i>‘); 727 var $i2 = $(‘<i class="fa fa-folder-o"></i>‘); 728 var $i3 = $(‘<i class="fa fa-share-square-o"></i>‘); 729 var $i4 = $(‘<i class="fa fa-arrow-circle-o-down"></i>‘); 730 $(this).find("td:eq(2)").append($i1).append($i2).append($i3).append($i4); 731 },function(){ 732 $(this).find("td:eq(2)").replaceWith("<td>3:20</td>"); 733 $(this).find("td:eq(2)").addClass("change"); 734 735 }); 736 }); 737 738 739 740 741 </script> 742 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 743 <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 744 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 745 <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 746 </body> 747 </html>
仿写网易云-排行榜页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。