├── README.md ├── bbs.html ├── css ├── bbs.css ├── bootstrap.css ├── dilates.css ├── index.css ├── login.css ├── movie.css ├── play.css ├── reset.css ├── user.css ├── video-js.css └── willesPlay.css ├── dilates.html ├── fonts ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 ├── images ├── 0069qWFHgw1f5a58ws5v6j30l402iq3x.jpg ├── 0069qWFHgw1f7iz0778hbj30d707n757.jpg ├── 0069qWFHgw1f899r65iarj30d707nwes.jpg ├── 0069qWFHgw1f8ade8vo0oj30bm0gojv4.jpg ├── 0069qWFHgw1f8crdp8cbrj30s20cin1g.jpg ├── 0069qWFHgw1f8hc7xrwgmj30br0goq7e.jpg ├── 0069qWFHjw1f5ukwnznnnj30b90go77h.jpg ├── 1.jpg ├── 2.jpg ├── 290713.png ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── control_01.png ├── logo.png ├── logo_qq_small.png ├── logo_tudou_small.png ├── logo_youku_small.png ├── play-icon.png ├── playheader.jpg └── ribbon.png ├── index.html ├── js ├── bootstrap.min.js ├── canvas-nest.js ├── html5media.min.js ├── index.js ├── jquery-1.11.3.min.js ├── jquery.validate.min.js ├── video.js └── willesPlay.js ├── login.html ├── movie.html ├── play.html ├── reg.html └── user.html /README.md: -------------------------------------------------------------------------------- 1 | # 帮别人写的电影网站整套页面 bootstrap 2 | 没什么了 3 | -------------------------------------------------------------------------------- /bbs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 交流圈 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

欢迎来到迅影网，一起分享电影给我们带来的快乐。

18 |
19 |
20 | 保存到桌面 21 | Ctrl+D 加入收藏夹 22 |
23 |
24 |
25 |
26 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 星际迷航3 36 | 谍影重重5 37 | 使徒行者 38 | 盗墓笔记 39 | 喊·山 40 |
41 |
42 |
43 | 79 |
80 |
81 |
82 |
83 |
84 | 全部文章 85 |
86 | 发表 87 |
88 |
89 | 117 | 145 | 173 | 201 | 229 | 257 | 285 | 313 | 341 | 369 | 397 | 425 | 453 | 481 | 509 | 537 | 565 | 593 | 621 |
622 | 623 |
624 |
    625 |
  • 626 | 1 627 |
    • 628 |
  • 629 | 2 630 |
    • 631 |
  • 632 | 3 633 |
    • 634 |
  • 635 | 4 636 |
    • 637 |
  • 638 | 5 639 |
    • 640 |
  • 641 | 6 642 |
    • 643 |
  • 644 | 645 |
    • 646 |
  • 647 | 末页 648 |
    • 649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |

迅影网

657 |

一起分享电影给我们带来的快乐

658 |
659 | 现在注册 660 |

661 | 已注册用户请 662 | 登录 663 |

664 |
665 |
666 |
667 |
668 |
669 |
今日签到：
670 |
671 | 672 | 673 | 674 | 675 | 676 | 677 |
678 |
679 |
680 |
681 | 所有圈子： 682 |
683 | 684 | 685 | 686 |
687 |
688 |
689 | 全部 690 | 问题反馈 691 | 资源分享 692 | 影评 693 | 影视资讯 694 | 闲聊 695 | 电影推荐 696 | 经典电影 697 | 喜剧 698 | 动作片 699 | 恐怖片 700 | 科幻片 701 | 剧情片 702 | 综艺娱乐 703 | 每日推荐 704 | 美剧 705 |
706 |
707 |
708 |
最新文章：
709 |
710 | 地球百子第四季/全集Season 4迅雷下载 711 | 波特莱尔的冒险第一季/全集Season 1迅雷下载 712 | 河谷镇第一季/全集Season 1迅雷下载 713 | 魔法师第一至二季/全集The Magicians迅雷下载 714 | 恐怖 715 | 求鬼吹灯19-21集 716 | 下一站歌后第三至五季/全集Nashville迅雷下载 717 | 青年图摘0119！这个翻译很标准 718 | 青年图摘0117！良心企业 719 | 神奇动物在哪里 韩版 高清 720 |
721 |
722 |
723 |
724 |
725 | 744 | 745 | 746 | -------------------------------------------------------------------------------- /css/bbs.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | a:hover{ 10 | text-decoration:none; 11 | } 12 | li{ 13 | list-style:none; 14 | } 15 | .cl{ 16 | clear:both; 17 | } 18 | body{ 19 | background: rgb(245, 245, 245) none repeat scroll 0 0; 20 | font-family: "HanHei SC","PingFang SC","Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei","STHeitiSC-Light","Arial","Segoe UI",sans-serif; 21 | height: 100%; 22 | line-height: 1.5; 23 | margin: 0; 24 | min-width: 1040px !important; 25 | overflow-wrap: break-word; 26 | width: 100%; 27 | } 28 | /*顶部开始*/ 29 | #top{ 30 | width:100%; 31 | height:35px; 32 | padding:5px 0px; 33 | border-bottom:1px solid #ddd; 34 | } 35 | .top_main{ 36 | width:1010px; 37 | height:35px; 38 | padding:0px 15px; 39 | line-height:21px; 40 | margin:0 auto; 41 | } 42 | .top_main_left p{ 43 | color:#777790; 44 | font-size:12px; 45 | float:left; 46 | margin-bottom:10px; 47 | } 48 | .top_main_right_2{ 49 | float:right; 50 | color:#777; 51 | font-size:12px; 52 | } 53 | .top_main_right_1{ 54 | float:right; 55 | color:#F00; 56 | font-size:12px; 57 | margin-left:10px; 58 | } 59 | .top_main_right a:hover{ 60 | text-decoration:underline; 61 | } 62 | /*header部分*/ 63 | header{ 64 | width:1025px; 65 | height:55px; 66 | padding:20px 0px; 67 | padding-left:15px; 68 | margin:0 auto; 69 | } 70 | .logo{ 71 | width:210px; 72 | height:50px; 73 | float:left; 74 | margin-top:-20px; 75 | } 76 | .search{ 77 | width:327px; 78 | height:50px; 79 | margin-top:5px; 80 | float:right; 81 | } 82 | input[type=search]{ 83 | width:241px; 84 | height:34px; 85 | padding:6px 12px; 86 | border:1px solid #ccc; 87 | margin-top:-1px; 88 | } 89 | input[type=submit]{ 90 | width:72px; 91 | height:34px; 92 | border:1px solid #2E6DA4; 93 | padding:6px 12px; 94 | margin-left:-5px; 95 | background:#337AB7; 96 | color:#fff; 97 | } 98 | input[type=submit]:hover{ 99 | background:#286090; 100 | } 101 | .tj{ 102 | margin-top:5px; 103 | font-size:12px; 104 | } 105 | .tj a{ 106 | margin-right:5px; 107 | } 108 | .tj a:first-child{ 109 | margin-left:20px; 110 | } 111 | .tj a:hover{ 112 | text-decoration:underline; 113 | } 114 | /*导航开始*/ 115 | nav{ 116 | width:100%; 117 | height:40px; 118 | margin-bottom:20px; 119 | background:; 120 | margin-top: 40px; 121 | } 122 | .nav{ 123 | width:1010px; 124 | height:40px; 125 | padding:0px 15px; 126 | margin:0 auto; 127 | background:; 128 | overflow:hidden; 129 | 130 | } 131 | /*翻转导航开始*/ 132 | .nav:after{ 133 | content:''; 134 | display:block; 135 | overflow:hidden; 136 | clear:both; 137 | } 138 | .nav_item{ 139 | width:100px; 140 | height:40px; 141 | float:left; 142 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 143 | perspective:4000px; 144 | -webkit-perspective:4000px; 145 | -moz-perspective:4000px; 146 | -0-perspective:4000px; 147 | -ms-perspective:4000px; 148 | } 149 | .nav_item a{ 150 | margin-right:5px; 151 | height:40px; 152 | display:block; 153 | transition:all 500ms ease 0s; 154 | -webkit-transform-style:preserve-3d; 155 | -moz-transform-style:preserve-3d; 156 | -0-transform-style:preserve-3d; 157 | -ms-transform-style:preserve-3d; 158 | /*.nav_item的子元素可以呈3d效果*/ 159 | transform-style:preserve-3d; 160 | } 161 | .nav_item a p{ 162 | height:40px; 163 | line-height:40px; 164 | margin:0; 165 | border-radius:5px; 166 | font-size:14px; 167 | font-size:"黑体"; 168 | text-align:center; 169 | transition:all 500ms ease 0s; 170 | } 171 | .nav_item a{ 172 | text-decoration:none; 173 | } 174 | .nav_item a p:first-child{ 175 | border-radius:5px; 176 | color:#fff; 177 | background:#ff7434; 178 | /*沿z轴移动50橡素 20px高度除以2*/ 179 | transform:translateZ(20px); 180 | -webkit-transform:translateZ(20px); 181 | -moz-transform:translateZ(20px); 182 | -0-transform:translateZ(20px); 183 | -ms-transform:translateZ(20px); 184 | } 185 | .nav_item a p:last-child{ 186 | border-radius:5px; 187 | color:#fff; 188 | background:#85bc00; 189 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 190 | transform:translateZ(20px) rotateX(-90deg); 191 | -webkit-transform:translateZ(20px) rotateX(-90deg); 192 | -moz-transform:translateZ(20px) rotateX(-90deg); 193 | -0-transform:translateZ(20px) rotateX(-90deg); 194 | -ms-transform:translateZ(20px) rotateX(-90deg); 195 | /*设置上边距为-20px 20px高度除以2*/ 196 | margin-top:-20px; 197 | } 198 | .nav_item a:hover{ 199 | margin-top:0px; 200 | transform:rotateX(90deg); 201 | -webkit-transform:rotateX(90deg); 202 | -moz-transform:rotateX(90deg); 203 | -0-transform:rotateX(90deg); 204 | -ms-transform:rotateX(90deg); 205 | } 206 | .nav_item a:hover p:last-child{ 207 | margin-top:0px; 208 | transform:translateZ(0) rotateX(-90deg); 209 | -webkit-transform:translateZ(0) rotateX(-90deg); 210 | -moz-transform:translateZ(0) rotateX(-90deg); 211 | -0-transform:translateZ(0) rotateX(-90deg); 212 | -ms-transform:translateZ(0) rotateX(-90deg); 213 | } 214 | nav>.nav>li{ 215 | width:100px; 216 | height:40px; 217 | background:#ff7434; 218 | float:right; 219 | margin-right:5px; 220 | border-radius:5px; 221 | line-height:40px; 222 | text-align:center; 223 | font-size:14px; 224 | } 225 | nav>.nav>li>a{ 226 | color:#fff; 227 | text-decoration:none; 228 | padding:0; 229 | } 230 | .nav li:hover a{ 231 | color:red; 232 | } 233 | 234 | /*end------------------*/ 235 | 236 | /*网站主题*/ 237 | .container { 238 | width: 1040px !important; 239 | margin-left: auto; 240 | margin-right: auto; 241 | padding-left: 15px; 242 | padding-right: 15px; 243 | } 244 | .topic-list{ 245 | margin-bottom:10px; 246 | } 247 | .panel { 248 | border-radius: 0; 249 | } 250 | .panel-heading, .panel-body{ 251 | padding:8px 10px; 252 | } 253 | .head-btn { 254 | border-radius: 2px; 255 | color: #fff; 256 | display: inline-block; 257 | font-size: 12px; 258 | font-weight: bold; 259 | height: 21px; 260 | line-height: 21px; 261 | padding: 0 10px; 262 | vertical-align: text-top; 263 | } 264 | .head-btn:hover{ 265 | color: #fff; 266 | text-decoration:none; 267 | } 268 | .btn-blue { 269 | background: #0faaea none repeat scroll 0 0; 270 | } 271 | .list-group-item{ 272 | width:100%; 273 | height:auto; 274 | overflow:hidden; 275 | } 276 | .topic{ 277 | position:relative; 278 | } 279 | .topic_tou{ 280 | width:48px; 281 | height:48px; 282 | float:left; 283 | margin-right:10px; 284 | } 285 | .topic-title{ 286 | font-size:16px; 287 | float:left; 288 | margin-right:300px; 289 | margin-bottom:6px; 290 | } 291 | .topic-title a{ 292 | text-decoration:none; 293 | color: #4d5256; 294 | } 295 | .topic-title a:hover{ 296 | color: #4d5256; 297 | } 298 | .topic-jie{ 299 | margin-left:10px; 300 | } 301 | .list-meta-node{ 302 | margin-left:10px; 303 | } 304 | .topic-huifu{ 305 | position:absolute; 306 | top:20px; 307 | background:#666; 308 | border-radius:5px; 309 | right:20px; 310 | display:block; 311 | width:15px; 312 | height:20px; 313 | padding: 0 4px; 314 | color:#fff; 315 | } 316 | .list-meta { 317 | color: #aaa; 318 | } 319 | .list-meta-node{ 320 | background-color: #eee; 321 | border-radius: 2px; 322 | color: #aaa; 323 | display: inline-block; 324 | font-size: 12px; 325 | line-height: 1.25; 326 | padding: 3px 5px; 327 | text-decoration: none; 328 | margin-left:0; 329 | } 330 | .list-meta-node a{ 331 | color: #aaa; 332 | } 333 | .list-meta-node a:hover{ 334 | color: #aaa; 335 | text-decoration: none; 336 | } 337 | .list-time { 338 | color: #aaa; 339 | font-size: 11px; 340 | } 341 | .list-username a { 342 | color: #666; 343 | font-size: 12px; 344 | } 345 | .list-username a:hover{ 346 | color: #666; 347 | } 348 | /*分页开始*/ 349 | .pager-bg { 350 | background: #fff none repeat scroll 0 0; 351 | font-size: 0; 352 | padding-left: 15px; 353 | margin-bottom:20px; 354 | } 355 | .pagination { 356 | border-radius: 4px; 357 | display: inline-block; 358 | margin: 0; 359 | padding-left: 0; 360 | } 361 | .pagination > li { 362 | display: inline; 363 | } 364 | /*右侧开始*/ 365 | .panel { 366 | border-radius: 0; 367 | } 368 | .welcome-box .site-name { 369 | font-size: 16px; 370 | font-weight: bold; 371 | line-height: 1.5; 372 | margin: 0; 373 | } 374 | .welcome-box p { 375 | color: #999; 376 | } 377 | .welcome-box div { 378 | text-align: center; 379 | } 380 | .btn, .input { 381 | border-radius: 3px; 382 | } 383 | .welcome-box p { 384 | color: #999; 385 | } 386 | .welcome-box a { 387 | margin-bottom: 10px; 388 | } 389 | .panel-heading, .panel-body { 390 | padding: 8px 10px; 391 | } 392 | .viewer-list-avatar { 393 | display: inline-block; 394 | padding: 5px; 395 | } 396 | .panel-body img, .append-content img { 397 | height: auto !important; 398 | max-width: 100% !important; 399 | } 400 | .viewer-list-avatar img { 401 | border-radius: 2px; 402 | width: 100%; 403 | } 404 | .viewer-list-avatar img { 405 | border-radius: 2px; 406 | width: 100%; 407 | } 408 | .tags { 409 | font-size: 0; 410 | } 411 | .tags .tag { 412 | background-color: #e6e6e6; 413 | border-radius: 2px; 414 | color: #888; 415 | display: inline-block; 416 | font-size: 12px; 417 | line-height: 1.5; 418 | margin-bottom: 5px; 419 | margin-right: 5px; 420 | padding: 0.2em 8px; 421 | } 422 | .list-group .list-group-item { 423 | padding: 8px 10px; 424 | } 425 | .latest-topic-list { 426 | font-size: 12px; 427 | overflow: hidden; 428 | text-overflow: ellipsis; 429 | white-space: nowrap; 430 | } 431 | 432 | /*end*/ 433 | /*底部开始*/ 434 | footer{ 435 | width:100%; 436 | height:auto; 437 | overflow:hidden; 438 | border-top:1px solid #DDDDDD; 439 | margin-bottom:20px; 440 | } 441 | footer .foot{ 442 | width:1040px; 443 | height:120px; 444 | padding-top:20px; 445 | margin:0 auto; 446 | color: #666; 447 | font-size: 12px; 448 | text-align: center; 449 | } 450 | .foot p{ 451 | margin-bottom:10px; 452 | } 453 | .foot a:hover{ 454 | text-decoration:underline; 455 | } 456 | 457 | 458 | 459 | 460 | 461 | 462 | -------------------------------------------------------------------------------- /css/dilates.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | li{ 10 | list-style:none; 11 | } 12 | .cl{ 13 | clear:both; 14 | } 15 | body{ 16 | background: rgb(245, 245, 245) none repeat scroll 0 0; 17 | font-family: "HanHei SC","PingFang SC","Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei","STHeitiSC-Light","Arial","Segoe UI",sans-serif; 18 | height: 100%; 19 | line-height: 1.5; 20 | margin: 0; 21 | min-width: 1040px !important; 22 | overflow-wrap: break-word; 23 | width: 100%; 24 | } 25 | /*顶部开始*/ 26 | #top{ 27 | width:100%; 28 | height:35px; 29 | padding:5px 0px; 30 | border-bottom:1px solid #ddd; 31 | } 32 | .top_main{ 33 | width:1010px; 34 | height:35px; 35 | padding:0px 15px; 36 | line-height:21px; 37 | margin:0 auto; 38 | } 39 | .top_main_left p{ 40 | color:#777790; 41 | font-size:12px; 42 | float:left; 43 | margin-bottom:10px; 44 | } 45 | .top_main_right_2{ 46 | float:right; 47 | color:#777; 48 | font-size:12px; 49 | } 50 | .top_main_right_1{ 51 | float:right; 52 | color:#F00; 53 | font-size:12px; 54 | margin-left:10px; 55 | } 56 | .top_main_right a:hover{ 57 | text-decoration:underline; 58 | } 59 | /*header部分*/ 60 | header{ 61 | width:1025px; 62 | height:55px; 63 | padding:20px 0px; 64 | padding-left:15px; 65 | margin:0 auto; 66 | } 67 | .logo{ 68 | width:210px; 69 | height:50px; 70 | float:left; 71 | margin-top:-20px; 72 | } 73 | .search{ 74 | width:327px; 75 | height:50px; 76 | margin-top:5px; 77 | float:right; 78 | } 79 | input[type=search]{ 80 | width:241px; 81 | height:34px; 82 | padding:6px 12px; 83 | border:1px solid #ccc; 84 | margin-top:-1px; 85 | } 86 | input[type=submit]{ 87 | width:72px; 88 | height:34px; 89 | border:1px solid #2E6DA4; 90 | padding:6px 12px; 91 | margin-left:-5px; 92 | background:#337AB7; 93 | color:#fff; 94 | } 95 | input[type=submit]:hover{ 96 | background:#286090; 97 | } 98 | .tj{ 99 | margin-top:5px; 100 | font-size:12px; 101 | } 102 | .tj a{ 103 | margin-right:5px; 104 | } 105 | .tj a:first-child{ 106 | margin-left:20px; 107 | } 108 | .tj a:hover{ 109 | text-decoration:underline; 110 | } 111 | /*导航开始*/ 112 | nav{ 113 | width:100%; 114 | height:40px; 115 | margin-bottom:20px; 116 | background:; 117 | margin-top: 40px; 118 | } 119 | .nav{ 120 | width:1010px; 121 | height:40px; 122 | padding:0px 15px; 123 | margin:0 auto; 124 | background:; 125 | overflow:hidden; 126 | 127 | } 128 | /*翻转导航开始*/ 129 | .nav:after{ 130 | content:''; 131 | display:block; 132 | overflow:hidden; 133 | clear:both; 134 | } 135 | .nav_item{ 136 | width:100px; 137 | height:40px; 138 | float:left; 139 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 140 | perspective:4000px; 141 | -webkit-perspective:4000px; 142 | -moz-perspective:4000px; 143 | -0-perspective:4000px; 144 | -ms-perspective:4000px; 145 | } 146 | .nav_item a{ 147 | margin-right:5px; 148 | height:40px; 149 | display:block; 150 | transition:all 500ms ease 0s; 151 | -webkit-transform-style:preserve-3d; 152 | -moz-transform-style:preserve-3d; 153 | -0-transform-style:preserve-3d; 154 | -ms-transform-style:preserve-3d; 155 | /*.nav_item的子元素可以呈3d效果*/ 156 | transform-style:preserve-3d; 157 | } 158 | .nav_item a p{ 159 | height:40px; 160 | line-height:40px; 161 | margin:0; 162 | border-radius:5px; 163 | font-size:14px; 164 | font-size:"黑体"; 165 | text-align:center; 166 | transition:all 500ms ease 0s; 167 | } 168 | .nav_item a{ 169 | text-decoration:none; 170 | } 171 | .nav_item a p:first-child{ 172 | border-radius:5px; 173 | color:#fff; 174 | background:#ff7434; 175 | /*沿z轴移动50橡素 20px高度除以2*/ 176 | transform:translateZ(20px); 177 | -webkit-transform:translateZ(20px); 178 | -moz-transform:translateZ(20px); 179 | -0-transform:translateZ(20px); 180 | -ms-transform:translateZ(20px); 181 | } 182 | .nav_item a p:last-child{ 183 | border-radius:5px; 184 | color:#fff; 185 | background:#85bc00; 186 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 187 | transform:translateZ(20px) rotateX(-90deg); 188 | -webkit-transform:translateZ(20px) rotateX(-90deg); 189 | -moz-transform:translateZ(20px) rotateX(-90deg); 190 | -0-transform:translateZ(20px) rotateX(-90deg); 191 | -ms-transform:translateZ(20px) rotateX(-90deg); 192 | /*设置上边距为-20px 20px高度除以2*/ 193 | margin-top:-20px; 194 | } 195 | .nav_item a:hover{ 196 | margin-top:0px; 197 | transform:rotateX(90deg); 198 | -webkit-transform:rotateX(90deg); 199 | -moz-transform:rotateX(90deg); 200 | -0-transform:rotateX(90deg); 201 | -ms-transform:rotateX(90deg); 202 | } 203 | .nav_item a:hover p:last-child{ 204 | margin-top:0px; 205 | transform:translateZ(0) rotateX(-90deg); 206 | -webkit-transform:translateZ(0) rotateX(-90deg); 207 | -moz-transform:translateZ(0) rotateX(-90deg); 208 | -0-transform:translateZ(0) rotateX(-90deg); 209 | -ms-transform:translateZ(0) rotateX(-90deg); 210 | } 211 | nav>.nav>li{ 212 | width:100px; 213 | height:40px; 214 | background:#ff7434; 215 | float:right; 216 | margin-right:5px; 217 | border-radius:5px; 218 | line-height:40px; 219 | text-align:center; 220 | font-size:14px; 221 | } 222 | nav>.nav>li>a{ 223 | color:#fff; 224 | text-decoration:none; 225 | padding:0; 226 | } 227 | .nav li:hover a{ 228 | color:red; 229 | } 230 | 231 | /*end------------------*/ 232 | /*网站主题*/ 233 | .container { 234 | width: 1040px !important; 235 | margin-left: auto; 236 | margin-right: auto; 237 | padding-left: 15px; 238 | padding-right: 15px; 239 | margin-bottom:30px; 240 | } 241 | .container-fluid { 242 | margin-left: auto; 243 | margin-right: auto; 244 | padding-left: 15px; 245 | padding-right: 15px; 246 | } 247 | .breadcrumb { 248 | background: #fff none repeat scroll 0 0; 249 | padding: 0; 250 | list-style: outside none none; 251 | border-radius: 4px; 252 | margin-top:0; 253 | } 254 | .breadcrumb > li { 255 | display: inline-block; 256 | } 257 | .breadcrumb > li + li::before { 258 | color: #ccc; 259 | content: "/ "; 260 | padding: 0 5px; 261 | } 262 | .breadcrumb > .active { 263 | color: #777; 264 | } 265 | .breadcrumb a{ 266 | color: #337ab7; 267 | text-decoration: none; 268 | background-color: transparent; 269 | font-size:14px; 270 | } 271 | .breadcrumb span{ 272 | text-decoration: none; 273 | background-color: transparent; 274 | font-size:14px; 275 | color: #999; 276 | } 277 | .movie-info h1 { 278 | color: #494949; 279 | font-size: 26px; 280 | line-height: 1.5; 281 | margin: 0 0 10px; 282 | overflow: hidden; 283 | padding: 0; 284 | width: 100%; 285 | } 286 | .movie-info h1 span { 287 | color: #888; 288 | display: inline-block; 289 | } 290 | .movie-introduce { 291 | color: #666; 292 | } 293 | .padding-right-0{ 294 | padding-right:0; 295 | } 296 | .movie-post{ 297 | display:block; 298 | width:246px; 299 | height:345px; 300 | position: relative; 301 | } 302 | .img-thumbnail{ 303 | display: inline-block; 304 | width:246px; 305 | height:345px; 306 | border-radius: 4px; 307 | background-color: #fff; 308 | border: 1px solid #ddd; 309 | padding:1px; 310 | border-radius: 0; 311 | } 312 | .hdtag { 313 | background: #09c878 none repeat scroll 0 0; 314 | } 315 | .qtag { 316 | border: medium none; 317 | bottom: 0; 318 | color: #fff; 319 | font-size: 12px; 320 | padding: 0 3px; 321 | position: absolute; 322 | right: 0; 323 | } 324 | em { 325 | color: #8c8c8c; 326 | font-size: 12px; 327 | font-style: normal; 328 | } 329 | .span2 { 330 | text-align: right; 331 | vertical-align: middle !important; 332 | width: 60px; 333 | vertical-align: middle; 334 | padding: 5px; 335 | } 336 | .score { 337 | border-radius: 2px; 338 | color: green; 339 | display: inline-block; 340 | font-weight: bold; 341 | text-align: center; 342 | } 343 | .imdb { 344 | border-radius: 2px; 345 | color: rgb(219, 167, 22); 346 | display: inline-block; 347 | font-weight: bold; 348 | text-align: center; 349 | } 350 | .movie-info h2 { 351 | border-left: 4px solid #09c878; 352 | font-size: 16px; 353 | line-height: 1.2; 354 | padding: 2px 0 2px 10px; 355 | } 356 | .movie-introduce { 357 | color: #666; 358 | } 359 | .movie-introduce p{ 360 | margin: 0 0 10px; 361 | } 362 | .tags { 363 | font-size: 0; 364 | } 365 | .tags .tag { 366 | background-color: #e6e6e6; 367 | border-radius: 2px; 368 | color: #888; 369 | display: inline-block; 370 | font-size: 12px; 371 | line-height: 1.5; 372 | margin-bottom: 5px; 373 | margin-right: 5px; 374 | padding: 0.2em 8px; 375 | } 376 | .tags .tag:hover { 377 | background: rgb(95, 170, 254) none repeat scroll 0 0; 378 | color: #fff; 379 | text-decoration: none; 380 | } 381 | .tags .tag.active { 382 | background: rgb(95, 170, 254) none repeat scroll 0 0; 383 | color: #fff; 384 | } 385 | .tags .tag.active:hover { 386 | color: #fff; 387 | cursor: default; 388 | text-decoration: none; 389 | } 390 | /*广告*/ 391 | .add{ 392 | width:760px; 393 | height:90px; 394 | margin-top:15px; 395 | } 396 | /*end-----------------*/ 397 | .movie-recommened { 398 | padding: 0 5px; 399 | } 400 | .movie-recommened a img { 401 | border: 1px solid #ccc; 402 | width:118px; 403 | height: 170px; 404 | padding: 1px; 405 | vertical-align: middle; 406 | } 407 | .item-hover { 408 | background: #000 none no-repeat scroll 10px 100px; 409 | font-size: 0; 410 | height: 0; 411 | opacity: 0.5; 412 | position: absolute; 413 | top: 0; 414 | width: 100%; 415 | } 416 | .movie-recommened h5 { 417 | color: #666; 418 | font-size: 12px; 419 | height: 24px; 420 | line-height: 24px; 421 | margin: 0; 422 | overflow: hidden; 423 | text-align: center; 424 | width: 100%; 425 | } 426 | .nav-tabs{ 427 | width:760px; 428 | } 429 | .nav-tabs > li > a { 430 | border: 1px solid transparent; 431 | border-radius: 0; 432 | line-height: 1.42857; 433 | margin-right: 2px; 434 | text-decoration:none; 435 | } 436 | .nav-tabs > li > a:hover{ 437 | color:#07a7e1; 438 | text-decoration:none; 439 | } 440 | .badge { 441 | background-color: #07a7e1; 442 | border-radius: 2px; 443 | vertical-align: text-bottom; 444 | } 445 | .resource-list { 446 | margin-top: 15px; 447 | } 448 | .panel { 449 | border-radius: 0; 450 | } 451 | .panel-heading, .panel-body { 452 | padding: 8px 10px; 453 | } 454 | .ed2k-icon, .magnet-icon, .res-info-btn { 455 | background-color: #dfdfdf; 456 | border-radius: 2px; 457 | color: #999; 458 | cursor: default; 459 | display: inline-block; 460 | line-height: 22px; 461 | padding: 0 5px; 462 | text-decoration: none; 463 | width: 40px; 464 | } 465 | .text-break { 466 | overflow-wrap: break-word; 467 | word-break: break-all; 468 | } 469 | .resource-help { 470 | color: #777; 471 | padding: 10px; 472 | } 473 | .dline { 474 | border-top: 1px dashed #ccc; 475 | clear: both; 476 | margin: 5px 0 15px; 477 | width: 100%; 478 | } 479 | .reply-box { 480 | margin: 20px 0 30px; 481 | } 482 | .alert-x { 483 | border: 1px solid #d9edf7; 484 | border-radius: 3px; 485 | padding: 10px; 486 | } 487 | .online-play-btn { 488 | background: #e8e8e8 none repeat scroll 0 0; 489 | border: 1px solid #ccc; 490 | border-radius: 2px; 491 | color: #666; 492 | display: inline-block; 493 | line-height: 22px; 494 | margin-right: 10px; 495 | padding-right: 8px; 496 | vertical-align: middle; 497 | } 498 | .online-play-btn:hover { 499 | color: #333; 500 | text-decoration: none; 501 | } 502 | .online-play-btn img { 503 | border-radius: 2px; 504 | display: inline-block; 505 | height: 22px; 506 | margin-right: 5px; 507 | vertical-align: top; 508 | width: 22px; 509 | } 510 | /*右侧栏*/ 511 | .sidebar h3 { 512 | border-left: 4px solid #dd5862; 513 | color: #666; 514 | font-size: 16px; 515 | line-height: 20px; 516 | margin-bottom: 10px; 517 | margin-top: 20px; 518 | padding-left: 10px; 519 | } 520 | .viewer-list { 521 | clear: both; 522 | padding: 5px 10px; 523 | } 524 | .viewer-list-avatar { 525 | display: inline-block; 526 | padding: 5px; 527 | } 528 | .viewer-list-avatar > a { 529 | display: block; 530 | width: 100%; 531 | } 532 | .viewer-list-avatar img { 533 | margin-left:-20px; 534 | width:43px; 535 | height:43px; 536 | border-radius: 2px; 537 | } 538 | .sidebar .list-group .list-group-item { 539 | background: transparent none repeat scroll 0 0; 540 | border-left: medium none; 541 | border-radius: 0; 542 | border-right: medium none; 543 | overflow: hidden; 544 | padding: 6.2px 5px; 545 | white-space: nowrap; 546 | width: 100%; 547 | word-break: keep-all; 548 | } 549 | .square-item-red { 550 | background: red none repeat scroll 0 0; 551 | color: #fff; 552 | display: inline-block; 553 | margin-right: 5px; 554 | text-align: center; 555 | width: 1.5em; 556 | } 557 | .square-item-blue { 558 | background: #07a7e1 none repeat scroll 0 0; 559 | color: #fff; 560 | display: inline-block; 561 | margin-right: 5px; 562 | text-align: center; 563 | width: 1.5em; 564 | } 565 | .movie-item-in:hover { 566 | background: #ccc none repeat scroll 0 0; 567 | box-shadow: 0 2px 5px #ccc; 568 | outline: 1px solid #ddd; 569 | } 570 | .movie-recommened:hover .item-hover, .movie-item-in:hover .item-hover { 571 | background-image: url("../images/play-icon.png"); 572 | background-position: center center; 573 | height: 100%; 574 | width:118px; 575 | } 576 | .item-hover { 577 | background: #000 none no-repeat scroll 10px 100px; 578 | font-size: 0; 579 | height: 0; 580 | opacity: 0.5; 581 | position: absolute; 582 | top: 0; 583 | width: 100%; 584 | } 585 | .sidebar .list-group .list-group-item:hover { 586 | background: #ddd none repeat scroll 0 0; 587 | border-bottom: 1px solid #ddd; 588 | border-top: 1px solid #ddd; 589 | color: #333; 590 | } 591 | /*底部开始*/ 592 | footer{ 593 | width:100%; 594 | height:auto; 595 | overflow:hidden; 596 | border-top:1px solid #DDDDDD; 597 | margin-bottom:20px; 598 | } 599 | .foot{ 600 | width:1040px; 601 | height:120px; 602 | padding-top:20px; 603 | margin:0 auto; 604 | color: #666; 605 | font-size: 12px; 606 | text-align: center; 607 | } 608 | .foot p{ 609 | margin-bottom:10px; 610 | } 611 | .foot a:hover{ 612 | text-decoration:underline; 613 | } 614 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | li{ 10 | list-style:none; 11 | } 12 | .cl{ 13 | clear:both; 14 | } 15 | body{ 16 | background:#F1F1EF; 17 | } 18 | /*顶部开始*/ 19 | #top{ 20 | width:100%; 21 | height:21px; 22 | padding:5px 0px; 23 | border-bottom:1px solid #ddd; 24 | } 25 | .top_main{ 26 | width:1010px; 27 | height:21px; 28 | padding:0px 15px; 29 | line-height:21px; 30 | margin:0 auto; 31 | } 32 | .top_main_left p{ 33 | color:#777790; 34 | font-size:12px; 35 | float:left; 36 | } 37 | .top_main_right_2{ 38 | float:right; 39 | color:#777; 40 | font-size:12px; 41 | } 42 | .top_main_right_1{ 43 | float:right; 44 | color:#F00; 45 | font-size:12px; 46 | margin-left:10px; 47 | } 48 | .top_main_right a:hover{ 49 | text-decoration:underline; 50 | } 51 | /*header部分*/ 52 | header{ 53 | width:1025px; 54 | height:55px; 55 | padding:20px 0px; 56 | padding-left:15px; 57 | margin:0 auto; 58 | } 59 | .logo{ 60 | width:210px; 61 | height:50px; 62 | float:left; 63 | } 64 | .search{ 65 | width:327px; 66 | height:50px; 67 | margin-top:5px; 68 | float:right; 69 | } 70 | input[type=search]{ 71 | width:241px; 72 | height:34px; 73 | padding:6px 12px; 74 | border:1px solid #ccc; 75 | margin-top:-1px; 76 | } 77 | input[type=submit]{ 78 | width:72px; 79 | height:34px; 80 | border:1px solid #2E6DA4; 81 | padding:6px 12px; 82 | margin-left:-5px; 83 | background:#337AB7; 84 | color:#fff; 85 | } 86 | input[type=submit]:hover{ 87 | background:#286090; 88 | } 89 | .tj{ 90 | margin-top:5px; 91 | font-size:12px; 92 | } 93 | .tj a{ 94 | margin-right:5px; 95 | } 96 | .tj a:first-child{ 97 | margin-left:20px; 98 | } 99 | .tj a:hover{ 100 | text-decoration:underline; 101 | } 102 | /*导航开始*/ 103 | nav{ 104 | width:100%; 105 | height:40px; 106 | margin-bottom:20px; 107 | background:; 108 | } 109 | .nav{ 110 | width:1010px; 111 | height:40px; 112 | padding:0px 15px; 113 | margin:0 auto; 114 | background:; 115 | overflow:hidden; 116 | 117 | } 118 | /*翻转导航开始*/ 119 | .nav:after{ 120 | content:''; 121 | display:block; 122 | overflow:hidden; 123 | clear:both; 124 | } 125 | .nav_item{ 126 | width:100px; 127 | height:40px; 128 | float:left; 129 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 130 | perspective:4000px; 131 | -webkit-perspective:4000px; 132 | -moz-perspective:4000px; 133 | -0-perspective:4000px; 134 | -ms-perspective:4000px; 135 | } 136 | .nav_item a{ 137 | margin-right:5px; 138 | height:40px; 139 | display:block; 140 | transition:all 500ms ease 0s; 141 | -webkit-transform-style:preserve-3d; 142 | -moz-transform-style:preserve-3d; 143 | -0-transform-style:preserve-3d; 144 | -ms-transform-style:preserve-3d; 145 | /*.nav_item的子元素可以呈3d效果*/ 146 | transform-style:preserve-3d; 147 | } 148 | .nav_item a p{ 149 | height:40px; 150 | line-height:40px; 151 | margin:0; 152 | border-radius:5px; 153 | font-size:14px; 154 | font-size:"黑体"; 155 | text-align:center; 156 | transition:all 500ms ease 0s; 157 | } 158 | .nav_item a p:first-child{ 159 | border-radius:5px; 160 | color:#fff; 161 | background:#ff7434; 162 | /*沿z轴移动50橡素 20px高度除以2*/ 163 | transform:translateZ(20px); 164 | -webkit-transform:translateZ(20px); 165 | -moz-transform:translateZ(20px); 166 | -0-transform:translateZ(20px); 167 | -ms-transform:translateZ(20px); 168 | } 169 | .nav_item a p:last-child{ 170 | border-radius:5px; 171 | color:#fff; 172 | background:#85bc00; 173 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 174 | transform:translateZ(20px) rotateX(-90deg); 175 | -webkit-transform:translateZ(20px) rotateX(-90deg); 176 | -moz-transform:translateZ(20px) rotateX(-90deg); 177 | -0-transform:translateZ(20px) rotateX(-90deg); 178 | -ms-transform:translateZ(20px) rotateX(-90deg); 179 | /*设置上边距为-20px 20px高度除以2*/ 180 | margin-top:-20px; 181 | } 182 | .nav_item a:hover{ 183 | margin-top:0px; 184 | transform:rotateX(90deg); 185 | -webkit-transform:rotateX(90deg); 186 | -moz-transform:rotateX(90deg); 187 | -0-transform:rotateX(90deg); 188 | -ms-transform:rotateX(90deg); 189 | } 190 | .nav_item a:hover p:last-child{ 191 | margin-top:0px; 192 | transform:translateZ(0) rotateX(-90deg); 193 | -webkit-transform:translateZ(0) rotateX(-90deg); 194 | -moz-transform:translateZ(0) rotateX(-90deg); 195 | -0-transform:translateZ(0) rotateX(-90deg); 196 | -ms-transform:translateZ(0) rotateX(-90deg); 197 | } 198 | .nav li{ 199 | width:100px; 200 | height:40px; 201 | background:#ff7434; 202 | float:right; 203 | margin-right:5px; 204 | border-radius:5px; 205 | line-height:40px; 206 | text-align:center; 207 | font-size:14px; 208 | } 209 | .nav li a{ 210 | color:#fff; 211 | } 212 | .nav li:hover a{ 213 | color:red; 214 | } 215 | /*公告*/ 216 | .gg{ 217 | width:970px; 218 | height:21px; 219 | padding:5px 20px; 220 | border:2px dashed #ccc; 221 | border-radius:5px; 222 | margin:0 auto; 223 | color:#3c763d; 224 | background:#dff0d8; 225 | margin-bottom:10px; 226 | } 227 | /*以后这里放轮播图*/ 228 | /*轮播图开始*/ 229 | .out { 230 | width:1010px; 231 | height:450px; 232 | margin:0 auto; 233 | border:1px solid transparent; 234 | border-radius:10px; 235 | margin-bottom:10px; 236 | position: relative; 237 | } 238 | .hot{ 239 | width:150px; 240 | height:150px; 241 | position: absolute; 242 | left:0; 243 | top:0; 244 | z-index:99; 245 | } 246 | .out .img li { 247 | position: absolute; 248 | left:0; 249 | top:0; 250 | display: none; 251 | } 252 | .out .num { 253 | position: absolute; 254 | bottom: 20px; 255 | left: 0; 256 | font-size:0px; 257 | text-align:center; 258 | width: 100%; 259 | } 260 | .out .num li { 261 | width: 20px; 262 | height: 20px; 263 | line-height:20px; 264 | border-radius:50%; 265 | background:#666; 266 | color: #fff; 267 | text-align:center; 268 | display: inline-block; 269 | font-size:16px; 270 | margin:0 3px; 271 | cursor: pointer; 272 | } 273 | .out .num li.active_lun { 274 | background:#a00; 275 | } 276 | .out .btn { 277 | position:absolute; 278 | top: 50%; 279 | margin-top:-30px; 280 | width: 30px; 281 | height: 60px; 282 | line-height:60px; 283 | background:rgba(0, 0, 0, 0.5); 284 | font-size:40px; 285 | color: #fff; 286 | text-align:center; 287 | display: none; 288 | } 289 | .out .left { 290 | left: 0; 291 | } 292 | .out .right { 293 | right: 0; 294 | } 295 | .out .right-btn{ 296 | width:10px; 297 | height:60px; 298 | } 299 | .out:hover .btn { 300 | display: block; 301 | cursor: pointer; 302 | } 303 | 304 | /*11111111111111111111111*/ 305 | .menu{ 306 | width:1030px; 307 | height:162px; 308 | margin:0 auto; 309 | margin-bottom:15px; 310 | } 311 | .box-line{ 312 | width:50%; 313 | margin:0 auto 15px; 314 | font-size: 16px; 315 | position: relative; 316 | color: #777; 317 | text-align:center; 318 | overflow: hidden; 319 | } 320 | .box-line span{ 321 | display: inline-block; 322 | position:relative; 323 | color:block; 324 | font-weight:bold; 325 | } 326 | .box-line>span:before, .box-line>span:after{ 327 | content:""; 328 | position: relative; 329 | top:50%; 330 | position: absolute; 331 | width:9999px; 332 | height:1px; 333 | background:#CCC; 334 | } 335 | .box-line>span:before{ 336 | right: 100%; 337 | margin-right: 15px; 338 | } 339 | .box-line>span:after{ 340 | left: 100%; 341 | margin-left: 15px; 342 | } 343 | .menu_item{ 344 | width:1030px; 345 | height:162px; 346 | padding:0px 5px; 347 | 348 | overflow:hidden; 349 | } 350 | .menu_item:after{ 351 | content:''; 352 | display:block; 353 | overflow:hidden; 354 | clear:both; 355 | } 356 | .menu_item_img{ 357 | overflow:hidden; 358 | width:238px; 359 | height:162px; 360 | padding:0px 9px; 361 | float:left; 362 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 363 | perspective:4000px; 364 | -webkit-perspective:4000px; 365 | -moz-perspective:4000px; 366 | -0-perspective:4000px; 367 | -ms-perspective:4000px; 368 | } 369 | .menu_item_img a{ 370 | height:162px; 371 | display:block; 372 | transition:all 500ms ease 0s; 373 | /*。item的子元素可以呈3d效果*/ 374 | transform-style:preserve-3d; 375 | -webkit-transform-style:preserve-3d; 376 | -moz-transform-style:preserve-3d; 377 | -0-transform-style:preserve-3d; 378 | -ms-transform-style:preserve-3d; 379 | } 380 | .menu_item_img a img{ 381 | width:238px; 382 | height:162px; 383 | transition:all 500ms ease 0s; 384 | } 385 | .menu_item_img a img:first-child{ 386 | 387 | /*沿z轴移动81橡素 81px是高度除以2*/ 388 | transform:translateZ(81px); 389 | -webkit-transform:translateZ(81px); 390 | -moz-transform:translateZ(81px); 391 | -0-transform:translateZ(81px); 392 | -ms-transform:translateZ(81px); 393 | } 394 | .menu_item_img a img:last-child{ 395 | 396 | /*沿z轴移动81橡素 沿X轴旋转-90度 81px是高度除以2*/ 397 | transform:translateZ(81px) rotateX(-90deg); 398 | -webkit-transform:translateZ(81px) rotateX(-90deg); 399 | -moz-transform:translateZ(81px) rotateX(-90deg); 400 | -0-transform:translateZ(81px) rotateX(-90deg); 401 | -ms-transform:translateZ(81px) rotateX(-90deg); 402 | /*设置上边距为-81px 81px是高度除以2*/ 403 | margin-top:-81px; 404 | } 405 | .menu_item_img a:hover{ 406 | margin-top:0px; 407 | transform:rotateX(90deg); 408 | -webkit-transform:rotateX(90deg); 409 | -moz-transform:rotateX(90deg); 410 | -0-transform:rotateX(90deg); 411 | -ms-transform:rotateX(90deg); 412 | } 413 | .menu_item_img a:hover img:last-child{ 414 | margin-top:0px; 415 | transform:translateZ(0) rotateX(-90deg); 416 | -webkit-transform:translateZ(0) rotateX(-90deg); 417 | -moz-transform:translateZ(0) rotateX(-90deg); 418 | -0-transform:translateZ(0) rotateX(-90deg); 419 | -ms-transform:translateZ(0) rotateX(-90deg); 420 | } 421 | .menu_item_img_title{ 422 | color:red; 423 | } 424 | /**/ 425 | main{ 426 | width:1040px; 427 | height:auto; 428 | overflow:hidden; 429 | margin:0 auto; 430 | } 431 | .main{ 432 | width:760px; 433 | height:784px; 434 | float:left; 435 | } 436 | .main_title{ 437 | width:764px; 438 | height:20px; 439 | padding-left:10px; 440 | border-left:4px solid #DD5862; 441 | margin-top:20px; 442 | margin-bottom:5px; 443 | line-height:20px; 444 | } 445 | .main_title h3{ 446 | font-size:20px; 447 | font-weight:400; 448 | color:#666; 449 | float:left; 450 | } 451 | .main_title a{ 452 | font-size:14px; 453 | color:#666; 454 | float:right; 455 | } 456 | .main_title a:hover{ 457 | text-decoration:underline; 458 | } 459 | .main_item{ 460 | width:175px; 461 | height:302px; 462 | padding:10px 7px; 463 | float:left; 464 | } 465 | .main_item_img{ 466 | display:block; 467 | width:175px; 468 | height:250px; 469 | position:relative; 470 | } 471 | .main_item_img_tu{ 472 | width:175px; 473 | height:250px; 474 | opacity:0.8; 475 | } 476 | .main_item_title{ 477 | width:165px; 478 | height:42px; 479 | padding:5px; 480 | background:#fff; 481 | } 482 | .main_item_title h1{ 483 | height:17px; 484 | font-size: 14px; 485 | line-height: 17px; 486 | overflow: hidden; 487 | width: 100%; 488 | font-weight: 500 489 | } 490 | .main_item_title h1 em{ 491 | color: #8c8c8c; 492 | font-size: 12px; 493 | font-style: normal; 494 | } 495 | .main_item_title_lei{ 496 | color: #7e7e7e; 497 | font-size: 12px; 498 | font-weight: normal; 499 | height: 20px; 500 | line-height: 20px; 501 | margin-top: 5px; 502 | overflow: hidden; 503 | width: 100% 504 | } 505 | .movietype{ 506 | background-color: rgb(230, 230, 230); 507 | border-radius: 2px; 508 | color: #999; 509 | display: inline-block; 510 | font-size: 12px; 511 | line-height: 1.2; 512 | margin: 0 5px 5px 0; 513 | padding: 2px 5px; 514 | } 515 | .main_item_ico{ 516 | width:70px; 517 | height:70px; 518 | position:absolute; 519 | top:85px; 520 | left:50px; 521 | display:none; 522 | } 523 | .cq{ 524 | position:absolute; 525 | bottom:0px; 526 | right:0px; 527 | display:block; 528 | width:35px; 529 | height:20px; 530 | line-height:20px; 531 | text-align:center; 532 | font-size:12px; 533 | background:#337AB7; 534 | color:#fff; 535 | } 536 | .main_item:hover .main_item_ico{ 537 | display:block; 538 | } 539 | .main_item:hover .main_item_img_tu{ 540 | opacity:1; 541 | } 542 | .main_item:hover{ 543 | box-shadow:8px 8px 20px 1px #e0e0e0; 544 | } 545 | .main_add{ 546 | width:760px; 547 | height:90px; 548 | background:red; 549 | margin-top:15px; 550 | } 551 | .main_add{ 552 | text-align:center; 553 | line-height:90px; 554 | } 555 | .right{ 556 | width:230px; 557 | height:810px; 558 | padding-left:10px; 559 | padding-right:15px; 560 | float:right; 561 | } 562 | .right_title{ 563 | width:216px; 564 | height:20px; 565 | padding-left:10px; 566 | margin-top:20px; 567 | margin-bottom:10px; 568 | border-left:4px solid #DD5862; 569 | } 570 | .right_title h3{ 571 | font-size:16px; 572 | font-weight:400; 573 | color:#666; 574 | line-height:20px; 575 | } 576 | .list-group{ 577 | padding-left: 0; 578 | } 579 | .list-group-item{ 580 | width:220px; 581 | height:21px; 582 | color:#555; 583 | border-top: 1px solid #ddd; 584 | border-bottom: 1px solid #ddd; 585 | display: block; 586 | margin-bottom: -1px; 587 | padding: 6px 5px; 588 | position: relative; 589 | font-size:14px; 590 | } 591 | .square-item-red{ 592 | background:red; 593 | color: #fff; 594 | display: inline-block; 595 | margin-right: 5px; 596 | text-align: center; 597 | width: 20px; 598 | height:20px; 599 | line-height:20px; 600 | } 601 | .square-item-blue{ 602 | background:#07A7E1; 603 | color: #fff; 604 | display: inline-block; 605 | margin-right: 5px; 606 | text-align: center; 607 | width: 20px; 608 | height:20px; 609 | line-height:20px; 610 | } 611 | .list-group-item:hover{ 612 | background:#ddd; 613 | } 614 | .right_title2{ 615 | margin-top:10px; 616 | width:216px; 617 | height:20px; 618 | padding-left:10px; 619 | margin-top:20px; 620 | margin-bottom:10px; 621 | border-left:4px solid #DD5862; 622 | } 623 | .right_title2 h3{ 624 | font-size:18px; 625 | font-weight:400; 626 | color:#666; 627 | line-height:20px; 628 | } 629 | /*电视剧推荐*/ 630 | .main2{ 631 | width:1030px; 632 | height:290px; 633 | padding:0px 15px; 634 | margin:0 auto; 635 | margin-top:20px; 636 | 637 | } 638 | .main2_title{ 639 | width:100%; 640 | height:20px; 641 | padding-left:10px; 642 | border-left:4px solid #DD5862; 643 | margin-top:20px; 644 | margin-bottom:5px; 645 | line-height:20px; 646 | margin:10px -5px; 647 | } 648 | .main2_title h3{ 649 | font-size:20px; 650 | font-weight:400; 651 | color:#666; 652 | float:left; 653 | } 654 | .main2_title a{ 655 | font-size:14px; 656 | color:#666; 657 | float:right; 658 | } 659 | .main2_title a:hover{ 660 | text-decoration:underline; 661 | } 662 | .main2_item{ 663 | width:186px; 664 | height:265px; 665 | padding:0px 10px; 666 | float:left; 667 | margin-top:0px; 668 | transition:all 300ms ease 0s; 669 | } 670 | .main2_item_img{ 671 | width:186px; 672 | height:265px; 673 | position:relative; 674 | overflow:hidden; 675 | } 676 | .main2_item_img img{ 677 | width:186px; 678 | height:265px; 679 | } 680 | .main2_item_title{ 681 | 682 | width:176px; 683 | height:0px; 684 | overflow:hidden; 685 | padding:5px 5px 5px 5px; 686 | background:#fff; 687 | position:absolute; 688 | bottom:-10px; 689 | transition:all 500ms ease 0s; 690 | } 691 | .main2_item_title h1{ 692 | height:17px; 693 | font-size: 14px; 694 | line-height: 17px; 695 | overflow: hidden; 696 | width: 100%; 697 | font-weight: 500 698 | } 699 | .main2_item_title h1 em{ 700 | color: #8c8c8c; 701 | font-size: 12px; 702 | font-style: normal; 703 | } 704 | .main2_item_title_lei{ 705 | color: #7e7e7e; 706 | font-size: 12px; 707 | font-weight: normal; 708 | height: 20px; 709 | line-height: 20px; 710 | margin-top: 5px; 711 | overflow: hidden; 712 | width: 100% 713 | } 714 | .movietype2{ 715 | background-color:red; 716 | border-radius: 2px; 717 | color: #fff; 718 | display: inline-block; 719 | font-size: 12px; 720 | line-height: 1.2; 721 | margin: 0 5px 5px 0; 722 | padding: 2px 5px; 723 | } 724 | .gq{ 725 | position:absolute; 726 | top:0px; 727 | right:0px; 728 | display:block; 729 | width:35px; 730 | height:20px; 731 | line-height:20px; 732 | text-align:center; 733 | font-size:12px; 734 | background:#09C878; 735 | color:#fff; 736 | } 737 | .main2_item:hover .main2_item_title{ 738 | height:62px; 739 | } 740 | .main2_add{ 741 | width:1010px; 742 | height:20px; 743 | background:#fff; 744 | margin:20px auto; 745 | } 746 | .main2_item:hover{ 747 | margin-top:-5px; 748 | box-shadow:10px 10px 20px 5px #e0e0e0; 749 | } 750 | /*电影推荐*/ 751 | .main3{ 752 | width:1030px; 753 | height:290px; 754 | padding:0px 15px; 755 | margin:0 auto; 756 | margin-top:20px; 757 | 758 | } 759 | .main3_title{ 760 | width:100%; 761 | height:20px; 762 | padding-left:10px; 763 | border-left:4px solid #DD5862; 764 | margin-top:20px; 765 | margin-bottom:5px; 766 | line-height:20px; 767 | margin:10px -5px; 768 | overflow:hidden; 769 | margin-bottom:20px; 770 | } 771 | .main3_title h3{ 772 | font-size:20px; 773 | font-weight:400; 774 | color:#666; 775 | float:left; 776 | } 777 | .main3_title a{ 778 | font-size:14px; 779 | color:#666; 780 | float:right; 781 | } 782 | .main3_title a:hover{ 783 | text-decoration:underline; 784 | } 785 | .main3_item{ 786 | width:186px; 787 | height:265px; 788 | padding:0px 10px; 789 | float:left; 790 | margin-bottom:20px; 791 | } 792 | .main3_item_img{ 793 | width:186px; 794 | height:265px; 795 | position:relative; 796 | overflow:hidden; 797 | } 798 | .main3_item_img img{ 799 | width:186px; 800 | height:265px; 801 | transform:scale(1,1); 802 | transition:all 500ms ease 0s; 803 | } 804 | .main3_item_title{ 805 | 806 | width:176px; 807 | height:42px; 808 | overflow:hidden; 809 | padding:5px 5px 5px 5px; 810 | background:#fff; 811 | position:absolute; 812 | left:-186px; 813 | top:120px; 814 | transition:all 500ms ease 0s; 815 | } 816 | .main3_item_title h1{ 817 | height:17px; 818 | font-size: 14px; 819 | line-height: 17px; 820 | overflow: hidden; 821 | width: 100%; 822 | font-weight: 500 823 | } 824 | .main3_item_title h1 em{ 825 | color: #8c8c8c; 826 | font-size: 12px; 827 | font-style: normal; 828 | } 829 | .main3_item_title_lei{ 830 | color: #7e7e7e; 831 | font-size: 12px; 832 | font-weight: normal; 833 | height: 20px; 834 | line-height: 20px; 835 | margin-top: 5px; 836 | overflow: hidden; 837 | width: 100% 838 | } 839 | .movietype3{ 840 | background-color:#FF7434; 841 | border-radius: 2px; 842 | color: #fff; 843 | display: inline-block; 844 | font-size: 12px; 845 | line-height: 1.2; 846 | margin: 0 5px 5px 0; 847 | padding: 2px 5px; 848 | } 849 | .lg{ 850 | position:absolute; 851 | bottom:0px; 852 | right:0px; 853 | display:block; 854 | width:35px; 855 | height:20px; 856 | line-height:20px; 857 | text-align:center; 858 | font-size:12px; 859 | background:red; 860 | color:#fff; 861 | } 862 | .main3_item:hover .main3_item_title{ 863 | left:0px; 864 | top:0px; 865 | } 866 | .genduo{ 867 | display:block; 868 | line-height:20px; 869 | text-align:center; 870 | width:1010px; 871 | height:20px; 872 | padding:6px 0px; 873 | border:1px solid #398439; 874 | border-radius:5px; 875 | background:#5CB85C; 876 | margin:0 auto; 877 | color:#fff; 878 | font-size:14px; 879 | margin-top:10px; 880 | margin-bottom:30px; 881 | } 882 | .main3_item:hover{ 883 | box-shadow:10px 10px 20px 5px #e0e0e0; 884 | } 885 | .main3_item:hover .main3_item_img img{ 886 | transform:scale(1.1,1.1); 887 | -webkit-transform:scale(1.1,1.1); 888 | -moz-transform:scale(1.1,1.1); 889 | -o-transform:scale(1.1,1.1); 890 | -ms-transform:scale(1.1,1.1); 891 | } 892 | /*底部开始*/ 893 | footer{ 894 | width:100%; 895 | height:auto; 896 | overflow:hidden; 897 | border-top:1px solid #DDDDDD; 898 | margin-bottom:20px; 899 | } 900 | .foot{ 901 | width:1040px; 902 | height:120px; 903 | padding-top:20px; 904 | margin:0 auto; 905 | color: #666; 906 | font-size: 12px; 907 | text-align: center; 908 | } 909 | .foot p{ 910 | margin-bottom:10px; 911 | } 912 | .foot a:hover{ 913 | text-decoration:underline; 914 | } -------------------------------------------------------------------------------- /css/login.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding-top: 40px; 3 | padding-bottom: 40px; 4 | background: rgb(90,90,90) url('http://ww1.sinaimg.cn/large/0069qWFHgw1f0f9bags54j31hc0pzk3d.jpg') no-repeat fixed top; 5 | background-size:100% 100%; 6 | line-height: 1.5; 7 | } 8 | a{ 9 | text-decoration: none; 10 | margin: 0 3px; 11 | } 12 | .main-box{ 13 | margin:5% auto 0; 14 | background:#fff; 15 | width:350px; 16 | padding: 25px; 17 | } 18 | 19 | .form-control,.btn{ 20 | border-radius: 0; 21 | } 22 | .vcode{ 23 | display: inline-block; 24 | width: 100px; 25 | margin-right: 10px; 26 | } 27 | .form-header{ 28 | font-family: '宋体'; 29 | margin: 0 0 10px; 30 | text-align: center; 31 | } 32 | .form-header img{ 33 | height: 48px; 34 | width: 48px; 35 | } 36 | .extra{ 37 | font-size: 12px; 38 | display: inline-block; 39 | margin:10px 10px 0 0; 40 | } -------------------------------------------------------------------------------- /css/movie.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | li{ 10 | list-style:none; 11 | } 12 | .cl{ 13 | clear:both; 14 | } 15 | body{ 16 | background: rgb(245, 245, 245) none repeat scroll 0 0; 17 | font-family: "HanHei SC","PingFang SC","Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei","STHeitiSC-Light","Arial","Segoe UI",sans-serif; 18 | height: 100%; 19 | line-height: 1.5; 20 | margin: 0; 21 | min-width: 1040px !important; 22 | overflow-wrap: break-word; 23 | width: 100%; 24 | } 25 | 26 | /*顶部开始*/ 27 | #top{ 28 | width:100%; 29 | height:35px; 30 | padding:5px 0px; 31 | border-bottom:1px solid #ddd; 32 | } 33 | .top_main{ 34 | width:1010px; 35 | height:35px; 36 | padding:0px 15px; 37 | line-height:21px; 38 | margin:0 auto; 39 | } 40 | .top_main_left p{ 41 | color:#777790; 42 | font-size:12px; 43 | float:left; 44 | margin-bottom:10px; 45 | } 46 | .top_main_right_2{ 47 | float:right; 48 | color:#777; 49 | font-size:12px; 50 | } 51 | .top_main_right_1{ 52 | float:right; 53 | color:#F00; 54 | font-size:12px; 55 | margin-left:10px; 56 | } 57 | .top_main_right a:hover{ 58 | text-decoration:underline; 59 | } 60 | /*header部分*/ 61 | header{ 62 | width:1025px; 63 | height:55px; 64 | padding:20px 0px; 65 | padding-left:15px; 66 | margin:0 auto; 67 | } 68 | .logo{ 69 | width:210px; 70 | height:50px; 71 | float:left; 72 | margin-top:-20px; 73 | } 74 | .search{ 75 | width:327px; 76 | height:50px; 77 | margin-top:5px; 78 | float:right; 79 | } 80 | input[type=search]{ 81 | width:241px; 82 | height:34px; 83 | padding:6px 12px; 84 | border:1px solid #ccc; 85 | margin-top:-1px; 86 | } 87 | input[type=submit]{ 88 | width:72px; 89 | height:34px; 90 | border:1px solid #2E6DA4; 91 | padding:6px 12px; 92 | margin-left:-5px; 93 | background:#337AB7; 94 | color:#fff; 95 | } 96 | input[type=submit]:hover{ 97 | background:#286090; 98 | } 99 | .tj{ 100 | margin-top:5px; 101 | font-size:12px; 102 | } 103 | .tj a{ 104 | margin-right:5px; 105 | } 106 | .tj a:first-child{ 107 | margin-left:20px; 108 | } 109 | .tj a:hover{ 110 | text-decoration:underline; 111 | } 112 | /*导航开始*/ 113 | nav{ 114 | width:100%; 115 | height:40px; 116 | margin-bottom:20px; 117 | background:; 118 | margin-top: 40px; 119 | } 120 | .nav{ 121 | width:1010px; 122 | height:40px; 123 | padding:0px 15px; 124 | margin:0 auto; 125 | background:; 126 | overflow:hidden; 127 | 128 | } 129 | /*翻转导航开始*/ 130 | .nav:after{ 131 | content:''; 132 | display:block; 133 | overflow:hidden; 134 | clear:both; 135 | } 136 | .nav_item{ 137 | width:100px; 138 | height:40px; 139 | float:left; 140 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 141 | perspective:4000px; 142 | -webkit-perspective:4000px; 143 | -moz-perspective:4000px; 144 | -0-perspective:4000px; 145 | -ms-perspective:4000px; 146 | } 147 | .nav_item a{ 148 | margin-right:5px; 149 | height:40px; 150 | display:block; 151 | transition:all 500ms ease 0s; 152 | -webkit-transform-style:preserve-3d; 153 | -moz-transform-style:preserve-3d; 154 | -0-transform-style:preserve-3d; 155 | -ms-transform-style:preserve-3d; 156 | /*.nav_item的子元素可以呈3d效果*/ 157 | transform-style:preserve-3d; 158 | } 159 | .nav_item a p{ 160 | height:40px; 161 | line-height:40px; 162 | margin:0; 163 | border-radius:5px; 164 | font-size:14px; 165 | font-size:"黑体"; 166 | text-align:center; 167 | transition:all 500ms ease 0s; 168 | } 169 | .nav_item a{ 170 | text-decoration:none; 171 | } 172 | .nav_item a p:first-child{ 173 | border-radius:5px; 174 | color:#fff; 175 | background:#ff7434; 176 | /*沿z轴移动50橡素 20px高度除以2*/ 177 | transform:translateZ(20px); 178 | -webkit-transform:translateZ(20px); 179 | -moz-transform:translateZ(20px); 180 | -0-transform:translateZ(20px); 181 | -ms-transform:translateZ(20px); 182 | } 183 | .nav_item a p:last-child{ 184 | border-radius:5px; 185 | color:#fff; 186 | background:#85bc00; 187 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 188 | transform:translateZ(20px) rotateX(-90deg); 189 | -webkit-transform:translateZ(20px) rotateX(-90deg); 190 | -moz-transform:translateZ(20px) rotateX(-90deg); 191 | -0-transform:translateZ(20px) rotateX(-90deg); 192 | -ms-transform:translateZ(20px) rotateX(-90deg); 193 | /*设置上边距为-20px 20px高度除以2*/ 194 | margin-top:-20px; 195 | } 196 | .nav_item a:hover{ 197 | margin-top:0px; 198 | transform:rotateX(90deg); 199 | -webkit-transform:rotateX(90deg); 200 | -moz-transform:rotateX(90deg); 201 | -0-transform:rotateX(90deg); 202 | -ms-transform:rotateX(90deg); 203 | } 204 | .nav_item a:hover p:last-child{ 205 | margin-top:0px; 206 | transform:translateZ(0) rotateX(-90deg); 207 | -webkit-transform:translateZ(0) rotateX(-90deg); 208 | -moz-transform:translateZ(0) rotateX(-90deg); 209 | -0-transform:translateZ(0) rotateX(-90deg); 210 | -ms-transform:translateZ(0) rotateX(-90deg); 211 | } 212 | nav>.nav>li{ 213 | width:100px; 214 | height:40px; 215 | background:#ff7434; 216 | float:right; 217 | margin-right:5px; 218 | border-radius:5px; 219 | line-height:40px; 220 | text-align:center; 221 | font-size:14px; 222 | } 223 | nav>.nav>li>a{ 224 | color:#fff; 225 | text-decoration:none; 226 | padding:0; 227 | } 228 | .nav li:hover a{ 229 | color:red; 230 | } 231 | 232 | /*end------------------*/ 233 | .container{ 234 | width:1040px !important; 235 | margin-left: auto; 236 | margin-right: auto; 237 | padding-left: 15px; 238 | padding-right: 15px; 239 | } 240 | .tag-box{ 241 | padding:0 15px; 242 | margin-bottom:20px; 243 | } 244 | .tag-span2{ 245 | font-weight:bolder; 246 | vertical-align: middle !important; 247 | width:100px; 248 | } 249 | .tags{ 250 | font-size:0; 251 | } 252 | .tags .tag.active{ 253 | background: rgb(95, 170, 254) none repeat scroll 0 0; 254 | color: #fff; 255 | } 256 | .tags .tag{ 257 | background-color: #e6e6e6; 258 | border-radius: 2px; 259 | color: #888; 260 | display: inline-block; 261 | font-size: 12px; 262 | line-height: 1.5; 263 | margin-bottom: 5px; 264 | margin-right: 5px; 265 | padding: 0.2em 8px; 266 | } 267 | .tag:hover{ 268 | text-decoration:none; 269 | background: rgb(95, 170, 254) none repeat scroll 0 0; 270 | color:#fff; 271 | } 272 | .movie-item{ 273 | padding:10px; 274 | } 275 | .container .col-xs-1-5{ 276 | min-height: 1px; 277 | float:left; 278 | width:20%; 279 | position: relative; 280 | } 281 | 282 | element.style { 283 | display: block; 284 | position: relative; 285 | } 286 | .movie-item img{ 287 | height:265px; 288 | width:100%; 289 | } 290 | .hdtag{ 291 | background: #09c878 none repeat scroll 0 0; 292 | } 293 | .qtag{ 294 | border: medium none; 295 | bottom: 0; 296 | color: #fff; 297 | font-size: 12px; 298 | padding: 0 3px; 299 | position: absolute; 300 | right: 0; 301 | } 302 | .movie-item-in{ 303 | position: relative; 304 | } 305 | .item-hover { 306 | background: #000 none no-repeat scroll 10px 100px; 307 | font-size: 0; 308 | height: 0; 309 | opacity: 0.5; 310 | position: absolute; 311 | top: 0; 312 | width: 100%; 313 | } 314 | .movie-item-in:hover .item-hover { 315 | background-image: url("../images/play-icon.png"); 316 | background-position: center center; 317 | height: 100%; 318 | } 319 | .meta { 320 | background: #fff none repeat scroll 0 0; 321 | padding: 5px; 322 | } 323 | .meta h4, .meta h1 { 324 | font-size: 14px; 325 | height: 17px; 326 | line-height: 17px; 327 | margin: 0; 328 | overflow: hidden; 329 | padding: 0; 330 | width: 100%; 331 | } 332 | .meta h4 a, .meta h1 a { 333 | color: #555; 334 | } 335 | em { 336 | color: #8c8c8c; 337 | font-size: 12px; 338 | font-style: normal; 339 | } 340 | .otherinfo { 341 | color: #7e7e7e; 342 | font-size: 12px; 343 | font-weight: normal; 344 | height: 20px; 345 | line-height: 20px; 346 | margin-top: 5px; 347 | overflow: hidden; 348 | width: 100%; 349 | } 350 | .otherinfo a { 351 | background-color: rgb(230, 230, 230); 352 | border-radius: 2px; 353 | color: #999; 354 | display: inline-block; 355 | font-size: 12px; 356 | line-height: 1.2; 357 | margin: 0 5px 5px 0; 358 | padding: 2px 5px; 359 | } 360 | /*end:;*/ 361 | /*分页开始*/ 362 | .pager-bg { 363 | background: #fff none repeat scroll 0 0; 364 | font-size: 0; 365 | padding-left: 15px; 366 | margin-bottom:20px; 367 | } 368 | .pagination { 369 | border-radius: 4px; 370 | display: inline-block; 371 | margin: 0; 372 | padding-left: 0; 373 | } 374 | .pagination > li { 375 | display: inline; 376 | } 377 | /*底部开始*/ 378 | footer{ 379 | width:100%; 380 | height:auto; 381 | overflow:hidden; 382 | border-top:1px solid #DDDDDD; 383 | margin-bottom:20px; 384 | } 385 | footer .foot{ 386 | width:1040px; 387 | height:120px; 388 | padding-top:20px; 389 | margin:0 auto; 390 | color: #666; 391 | font-size: 12px; 392 | text-align: center; 393 | } 394 | .foot p{ 395 | margin-bottom:10px; 396 | } 397 | .foot a:hover{ 398 | text-decoration:underline; 399 | } 400 | 401 | -------------------------------------------------------------------------------- /css/play.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | li{ 10 | list-style:none; 11 | } 12 | .cl{ 13 | clear:both; 14 | } 15 | body{ 16 | background: rgb(245, 245, 245) none repeat scroll 0 0; 17 | font-family: "HanHei SC","PingFang SC","Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei","STHeitiSC-Light","Arial","Segoe UI",sans-serif; 18 | height: 100%; 19 | line-height: 1.5; 20 | margin: 0; 21 | min-width: 1040px !important; 22 | overflow-wrap: break-word; 23 | width: 100%; 24 | } 25 | /*顶部开始*/ 26 | #top{ 27 | width:100%; 28 | height:35px; 29 | padding:5px 0px; 30 | border-bottom:1px solid #ddd; 31 | } 32 | .top_main{ 33 | width:1010px; 34 | height:35px; 35 | padding:0px 15px; 36 | line-height:21px; 37 | margin:0 auto; 38 | } 39 | .top_main_left p{ 40 | color:#777790; 41 | font-size:12px; 42 | float:left; 43 | margin-bottom:10px; 44 | } 45 | .top_main_right_2{ 46 | float:right; 47 | color:#777; 48 | font-size:12px; 49 | } 50 | .top_main_right_1{ 51 | float:right; 52 | color:#F00; 53 | font-size:12px; 54 | margin-left:10px; 55 | } 56 | .top_main_right a:hover{ 57 | text-decoration:underline; 58 | } 59 | /*header部分*/ 60 | header{ 61 | width:1025px; 62 | height:55px; 63 | padding:20px 0px; 64 | padding-left:15px; 65 | margin:0 auto; 66 | } 67 | .logo{ 68 | width:210px; 69 | height:50px; 70 | float:left; 71 | } 72 | .search{ 73 | width:327px; 74 | height:50px; 75 | margin-top:5px; 76 | float:right; 77 | } 78 | input[type=search]{ 79 | width:241px; 80 | height:34px; 81 | padding:6px 12px; 82 | border:1px solid #ccc; 83 | margin-top:-1px; 84 | } 85 | input[type=submit]{ 86 | width:72px; 87 | height:34px; 88 | border:1px solid #2E6DA4; 89 | padding:6px 12px; 90 | margin-left:-5px; 91 | background:#337AB7; 92 | color:#fff; 93 | } 94 | input[type=submit]:hover{ 95 | background:#286090; 96 | } 97 | .tj{ 98 | margin-top:5px; 99 | font-size:12px; 100 | } 101 | .tj a{ 102 | margin-right:5px; 103 | } 104 | .tj a:first-child{ 105 | margin-left:20px; 106 | } 107 | .tj a:hover{ 108 | text-decoration:underline; 109 | } 110 | /*导航开始*/ 111 | nav{ 112 | width:100%; 113 | height:40px; 114 | margin-bottom:20px; 115 | background:; 116 | margin-top: 40px; 117 | } 118 | .nav{ 119 | width:1010px; 120 | height:40px; 121 | padding:0px 15px; 122 | margin:0 auto; 123 | background:; 124 | overflow:hidden; 125 | 126 | } 127 | /*翻转导航开始*/ 128 | .nav:after{ 129 | content:''; 130 | display:block; 131 | overflow:hidden; 132 | clear:both; 133 | } 134 | .nav_item{ 135 | width:100px; 136 | height:40px; 137 | float:left; 138 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 139 | perspective:4000px; 140 | -webkit-perspective:4000px; 141 | -moz-perspective:4000px; 142 | -0-perspective:4000px; 143 | -ms-perspective:4000px; 144 | } 145 | .nav_item a{ 146 | margin-right:5px; 147 | height:40px; 148 | display:block; 149 | transition:all 500ms ease 0s; 150 | -webkit-transform-style:preserve-3d; 151 | -moz-transform-style:preserve-3d; 152 | -0-transform-style:preserve-3d; 153 | -ms-transform-style:preserve-3d; 154 | /*.nav_item的子元素可以呈3d效果*/ 155 | transform-style:preserve-3d; 156 | } 157 | .nav_item a p{ 158 | height:40px; 159 | line-height:40px; 160 | margin:0; 161 | border-radius:5px; 162 | font-size:14px; 163 | font-size:"黑体"; 164 | text-align:center; 165 | transition:all 500ms ease 0s; 166 | } 167 | .nav_item a{ 168 | text-decoration:none; 169 | } 170 | .nav_item a p:first-child{ 171 | border-radius:5px; 172 | color:#fff; 173 | background:#ff7434; 174 | /*沿z轴移动50橡素 20px高度除以2*/ 175 | transform:translateZ(20px); 176 | -webkit-transform:translateZ(20px); 177 | -moz-transform:translateZ(20px); 178 | -0-transform:translateZ(20px); 179 | -ms-transform:translateZ(20px); 180 | } 181 | .nav_item a p:last-child{ 182 | border-radius:5px; 183 | color:#fff; 184 | background:#85bc00; 185 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 186 | transform:translateZ(20px) rotateX(-90deg); 187 | -webkit-transform:translateZ(20px) rotateX(-90deg); 188 | -moz-transform:translateZ(20px) rotateX(-90deg); 189 | -0-transform:translateZ(20px) rotateX(-90deg); 190 | -ms-transform:translateZ(20px) rotateX(-90deg); 191 | /*设置上边距为-20px 20px高度除以2*/ 192 | margin-top:-20px; 193 | } 194 | .nav_item a:hover{ 195 | margin-top:0px; 196 | transform:rotateX(90deg); 197 | -webkit-transform:rotateX(90deg); 198 | -moz-transform:rotateX(90deg); 199 | -0-transform:rotateX(90deg); 200 | -ms-transform:rotateX(90deg); 201 | } 202 | .nav_item a:hover p:last-child{ 203 | margin-top:0px; 204 | transform:translateZ(0) rotateX(-90deg); 205 | -webkit-transform:translateZ(0) rotateX(-90deg); 206 | -moz-transform:translateZ(0) rotateX(-90deg); 207 | -0-transform:translateZ(0) rotateX(-90deg); 208 | -ms-transform:translateZ(0) rotateX(-90deg); 209 | } 210 | nav>.nav>li{ 211 | width:100px; 212 | height:40px; 213 | background:#ff7434; 214 | float:right; 215 | margin-right:5px; 216 | border-radius:5px; 217 | line-height:40px; 218 | text-align:center; 219 | font-size:14px; 220 | } 221 | nav>.nav>li>a{ 222 | color:#fff; 223 | text-decoration:none; 224 | padding:0; 225 | } 226 | .nav li:hover a{ 227 | color:red; 228 | } 229 | .container { 230 | width: 1040px !important; 231 | margin-left: auto; 232 | margin-right: auto; 233 | padding-left: 15px; 234 | padding-right: 15px; 235 | margin-bottom:40px; 236 | 237 | } 238 | .container-fluid { 239 | margin-left: auto; 240 | margin-right: auto; 241 | padding-left: 15px; 242 | padding-right: 15px; 243 | } 244 | .breadcrumb { 245 | background: #fff none repeat scroll 0 0; 246 | padding: 0; 247 | list-style: outside none none; 248 | border-radius: 4px; 249 | margin-top:0; 250 | } 251 | .breadcrumb > li { 252 | display: inline-block; 253 | } 254 | .breadcrumb > li + li::before { 255 | color: #ccc; 256 | content: "/ "; 257 | padding: 0 5px; 258 | } 259 | .breadcrumb > .active { 260 | color: #777; 261 | } 262 | .breadcrumb a{ 263 | color: #337ab7; 264 | text-decoration: none; 265 | background-color: transparent; 266 | font-size:14px; 267 | } 268 | .breadcrumb span{ 269 | text-decoration: none; 270 | background-color: transparent; 271 | font-size:14px; 272 | color: #999; 273 | } 274 | .movie-title { 275 | font-size: 26px; 276 | margin: 5px 0 15px; 277 | } 278 | .movie-info { 279 | width: 780px; 280 | } 281 | .movie-info h2 { 282 | border-left: 4px solid #09c878; 283 | font-size: 16px; 284 | line-height: 1.2; 285 | padding: 2px 0 2px 10px; 286 | margin-top:15px; 287 | margin-bottom:15px; 288 | } 289 | .movie-info h1 { 290 | color: #494949; 291 | font-size: 26px; 292 | line-height: 1.5; 293 | margin: 0 0 10px; 294 | overflow: hidden; 295 | padding: 0; 296 | width: 100%; 297 | } 298 | .movie-info h1 span { 299 | color: #888; 300 | display: inline-block; 301 | } 302 | .movie-recommened { 303 | padding: 0 5px; 304 | } 305 | .movie-recommened a img { 306 | border: 1px solid #ccc; 307 | width:118px; 308 | height: 170px; 309 | padding: 1px; 310 | vertical-align: middle; 311 | } 312 | .item-hover { 313 | background: #000 none no-repeat scroll 10px 100px; 314 | font-size: 0; 315 | height: 0; 316 | opacity: 0.5; 317 | position: absolute; 318 | top: 0; 319 | width: 100%; 320 | } 321 | .movie-recommened h5 { 322 | color: #666; 323 | font-size: 12px; 324 | height: 24px; 325 | line-height: 24px; 326 | margin: 0; 327 | overflow: hidden; 328 | text-align: center; 329 | width: 100%; 330 | } 331 | .movie-recommened:hover .item-hover, .movie-item-in:hover .item-hover { 332 | background-image: url("../images/play-icon.png"); 333 | background-position: center center; 334 | height: 100%; 335 | width:118px; 336 | } 337 | /*右侧栏*/ 338 | .sidebar h3 { 339 | border-left: 4px solid #dd5862; 340 | color: #666; 341 | font-size: 16px; 342 | line-height: 20px; 343 | margin-bottom: 10px; 344 | margin-top: 20px; 345 | padding-left: 10px; 346 | } 347 | .viewer-list { 348 | clear: both; 349 | padding: 5px 10px; 350 | } 351 | .viewer-list-avatar { 352 | display: inline-block; 353 | padding: 5px; 354 | } 355 | .viewer-list-avatar > a { 356 | display: block; 357 | width: 100%; 358 | } 359 | .viewer-list-avatar img { 360 | margin-left:-20px; 361 | width:43px; 362 | height:43px; 363 | border-radius: 2px; 364 | } 365 | .sidebar .list-group .list-group-item { 366 | background: transparent none repeat scroll 0 0; 367 | border-left: medium none; 368 | border-radius: 0; 369 | border-right: medium none; 370 | overflow: hidden; 371 | padding: 6.2px 5px; 372 | white-space: nowrap; 373 | width: 100%; 374 | word-break: keep-all; 375 | } 376 | .square-item-red { 377 | background: red none repeat scroll 0 0; 378 | color: #fff; 379 | display: inline-block; 380 | margin-right: 5px; 381 | text-align: center; 382 | width: 1.5em; 383 | } 384 | .square-item-blue { 385 | background: #07a7e1 none repeat scroll 0 0; 386 | color: #fff; 387 | display: inline-block; 388 | margin-right: 5px; 389 | text-align: center; 390 | width: 1.5em; 391 | } 392 | .movie-item-in:hover { 393 | background: #ccc none repeat scroll 0 0; 394 | box-shadow: 0 2px 5px #ccc; 395 | outline: 1px solid #ddd; 396 | } 397 | .sidebar .list-group .list-group-item:hover { 398 | background: #ddd none repeat scroll 0 0; 399 | border-bottom: 1px solid #ddd; 400 | border-top: 1px solid #ddd; 401 | color: #333; 402 | } 403 | /*底部开始*/ 404 | footer{ 405 | width:100%; 406 | height:auto; 407 | overflow:hidden; 408 | border-top:1px solid #DDDDDD; 409 | margin-bottom:20px; 410 | } 411 | .foot{ 412 | width:1040px; 413 | height:120px; 414 | padding-top:20px; 415 | margin:0 auto; 416 | color: #666; 417 | font-size: 12px; 418 | text-align: center; 419 | } 420 | .foot p{ 421 | margin-bottom:10px; 422 | } 423 | .foot a:hover{ 424 | text-decoration:underline; 425 | } 426 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* 4 | @名称: base 5 | @功能: 重设浏览器默认样式 6 | */ 7 | 8 | /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ 9 | html{ 10 | color:#000;background:#fff; 11 | -webkit-text-size-adjust: 100%; 12 | -ms-text-size-adjust: 100%; 13 | } 14 | 15 | /* 内外边距通常让各个浏览器样式的表现位置不同 */ 16 | div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,hgroup,menu,section { 17 | margin:0;padding:0; 18 | color:#333; 19 | font-family: 'Microsoft YaHei', '微软雅黑', Arial, Lucida Grande, Tahoma, sans-serif; 20 | font-size: 13px; 21 | } 22 | 23 | /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ 24 | article,aside,details,figcaption,figure,footer,hgroup,menu,section { 25 | display:block; 26 | } 27 | 28 | /* HTML5 媒体文件跟 img 保持一致 */ 29 | audio,canvas,video { 30 | display: inline-block;*display: inline;*zoom: 1; 31 | } 32 | 33 | /* 要注意表单元素并不继承父级 font 的问题 */ 34 | button,input,select,textarea{ 35 | font:13px/1.5 tahoma,arial,\5b8b\4f53; 36 | } 37 | input,select,textarea{ 38 | font-size:100%; 39 | font-family: 'Microsoft YaHei', '微软雅黑', Arial, Lucida Grande, Tahoma, sans-serif; 40 | font-size: 13px; 41 | } 42 | 43 | /* 去掉各Table cell 的边距并让其边重合 */ 44 | table{ 45 | /*border-collapse:collapse;*/ 46 | border-spacing:0; 47 | } 48 | 49 | /* IE bug fixed: th 不继承 text-align*/ 50 | th{ 51 | text-align:inherit; 52 | } 53 | 54 | /* 去除默认边框 */ 55 | fieldset,img{ 56 | border:0; 57 | } 58 | 59 | /* ie6 7 8(q) bug 显示为行内表现 */ 60 | iframe{ 61 | display:block; 62 | } 63 | 64 | /* 去掉 firefox 下此元素的边框 */ 65 | abbr,acronym{ 66 | border:0;font-variant:normal; 67 | } 68 | 69 | /* 一致的 del 样式 */ 70 | del { 71 | text-decoration:line-through; 72 | } 73 | 74 | address,caption,cite,code,dfn,em,th,var { 75 | font-style:normal; 76 | font-weight:500; 77 | } 78 | 79 | /* 去掉列表前的标识, li 会继承 */ 80 | ol,ul { 81 | list-style:none; 82 | } 83 | 84 | /* 对齐是排版最重要的因素, 别让什么都居中 */ 85 | caption,th { 86 | text-align:left; 87 | } 88 | 89 | /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ 90 | h1,h2,h3,h4,h5,h6 { 91 | font-size:100%; 92 | font-weight:500; 93 | } 94 | 95 | q:before,q:after { 96 | content:''; 97 | } 98 | 99 | /* 统一上标和下标 */ 100 | sub, sup { 101 | font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; 102 | } 103 | sup {top: -0.5em;} 104 | sub {bottom: -0.25em;} 105 | 106 | 107 | a{ 108 | color: #333; 109 | } 110 | /* 让链接在 hover 状态下显示下划线 */ 111 | a:hover { 112 | /* color: #c00;*/ 113 | } 114 | 115 | /* 默认不显示下划线，保持页面简洁 */ 116 | ins,a { 117 | text-decoration:none; 118 | } 119 | 120 | /* 清理浮动 */ 121 | .fn-clear:after { 122 | visibility:hidden; 123 | display:block; 124 | font-size:0; 125 | content:" "; 126 | clear:both; 127 | height:0; 128 | } 129 | .fn-clear { 130 | zoom:1; /* for IE6 IE7 */ 131 | } 132 | 133 | /* 隐藏, 通常用来与 JS 配合 */ 134 | body .fn-hide { 135 | display:none; 136 | } 137 | 138 | /* 设置内联, 减少浮动带来的bug */ 139 | .fn-left,.fn-right { 140 | display:inline; 141 | } 142 | .fn-left { 143 | float:left; 144 | } 145 | .fn-right { 146 | float:right; 147 | } 148 | -------------------------------------------------------------------------------- /css/user.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | a{ 6 | text-decoration:none; 7 | color:#555; 8 | } 9 | a:hover{ 10 | text-decoration:none; 11 | } 12 | li{ 13 | list-style:none; 14 | } 15 | em { 16 | color: #8c8c8c; 17 | font-size: 12px; 18 | font-style: normal; 19 | } 20 | .cl{ 21 | clear:both; 22 | } 23 | body{ 24 | background: rgb(245, 245, 245) none repeat scroll 0 0; 25 | font-family: "HanHei SC","PingFang SC","Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei","STHeitiSC-Light","Arial","Segoe UI",sans-serif; 26 | height: 100%; 27 | line-height: 1.5; 28 | margin: 0; 29 | min-width: 1040px !important; 30 | overflow-wrap: break-word; 31 | width: 100%; 32 | } 33 | /*顶部开始*/ 34 | #top{ 35 | width:100%; 36 | height:35px; 37 | padding:5px 0px; 38 | border-bottom:1px solid #ddd; 39 | } 40 | .top_main{ 41 | width:1010px; 42 | height:35px; 43 | padding:0px 15px; 44 | line-height:21px; 45 | margin:0 auto; 46 | } 47 | .top_main_left p{ 48 | color:#777790; 49 | font-size:12px; 50 | float:left; 51 | margin-bottom:10px; 52 | } 53 | .top_main_right_2{ 54 | float:right; 55 | color:#777; 56 | font-size:12px; 57 | } 58 | .top_main_right_1{ 59 | float:right; 60 | color:#F00; 61 | font-size:12px; 62 | margin-left:10px; 63 | } 64 | .top_main_right a:hover{ 65 | text-decoration:underline; 66 | } 67 | /*header部分*/ 68 | header{ 69 | width:1025px; 70 | height:55px; 71 | padding:20px 0px; 72 | padding-left:15px; 73 | margin:0 auto; 74 | } 75 | .logo{ 76 | width:210px; 77 | height:50px; 78 | float:left; 79 | margin-top:-20px; 80 | } 81 | .search{ 82 | width:327px; 83 | height:50px; 84 | margin-top:5px; 85 | float:right; 86 | } 87 | input[type=search]{ 88 | width:241px; 89 | height:34px; 90 | padding:6px 12px; 91 | border:1px solid #ccc; 92 | margin-top:-1px; 93 | } 94 | input[type=submit]{ 95 | width:72px; 96 | height:34px; 97 | border:1px solid #2E6DA4; 98 | padding:6px 12px; 99 | margin-left:-5px; 100 | background:#337AB7; 101 | color:#fff; 102 | } 103 | input[type=submit]:hover{ 104 | background:#286090; 105 | } 106 | .tj{ 107 | margin-top:5px; 108 | font-size:12px; 109 | } 110 | .tj a{ 111 | margin-right:5px; 112 | } 113 | .tj a:first-child{ 114 | margin-left:20px; 115 | } 116 | .tj a:hover{ 117 | text-decoration:underline; 118 | } 119 | /*导航开始*/ 120 | nav{ 121 | width:100%; 122 | height:40px; 123 | margin-bottom:20px; 124 | background:; 125 | margin-top: 40px; 126 | } 127 | .nav{ 128 | width:1010px; 129 | height:40px; 130 | padding:0px 15px; 131 | margin:0 auto; 132 | background:; 133 | overflow:hidden; 134 | 135 | } 136 | /*翻转导航开始*/ 137 | .nav:after{ 138 | content:''; 139 | display:block; 140 | overflow:hidden; 141 | clear:both; 142 | } 143 | .nav_item{ 144 | width:100px; 145 | height:40px; 146 | float:left; 147 | /*3d元素距离视频的距离 定义后子元素会获取一个3d透视效果而不是元素的本身*/ 148 | perspective:4000px; 149 | -webkit-perspective:4000px; 150 | -moz-perspective:4000px; 151 | -0-perspective:4000px; 152 | -ms-perspective:4000px; 153 | } 154 | .nav_item a{ 155 | margin-right:5px; 156 | height:40px; 157 | display:block; 158 | transition:all 500ms ease 0s; 159 | -webkit-transform-style:preserve-3d; 160 | -moz-transform-style:preserve-3d; 161 | -0-transform-style:preserve-3d; 162 | -ms-transform-style:preserve-3d; 163 | /*.nav_item的子元素可以呈3d效果*/ 164 | transform-style:preserve-3d; 165 | } 166 | .nav_item a p{ 167 | height:40px; 168 | line-height:40px; 169 | margin:0; 170 | border-radius:5px; 171 | font-size:14px; 172 | font-size:"黑体"; 173 | text-align:center; 174 | transition:all 500ms ease 0s; 175 | } 176 | .nav_item a{ 177 | text-decoration:none; 178 | } 179 | .nav_item a p:first-child{ 180 | border-radius:5px; 181 | color:#fff; 182 | background:#ff7434; 183 | /*沿z轴移动50橡素 20px高度除以2*/ 184 | transform:translateZ(20px); 185 | -webkit-transform:translateZ(20px); 186 | -moz-transform:translateZ(20px); 187 | -0-transform:translateZ(20px); 188 | -ms-transform:translateZ(20px); 189 | } 190 | .nav_item a p:last-child{ 191 | border-radius:5px; 192 | color:#fff; 193 | background:#85bc00; 194 | /*沿z轴移动50橡素 沿X轴旋转-90度 20px高度除以2*/ 195 | transform:translateZ(20px) rotateX(-90deg); 196 | -webkit-transform:translateZ(20px) rotateX(-90deg); 197 | -moz-transform:translateZ(20px) rotateX(-90deg); 198 | -0-transform:translateZ(20px) rotateX(-90deg); 199 | -ms-transform:translateZ(20px) rotateX(-90deg); 200 | /*设置上边距为-20px 20px高度除以2*/ 201 | margin-top:-20px; 202 | } 203 | .nav_item a:hover{ 204 | margin-top:0px; 205 | transform:rotateX(90deg); 206 | -webkit-transform:rotateX(90deg); 207 | -moz-transform:rotateX(90deg); 208 | -0-transform:rotateX(90deg); 209 | -ms-transform:rotateX(90deg); 210 | } 211 | .nav_item a:hover p:last-child{ 212 | margin-top:0px; 213 | transform:translateZ(0) rotateX(-90deg); 214 | -webkit-transform:translateZ(0) rotateX(-90deg); 215 | -moz-transform:translateZ(0) rotateX(-90deg); 216 | -0-transform:translateZ(0) rotateX(-90deg); 217 | -ms-transform:translateZ(0) rotateX(-90deg); 218 | } 219 | nav>.nav>li{ 220 | width:100px; 221 | height:40px; 222 | background:#ff7434; 223 | float:right; 224 | margin-right:5px; 225 | border-radius:5px; 226 | line-height:40px; 227 | text-align:center; 228 | font-size:14px; 229 | } 230 | nav>.nav>li>a{ 231 | color:#fff; 232 | text-decoration:none; 233 | padding:0; 234 | } 235 | .nav li:hover a{ 236 | color:red; 237 | } 238 | 239 | /*end------------------*/ 240 | 241 | /*网站主题*/ 242 | .container { 243 | width: 1040px !important; 244 | margin-left: auto; 245 | margin-right: auto; 246 | padding-left: 15px; 247 | padding-right: 15px; 248 | } 249 | .user-zone-cover { 250 | background: #eee url("http://ww3.sinaimg.cn/large/0069qWFHgw1ewcbnu0az2j30s209qgoq.jpg") no-repeat scroll 0 0; 251 | color: #fff; 252 | height: 300px; 253 | margin-bottom: 20px; 254 | position: relative; 255 | } 256 | .user-portrait { 257 | height: 300px; 258 | left: 50%; 259 | margin-left: -200px; 260 | padding-top: 60px; 261 | position: absolute; 262 | text-align: center; 263 | width: 400px; 264 | } 265 | .user-avatar { 266 | display: block; 267 | margin: 0 auto; 268 | width: 80px; 269 | } 270 | .user-portrait .user-avatar img { 271 | border-radius: 10px; 272 | height: 80px; 273 | width: 80px; 274 | } 275 | .user-portrait .user-name { 276 | background: #ddd none repeat scroll 0 0; 277 | border-radius: 2px; 278 | color: #555; 279 | display: inline-block; 280 | margin-top: 10px; 281 | padding: 2px 15px; 282 | } 283 | .user-portrait .other-btn { 284 | margin-top: 10px; 285 | } 286 | .btn, .input { 287 | border-radius: 3px; 288 | } 289 | .padding-right-0 { 290 | padding-right: 0; 291 | } 292 | .panel { 293 | border-radius: 0; 294 | } 295 | .panel-heading, .panel-body { 296 | padding: 8px 10px; 297 | } 298 | .panel-heading, .panel-body { 299 | padding: 8px 10px; 300 | } 301 | .panel-heading, .panel-body { 302 | padding: 8px 10px; 303 | } 304 | .list-group .list-group-item { 305 | border-radius: 0; 306 | padding: 8px 10px; 307 | } 308 | .pagination { 309 | margin: 0; 310 | } 311 | .pointer-cursor { 312 | cursor: pointer; 313 | } 314 | .viewer-list-avatar { 315 | display: inline-block; 316 | padding: 5px; 317 | } 318 | .viewer-list-avatar img { 319 | border-radius: 2px; 320 | width: 100%; 321 | } 322 | .like-list { 323 | padding: 5px; 324 | } 325 | .movie-item { 326 | padding: 10px; 327 | } 328 | 329 | -------------------------------------------------------------------------------- /css/video-js.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Video.js Default Styles (http://videojs.com) 3 | Version 4.5.1 4 | Create your own skin at http://designer.videojs.com 5 | */ 6 | /* SKIN 7 | ================================================================================ 8 | The main class name for all skin-specific styles. To make your own skin, 9 | replace all occurances of 'vjs-default-skin' with a new name. Then add your new 10 | skin name to your video tag instead of the default skin. 11 | e.g.