“丹麦天使”素颜照曝光 网友直呼落差大

图片 8

HTML5+CSS3+jQuery制作视频播放器完全指南

2012/05/12 · HTML5 · 2
评论 ·
CSS3,
HTML5

英文原文:designmodo.com,编译:王然@CSDN

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5&
CSS3& JavaScript 技术的视频播放器。

1.下载MediaElement.js

首先下载MediaElement.js脚本文件,这是一个开源的HTML5音、视频插件,解压后你会得到3个文件——
“flashmediaelement.swf”、 “mediaelement-and-player.min.js”和
“silverlightmediaelement.xap” ,分别是使用Flash、 JavaScript和
SilverLight实现视频播放,并且新建一个”js”文件夹并把它们放进去(当然本例中并不需要
“flashmediaelement.swf” 和 “silverlightmediaelement.xap”
两个文件,可以删去。)。

2.HTML标记

首先需要链接(link)一个jQuery库,这里使用的是Google托管的jQuery库。然后我们在链接”mediaelement-and-player.min.js”文件和CSS文件。

XHTML

<head> <title>Video Player</title> <script
src=”;
<script src=”js/mediaelement-and-player.min.js”></script>
<link rel=”stylesheet” href=”css/style.css” media=”screen”>
</head>

1
2
3
4
5
6
<head>
    <title>Video Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>

当然我们还需要添加一个HTML5
video标记来创建一个视频播放器,再添加一些属性将它初始化。(注:poster是指视频的预览图)

XHTML

<video width=”640″ height=”267″ poster=”media/cars.png”>
<source src=”media/cars.mp4″ type=”video/mp4″> </video>

1
2
3
<video width="640" height="267" poster="media/cars.png">
    <source src="media/cars.mp4" type="video/mp4">
</video>

接下来我们再加入下面的代码来创建控制面板,需要添加的控制器或功能有:

● alwaysShowControls –
“true”则设置video控制面板永远显示,”false”则在鼠标移走后隐藏。

● videoVolume – “horizontal”设置音量滑动控制器为水平

● 其它功能:暂停播放、前进播放、声音和全屏

JavaScript

<script type=”text/javascript”>// <![CDATA[
$(document).ready(function() { $(‘video’).mediaelementplayer({
alwaysShowControls: true, videoVolume: ‘horizontal’, features:
[‘playpause’,’progress’,’volume’,’fullscreen’] }); }); //
]]></script>

1
2
3
4
5
6
7
8
9
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $(‘video’).mediaelementplayer({
        alwaysShowControls: true,
        videoVolume: ‘horizontal’,
        features: [‘playpause’,’progress’,’volume’,’fullscreen’]
    });
});
// ]]></script>

更多设置请查阅MediaElement.js的设置文档。

3.播放器基本样式设计

先修改一下样式设置:

CSS

.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span,
.mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border:
none; outline: none; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

再给video
container添加样式,下面的代码全部都是用来控制布局的,没有对播放器样式做任何修改。

CSS

.mejs-container { position: relative; background: #000000; }
.mejs-inner { position: relative; width: inherit; height: inherit; }
.me-plugin { position: absolute; } .mejs-container-fullscreen
.mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed,
.mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; }
.mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden;
} .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right:
0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background,
.mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute;
top: 0; left: 0; } .mejs-poster img { display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.mejs-container {
    position: relative;
    background: #000000;
}
 
.mejs-inner {
    position: relative;
    width: inherit;
    height: inherit;
}
 
.me-plugin { position: absolute; }
 
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
    width: 100%;
    height: 100%;
}
 
.mejs-embed,
.mejs-embed body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
}
 
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
 
.mejs-poster img { display: block; }

 

图片 1

4.控制面板样式设置

让我们先从添加“播放按钮”开始:

CSS

.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button
{ position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-overlay-play { cursor: pointer; }
 
.mejs-inner .mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(../img/play.png) no-repeat;
}

接下来再添加视频控制器布局:将它放在视频底部,高度为34px,再添加一个背景颜色,配合RGBA来设置透明度。最后给按钮添加基本样式和图元。

CSS

.mejs-container .mejs-controls { position: absolute; width: 100%;
height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background:
rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block;
cursor: pointer; width: 16px; height: 16px; background: transparent
url(../img/controls.png); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mejs-container .mejs-controls {
    position: absolute;
    width: 100%;
    height: 34px;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: rgba(0,0,0, .7);
}
 
.mejs-controls .mejs-button button {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: transparent url(../img/controls.png);
}

 

图片 2

5.视频控制器

这一步我们要做的只是将控制器居右放置。所以首先我们将所有的按钮放到控制面板上,之后再对它们的宽度、位置和背景图片做详细的调整。

CSS

.mejs-controls div.mejs-playpause-button { position: absolute; top:
12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls
.mejs-pause button { width: 12px; height: 12px; background-position: 0
0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; }
.mejs-controls div.mejs-volume-button { position: absolute; top: 12px;
left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls
.mejs-unmute button { width: 14px; height: 12px; background-position:
-12px 0; } .mejs-controls .mejs-unmute button { background-position:
-12px -12px; } .mejs-controls div.mejs-fullscreen-button { position:
absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button
button, .mejs-controls .mejs-unfullscreen button { width: 27px; height:
22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen
button { background-position: -26px -22px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.mejs-controls div.mejs-playpause-button {
    position: absolute;
    top: 12px;
    left: 15px;
}
 
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
    width: 12px;
    height: 12px;
    background-position: 0 0;
}
 
.mejs-controls .mejs-pause button { background-position: 0 -12px; }
 
.mejs-controls div.mejs-volume-button {
    position: absolute;
    top: 12px;
    left: 45px;
}
 
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
    width: 14px;
    height: 12px;
    background-position: -12px 0;
}
 
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
 
.mejs-controls div.mejs-fullscreen-button {
    position: absolute;
    top: 7px;
    right: 7px;
}
 
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
    width: 27px;
    height: 22px;
    background-position: -26px 0;
}
 
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

 

图片 3

6.音量滑动控制器

音量滑动控制器的设置也一样,设置好位置和大小,再添加一个圆角效果就可以了。

CSS

.mejs-controls div.mejs-horizontal-volume-slider { position: absolute;
cursor: pointer; top: 15px; left: 65px; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width:
60px; background: #d6d6d6; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute; width: 0; top: 0; left: 0; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider
.mejs-horizontal-volume-current { height: 4px; -webkit-border-radius:
2px; -moz-border-radius: 2px; border-radius: 2px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.mejs-controls div.mejs-horizontal-volume-slider {
    position: absolute;
    cursor: pointer;
    top: 15px;
    left: 65px;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 60px;
    background: #d6d6d6;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 4px;
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

 

图片 4

7.进度条

进度条的设置也同样简单,将它紧贴在控制面板上方就可以了,之后就是设置不同状态(all和loaded状态)的背景颜色。现在将它初始化为零就可以在影片播放时自动改变了。(但是你看不出来。)

CSS

.mejs-controls div.mejs-time-rail { position: absolute; width: 100%;
left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position:
absolute; display: block; cursor: pointer; width: 100%; height: 10px;
top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total {
background: rgb(152,152,152); background: rgba(152,152,152, .5); }
.mejs-controls .mejs-time-rail .mejs-time-loaded { background:
rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls
.mejs-time-rail .mejs-time-current { width: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.mejs-controls div.mejs-time-rail {
    position: absolute;
    width: 100%;
    left: 0;
    top: -10px;
}
 
.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgb(152,152,152);
    background: rgba(152,152,152, .5);
}
 
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: rgb(0,0,0);
    background: rgba(0,0,0, .3);
}
 
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

 

图片 5

8.进度条控制器和时间提示框

这一步就该给进度条添加一个进度条控制器和一个时间提示框,同样我们还是调整位置,设置宽度、高度和背景图片,再添加一些排版样式。

CSS

.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute;
cursor: pointer; width: 16px; height: 18px; top: -3px; background:
url(../img/handle.png); } .mejs-controls .mejs-time-rail
.mejs-time-float { position: absolute; display: none; width: 33px;
height: 23px; top: -26px; margin-left: -17px; background:
url(../img/tooltip.png); } .mejs-controls .mejs-time-rail
.mejs-time-float-current { position: absolute; display: block; left: 0;
top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px;
font-weight: bold; color: #666666; text-align: center; } .mejs-controls
.mejs-time-rail .mejs-time-float-corner { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.mejs-controls .mejs-time-rail .mejs-time-handle {
    position: absolute;
    cursor: pointer;
    width: 16px;
    height: 18px;
    top: -3px;
    background: url(../img/handle.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    width: 33px;
    height: 23px;
    top: -26px;
    margin-left: -17px;
    background: url(../img/tooltip.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
    position: absolute;
    display: block;
    left: 0;
    top: 4px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #666666;
    text-align: center;
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

 

图片 6

9.绿色的已播放进度条

本教程的最后一步就是在进度条和音量滑动条上添加绿色的已播放进度条和音量显示,这个也很简单。

CSS

.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #82d344; background: -webkit-linear-gradient(top, #82d344
0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%,
#51af34 100%); background: -o-linear-gradient(top, #82d344 0%,
#51af34 100%); background: -ms-linear-gradient(top, #82d344 0%,
#51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34
100%); }

1
2
3
4
5
6
7
8
9
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #82d344;
    background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

 

图片 7

总结:虽然很简单,但这确实是一个很不错的开源(CC许可证3.0)视频播放器!经过设置还可以支持多种视频格式,所以它不仅仅可以被用来做网络视频播放器,如果你还愿意给它增加一些功能,甚至可以把它可以做成跨平台的本地视频播放器。

Demo下载地址:

● 本地下载

● designmodo.com

 

赞 3 收藏 2
评论

图片 8

.g-btn, .galleryList-btn, .mask_btn span, .pop_iv_bg, .contextDiv
span{
background:url()
no-repeat 0 0; display:inline-block }.gallery { width:640px;
overflow:hidden; margin:0 auto 20px; position:relative;
text-align:center; font-size:14px }#galleryPicWrap { width:100%;
position:relative; z-index:1; text-align:center; overflow:hidden;
background:#fff
url() center center
no-repeat; height:395px }#galleryPic { background:#000;
filter:Alpha(opacity = 0); opacity:0}.galleryInfo { position:relative;
bottom:0; text-align:left; z-index:1; width:640px; visibility:hidden
}#galleryTxtWrap { line-height:25px; font-size:14px; color:#fff;
width:100%; text-align:left; position:absolute;bottom:0;
z-index:3;background:url()
repeat 0 0; _background:none; _filter:
progid:DXImageTransform.Microsoft.gradient( GradientType = 0,
startColorstr = ‘#AA000000’, endColorstr = ‘#AA000000’);}#galleryTxt{
padding:5px 40px 0 11px; font-size:14px; line-height:21px; }#galleryTxt
p { padding:0; font-size:14px; height:30px; }.galleryInfo-btn {
position:absolute; right:5px; bottom:0; height:25px; width:70px;
line-height:25px; z-index:2 }.galleryInfo-btn div { font-size:12px;
color:#999; position:absolute; right:0; cursor:pointer
}.galleryInfo-btn b { position:absolute; width:0; height:0; top:9px;
margin-left:3px; border-width:4px; border-style:solid; font-size:0;
line-height:0; border-color:#999 transparent transparent; _width:7px;
_height:4px; _border:none;
_background:url()
no-repeat }.gallery-btn-close { width:40px; }.gallery-btn-open {
background:#3E3E3E; color:#fff; cursor:pointer; padding:0 5px;
display:none }.contextDiv { cursor:pointer;
width:50%;height:100%;position:absolute; top:0; z-index:2;
background:url()
no-repeat}.contextDiv span { width:24px; height:43px; position:absolute;
top:50%; margin-top:-22px; visibility:hidden}.contextDiv:hover {
zoom:1}.contextDiv:hover span { visibility:visible;}#preArrow span {
background-position:0 -50px; left:16px }#nextArrow span {
background-position:-30px -50px; right:16px }#preArrow { left:0
}#nextArrow { right:0 }#lastCon { position:absolute; background:
#fff; height:400px; top:0; left:0; width:100%; z-index:6; display:none
}.gallery-AD { margin:0 auto; width:550px; position:absolute; left:38px;
_left:20px; top:0; z-index:11}.gallery-AD .l_qq_com { left:0
!important; top:0 !important}.galleryBottom { border-top:1px solid
#e0e0e0; border-bottom:1px solid #e0e0e0; position:relative; z-index:9
}.galleryList { height:68px; border-top:1px solid #fff;
border-bottom:1px solid #fff; background-color:#f2f2f2; padding:5px 0
}.galleryList ul { position:absolute; left:0; top:5px }.galleryList li {
width:80px; height:60px; overflow:hidden; float:left; margin:0 3px 0
1px; display:inline; text-align:center; border:3px solid #f2f2f2;
padding:1px; background:#f2f2f2 }.galleryList li.hover{ border:3px
solid #2d96e9; background:#fff }.galleryList li a { display:block;
width:80px;height:60px; overflow:hidden }.galleryList li img {
height:60px } .galleryList-btn { position:absolute; top:30px;
width:22px; z-index:3; height:22px; filter:Alpha(opacity = 60);
opacity:0.6; -moz-transition: opacity 0.5s ease; -webkit-transition:
opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity
0.5s ease }.galleryList-btn:hover { opacity:1; filter:Alpha(opacity =
100); color:#379BE9 }.galleryList-btn-l { left:5px;
background-position:0 -23px }.galleryList-btn-r { right:3px;
background-position:-30px -23px }.galleryTool { position:absolute;
top:10px; left:50%; z-index:2; margin-left:-84px; width:166px;
height:30px; border-width:1px 0; border-color:#c5b9b6;
border-style:solid; visibility:hidden }#Mask_Pic_wrap .galleryTool {
visibility : visible; top:15px }.galleryTool-wrap { border-width:0 1px;
border-color:#c5b9b6; border-style:solid; float:left;
position:relative; margin:0 -1px; width:100%;
overflow:visible;background:rgba(0, 0, 0, 0.2); height:30px; filter:
progid:DXImageTransform.Microsoft.gradient( GradientType = 0,
startColorstr = ‘#30000000’, endColorstr = ‘#30000000’)
/9}.galleryTool-num { float:left; width:60px; padding:0 5px;
text-align:right; color:#fff; line-height:30px }.galleryTool-num em {
margin:0 2px;color:#fff}.galleryTool-btn { float:left; width:80px;
padding:6px 0 0 10px }.galleryTool-btn .g-btn { margin-right:8px }.g-btn
{ filter:Alpha(opacity = 70); opacity:0.7 }.g-btn:hover {
filter:Alpha(opacity = 100); opacity:1 }.g-btn-left { width:10px;
height:20px; background-position:0 0 }.g-btn-right { width:10px;
height:20px; background-position:-16px 0 }.g-btn-play { width:20px;
height:20px;
background:url()
no-repeat;
_background:url()
no-repeat 0 0 }.g-btn-pause { width:20px; height:20px;
background:url()
no-repeat 3px 1px }/* 模拟右键 */#cmenu { border:1px solid
#5EB4D8;background-color:#F6F9FD;padding:2px;}#cmenu ul,#cmenu li {
list-style:none; margin:0px; padding:0px; text-align:center;
font-size:12px; cursor:pointer }#cmenu .item { list-style:none;
margin:0px; padding:0px; height:23px; line-height:23px; display:block;
padding:0px }#cmenu .itemOver { background-color:#68B5EA; color:#fff;
cursor:default }/* 末页推荐――内容 */.endMain { width:564px; margin:0
auto; text-align: left; line-height: 18px }.endMain .title {
padding-bottom:8px; text-align: left; } .endMain h2 { font-size:14px;
line-height:26px; color:#44a2ea; font-family: “微软雅黑”, ‘Microsoft
YaHei’, ‘STHeiti’ }.endMain ul { width: 600px }.endMain li { float:left;
width:126px; height:126px; font-size:12px; margin-right: 15px }.endMain
li img {
background:url()
right top no-repeat; padding-right:6px; width:120px }.endMain li a {
color:#000 }.endMain li .lastImg { display:block;
height:75px;width:126px; overflow:hidden; margin-bottom:5px }/*
末页推荐――按钮 */.endBtn { border-top:1px dotted #dbdbdb; padding-top:
20px; text-align:center }.endBtn a { width:112px; height:34px; margin: 0
20px; font-family: “Microsoft YaHei”; line-height:34px; font-size:14px;
display:inline-block;
background:url()
no-repeat 0 0 }.endBtn a:hover { text-decoration: none }.endBtn
.btnReplay { background-position:0 -254px; padding-left:40px;
width:82px; color:#575757; text-align: left;}.endBtn .btnReplay:hover {
background-position:0 -295px; color:#575757 }.endBtn .btnEnter {
background-position:-189px -304px; text-align:center; color:#fff
}.endBtn .btnEnter:hover { background-position:-189px -345px;
color:#fff }/* Floating layer */#MyMaskWrap { position: absolute;
width:100%; height:100%; z-index: 1000; top: 0; left: 0; background:
#000; overflow: hidden; font-size:14px }#MyMaskCon { position:
absolute; width:100%; height:100%; z-index: 1001; left: 0; top: 0;
overflow: hidden; font-family:”simSun” }#MyMaskCon a { outline:0
}/*.pop_iv_bg { position:absolute; right:-35px; top:0; width:32px;
height:32px; overflow:hidden; cursor:pointer;
background:url();
line-height:99em; z-index:9;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.pop_iv_bg:hover {
background:url(:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”)}*/.pop_iv_bg { position:absolute; right:20px;
top:20px; width:54px; height:54px; overflow:hidden; cursor:pointer;
background-position:0 -294px; line-height:99em;
z-index:9;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.pop_iv_bg:hover {
background:url()
no-repeat 0 0}#Mask_Pic_wrap { margin:0 auto; position:absolute;
z-index:3;
background:url()
center center no-repeat }#Mask_Picture { border:9px solid #fff;
overflow:hidden }#Mask_Pic_wrap a { overflow:hidden
}#Mask_Pic_wrap .mask_cur{ position:absolute; width:50%;
height:100%; margin-top:-39px; top:0; background:#fff;
filter:Alpha(opacity = 0); opacity:0 }#Mask_Pic_wrap .mask_cur_prev
{ left:0; cursor:
url(“”), auto
}#Mask_Pic_wrap .mask_cur_next { right:0; cursor:
url(“”), auto
}#Mask_Pic_wrap .mask_zoom{ position:absolute; bottom:39px;
right:8px; width:31px; height:31px;
background:url();
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }#Mask_Pic_wrap .mask_zoom:hover{
background:url(:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”)}.Mask_Info { color:#fff; width:
800px;font-size:14px; position:absolute; left:50%; margin-left:-400px
}.Mask_Info p { text-indent:2em; line-height:25px; font-size:14px
}.txtC, .txtC p { text-align:center }.Mask_hd { height:37px;
line-height:37px}.Mask_hd h3 { font-size:18px; color:#484848;
float:left }.mask_btn { width:50%; height:100%; overflow:visible;
position:absolute; z-index:2; outline:none }.mask_btn:hover {
background:none }.mask_btn span{ height:93px; position:relative;
width:47px; position:absolute; top:50%; margin:-47px 0 0 0;
cursor:pointer }.mask_btn_prev { text-align:left; left:0}
.mask_btn_prev span{ left:5%; background-position:0 -98px;
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.mask_btn_prev:hover span{ _background-image:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.mask_btn_next { text-align:right; right:0
}.mask_btn_next span{ right:5%; background-position:0 -196px;
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }#Mask_Loading { position: absolute; z-index: 1
}.mask_btn_next:hover span{ _background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }#Mask_Loading { position: absolute; z-index: 1
}#Mask_Error { position: absolute; z-index: 2 }#Mask_PerHint
{position: absolute; z-index: 3; width: 62px; height: 28px; text-align:
center; font: bold 13px/28px Tahoma; color: #fff;
background:url();
cursor: default}#Mask_Hint {position: absolute; z-index: 3; height:
25px; bottom:53px; width:100%; color: #fff; font: 12px/25px Tahoma,
“simSun”; text-align: center}#Mask_Bottom {position: absolute;
z-index: 4; width:100%; bottom:0; left:0; overflow:hidden; height:29px
}#Mask_Count { width:100%; text-align:center; z-index:3; height:27px;
border-bottom:2px solid #232323; color:#fff;
font-size:12px}#Mask_Count span { display:inline-block;
background:url()
no-repeat; width:82px; height:29px }#Mask_Count em { margin:0 5px;
font-family:Tahoma; text-shadow:1px 1px 1px #494949 }.num_Cur {
font-size:18px; color:#0a96d0 }#Mask_Items { height:77px;
background-color:#000; overflow:hidden; padding:11px 0 0;
position:relative }#Mask_List { overflow:hidden; margin:0 auto;
position:relative; height:77px }#Mask_List ul { position:absolute;
top:0; left:0 }#Mask_Items li {float: left; width: 80px; height:60px;
display:inline; margin:0 2px 0; cursor: pointer; border:3px solid #000;
padding:1px; background:#000; opacity:0.6 }#Mask_Items li.hover {
border:3px solid #0a96d0; padding:1px; background:#fff } #Mask_Items
li:hover { opacity:1 }#Mask_Items li a { display:block; width: 80px;
height:60px; overflow:hidden; text-align:center }#Mask_Items img {
height: 60px }.Mask_Items_btn { position:absolute; top:24px;
width:26px; height:41px }.Mask_Items_btnL { left:13px;
background:url()
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.Mask_Items_btnL:hover { left:13px;
background:url()
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.Mask_Items_btnR { right:13px;
background:url()
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.Mask_Items_btnR:hover { right:13px;
background:url()
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=””,
sizingMethod=”scale”) }.mask-last-photo { width:530px; height:320px;
background:#fff; position:absolute; left:24px; top:14px; z-index:999
}.mask-last-photo .hd { border-bottom:1px solid #e6e6e6 }.m-picList {
padding-left:183px; position:relative; height:115px; text-align:center
}.m-picList-pic { position:absolute; left:0; top:0 }.m-picList-pic a {
width:155px; height:100px; display:block; text-align:center;
overflow:hidden }.m-picList-pic a img { height:100px }.m-picList-title {
font-size:14px; font-weight:bold; text-align:left }.m-picList-title a {
color:#093c8b }.m-picList-btn { margin-top:24px }.m-picList-btn a {
display:inline-block; line-height:28px; margin-right:6px;
padding-right:20px;
background:url() no-repeat
right top;}.m-picList-btn a span {
float:left;height:28px;padding-right:20px;background:url()
no-repeat left top;}.m-picList-btn a em { float:left;
height:28px;}.m-picList-btn .btn-replayPic em
{width:13px;background:url()
no-repeat -34px -32px;padding-right:5px;}.m-picList-btn .btn-MIcblog em
{width:16px;background:url()
no-repeat -211px -32px;padding-right:5px;}.mask-last-photo .bd h3 {
color:#093c8b; padding:4px 0 6px }.maskComend li { float:left;
width:142px; height:148px; border:1px solid #ececec; text-align:center;
background:#f3f6fd; padding:8px 9px 0; margin-right:10px }.maskComend
li .img { width:142px; height:92px; overflow:hidden; display:block;
margin-bottom:10px }.maskComend li img { height:92px }.Mask-share-box {
background:#fff; height:30px; text-align:right; padding:0 30px 0 9px;
position:relative }#t_weibo {
background:url() no-repeat 0
0; width:14px; height:17px; position:absolute; right:10px; top:2px
}|xGv00|67976bddc81434f421839aeb86200f50
|xGv00|60a70311526586fe908876bac0652304|xGv00|fd586c288592bf707d9eb04d9e28f2a8|xGv00|7a4fb90d20e9b7823d382aa34e55d1ba0/0隐藏查看图注
大家都在看再看一次进入图片中心 查看原图
|xGv00|02e3590efebf394caca0778042c15b3b|xGv00|16433e7e4c898ec36e7a7aa092cc072e|xGv00|8025d4bc02f77126ddde97eb1aca5b50#sidebar{
float: right; width:359px; position: relative; height:558px;
border-left:1px solid #4b4b4b; background:#383838; }.nowPlay {
color:#fff; font-size:14px; display:none; padding:9px 16px 6px;
font-weight: bold; background:#2F2F2F; }#Cnt-Main-Article-QQ .nowPlay
p { margin-bottom: 0; color:#fff; margin:0;padding:0;}#video_box{
float: left; width: 640px; height:518px; overflow:hidden;} .video_list{
float: right; width: 342px;position:absolute; left: 0; top: 0;
}.video_list_con{ height:511px;overflow:hidden;
background:#383838;}.video_list ul { background:#383838; *zoom:1;
}.video_list li{ }.list_box{ padding: 10px 10px 18px 17px; height:
47px;}.list_box p{ color: #d3d3d3; font-size: 14px; margin-top:
4px;}.bt{ line-height: 24px;}.bt span{ float: left; color: #8a8a8a;}.bt
em{ float: right;font-family:simsun}.live{ display: block;float:
none;background: url(images/live.png) no-repeat right;padding-right:
37px;}.list_box_over{ padding: 15px 19px 15px 27px; }.v_img{ float:
left; position: relative; margin-right: 10px; display: inline; }.v_img
p{ position: absolute; bottom: 0px; left: 0px;background-color:
rgba;width: 98px;}.v_img p span{ background: url(images/v_Icon.png)
no-repeat 0px 2px; text-align: center; margin-left: 8px; padding-left:
15px; color: #cfb28c;}.v_intr span{ color:#fff; font-size:12px;
}#Cnt-Main-Article-QQ { z-index:10}#Cnt-Main-Article-QQ .v_intr p{
color: #666666; margin-top: 4px; line-height: 22px; font-size:12px;
margin-bottom:0;}#scr{ width: 8px; background-color:#4b4b4b; position:
absolute; height: 470px; right:0;top:0; }#scr span { display:block;
width:8px; height:40px; background:#818181;position: absolute;
}.listvideoNLayout { height:558px; overflow-x: hidden; overflow-y: auto;
scrollbar-arrow-color: #61605d; scrollbar-face-color:
#818181;scrollbar-darkshadow-color: #1e1d1b;scrollbar-highlight-color:
#818181;scrollbar-3dlight-color: #1e1d1b;scrollbar-shadow-color:
#818181;scrollbar-track-color: #4b4b4b;
}.listvideoNLayout::-webkit-scrollbar{width:8px}.listvideoNLayout::-webkit-scrollbar-button{display:none}.listvideoNLayout::-webkit-scrollbar-button:vertical:end:increment{display:block;height:8px;background-color:#383838}.listvideoNLayout::-webkit-scrollbar-track{height:200px;background-color:#383838;border-radius:3px}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:start{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:end{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-thumb:vertical{background:#818181;cursor:pointer}#video_btn
{ display:none }#video_btn:hover { background-color:#fb9004;
}.video_btn { position:absolute; left:641px; height:558px; width:15px;
border-right:1px solid #262626; background-color:#383838;
background-image:
url();
background-repeat:no-repeat; background-position:center; }.nowLive {
background:#1c1c1c; } .nowLive .v_intr span { color:#FF7900;
font-size:12px; }.video_btn:hover { background-image:
url();
background-repeat:no-repeat; }.video_btn_right {
background-image:url(
{ background-image:
url();
background-repeat:no-repeat;}.list_box_over_cur {
background:#272727; }#sidebar { position:absolute; left:640px;
}.relativeVideo { position:absolute; float: left;
margin-bottom:35px}#ch { height:106px; }.reltit h3 {
font-family:”微软雅黑”; float:left; width:auto; padding-right: 20px;
}.relVideo .v_close {
background:url()
no-repeat 0 2px; position:absolute; right:8px; top:10px; font-size:12px;
padding-left:17px; color:#fefefe; height:17px; line-height:17px;
text-decoration:none }.relVideo .v_close:hover { color:#ff7603;
background-position:0 -48px }#followVideo .v_close { top:45px }
#icon_v_close { position:static; float:left; margin-top: 9px;
*margin-top: 7px; width: 19px; } .relativeVideo, .relInfo, .relVideo {
z-index: 1; }#mod_player { float:left; position:static; }.convideo {
float:left; width:640px; }.tjvideo { float:left; width:630px;
height:39px; border-top:1px solid #303030;font-size: 12px;
padding-left:10px; }.tjvideo span { float:left; color:#FC8D00;
font-weight:bold; line-height:38px; }#invideocon .tjvideo ul {
float:right; width:360px; font-size:14px; line-height:38px;
margin-bottom:0; } #invideocon .tjvideo ul a,#invideocon .tjvideo ul
a:visited,#invideocon .tjvideo ul a:link,#invideocon .tjvideo ul
a:active { color:#fff; border:none; }#invideocon .tjvideo ul a:hover {
color:#FC8D00; }#showHotBox { float:left; width:439px; }.relVideo {
height:588px }.relVideoF { height:627px }.relVideoF .video_btn {
height:597px }.relVideoF #sidebar, .relVideoF .listvideoNLayout {
height:597px }.relVideoF .listvideoNLayout { height:553px }/* 关注
*/#followVideo{width:640px;height:78px; border-top:1px solid #303030;
margin:1px 0 0; background:#000;
position:relative;top:518px;}#followVideoCover{ width:93px;height:53px;
float:left; display:inline; margin:12px 13px
0;border:0}#Cnt-Main-Article-QQ .followVideoInfo{ position:absolute;
width:521px;height:53px; font:14px/27px simsun;color:#989898; top:14px;
left:120px;margin:0}#Cnt-Main-Article-QQ .followVideoInfo
em{display:block; color:#fff; font-weight:bold; font-size:16px;
font-style:normal; width:20em; overflow:hidden}#Cnt-Main-Article-QQ
.followVideoInfo em
a{color:#fff;text-decoration:none}#Cnt-Main-Article-QQ
.followVideoInfo em
a:hover{color:#fff;text-decoration:underline}#Cnt-Main-Article-QQ
.followVideoInfo span{ display:inline-block; float:left;margin:0 20px 0
0}#Cnt-Main-Article-QQ #followVideo a.followVideoBtn{ height:20px;
overflow:hidden; font:14px/20px 微软雅黑; color:#ed6f00; margin:3px 0
0;cursor:pointer;display:
inline-block;text-decoration:none;border:0}#Cnt-Main-Article-QQ
#followVideo
a.followVideoBtn:hover{color:#ff950c;text-decoration:none}#Cnt-Main-Article-QQ
.followVideoInfo .followVideoBtn
span{padding-left:24px;background:url()
0 -6px no-repeat; float:none}#Cnt-Main-Article-QQ .followVideoInfo
.followVideoBtn:hover span{ background-position:0
-36px}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn
span.followVideoBtnEd{ background-position:0 -66px}#Cnt-Main-Article-QQ
.followVideoInfo .followVideoBtn:hover span.followVideoBtnEd{
background-position:0 -96px}#Cnt-Main-Article-QQ .followVideoInfo span
a{color:#ff9003;text-decoration: underline;}#Cnt-Main-Article-QQ
.followVideoInfo span a:hover{color:#ff9003;text-decoration:
none;}#Cnt-Main-Article-QQ .video_openNew{
position:absolute;top:10px;right:30px;color:#666;font-size:12px;
width:100px; height:22px;}.video_openNew
label{cursor:pointer}.video_openNew
label:hover{color:#fff}.video_openNew input{float:right;
position:relative;margin-top:6px;*margin-top:3px}#Cnt-Main-Article-QQ
.video_openNew strong{ float:right; margin:0 0 0
2px;line-height:22px;+line-height:25px;height:22px}#Cnt-Main-Article-QQ
.followWrap .followVideoInfo a { border-bottom: none }#select_video {
background-image:url();
background-repeat:no-repeat; font-size:12px; padding:0 9px;
color:#fff;cursor:pointer;text-decoration:none; float:left;
margin-top:6px; width:78px; height:18px; line-height:18px; color:#fff;
overflow:hidden; text-indent:-99em }.select_videoOn{
background-position:0 -200px
}.select_videoOn:hover{background-position:0 -250px}.select_videoOff {
background-position:0 -100px }.select_videoOff:hover {
background-position:0 -150px }#video_list_title {
font-family:”微软雅黑”; cursor:pointer;
background-image:url();
background-repeat:no-repeat; font-size:14px; position:absolute;
height:30px; line-height:30px; top:0; color:#526ca5;
}#video_list_title:hover { color:#369be9; }.video_list_title_left
{ left:560px; padding-right:18px;background-position:100% -292px
}.video_list_title_right { left:640px; padding-left:18px;
background-position:0 -342px}/* /关注
*/|xGv00|6e2da6f2ede560165438ae5b640d4393丹麦天使素颜照曝光
满脸雀斑震惊网友时长:1’19”播放:9来源:腾讯视频丹麦天使素颜照曝光
满脸雀斑震惊网友关闭自动播放相关专辑推荐视频:收起视频 正在播放
|xGv00|b8c11fe9f5cd5e959af0fc3dbfdb1faa

.g-btn, .galleryList-btn, .mask_btn span, .pop_iv_bg, .contextDiv
span{
background:url(//mat1.gtimg.com/news/dc/images/s_gallery_2012110702.png)
no-repeat 0 0; display:inline-block }.gallery { width:640px;
overflow:hidden; margin:0 auto 20px; position:relative;
text-align:center; font-size:14px }#galleryPicWrap { width:100%;
position:relative; z-index:1; text-align:center; overflow:hidden;
background:#fff url(//mat1.gtimg.com/news/hd2009fin/ajax-loader.gif)
center center no-repeat; height:395px }#galleryPic { background:#000;
filter:Alpha(opacity = 0); opacity:0}.galleryInfo { position:absolute;
bottom:0;left:0; text-align:left; z-index:1; width:640px;
visibility:hidden }#galleryTxtWrap { line-height:25px; font-size:14px;
color:#fff; width:100%; text-align:left; position:absolute;bottom:0;
z-index:3;background:url(//mat1.gtimg.com/news/dc/images/galleryTxtWrap_bg.png)
repeat 0 0; _background:none; _filter:
progid:DXImageTransform.Microsoft.gradient( GradientType = 0,
startColorstr = ‘#AA000000’, endColorstr = ‘#AA000000’);}#galleryTxt{
padding:5px 40px 0 11px; font-size:14px; line-height:21px; }#galleryTxt
p { padding:0; font-size:14px; height:30px; }.galleryInfo-btn {
position:absolute; right:5px; bottom:0; height:25px; width:70px;
line-height:25px; z-index:2 }.galleryInfo-btn div { font-size:12px;
color:#999; position:absolute; right:0; cursor:pointer
}.galleryInfo-btn b { position:absolute; width:0; height:0; top:9px;
margin-left:3px; border-width:4px; border-style:solid; font-size:0;
line-height:0; border-color:#999 transparent transparent; _width:7px;
_height:4px; _border:none;
_background:url(//mat1.gtimg.com/news/dc/images/gallery_txt_cor1.png)
no-repeat }.gallery-btn-close { width:40px; }.gallery-btn-open {
background:#3E3E3E; color:#fff; cursor:pointer; padding:0 5px;
display:none }.contextDiv { cursor:pointer;
width:50%;height:100%;position:absolute; top:0; z-index:2;
background:url(//mat1.gtimg.com/www/curls/images/s.png)
no-repeat}.contextDiv span { width:24px; height:43px; position:absolute;
top:50%; margin-top:-22px; visibility:hidden}.contextDiv:hover {
zoom:1}.contextDiv:hover span { visibility:visible;}#preArrow span {
background-position:0 -50px; left:16px }#nextArrow span {
background-position:-30px -50px; right:16px }#preArrow { left:0
}#nextArrow { right:0 }#lastCon { position:absolute; background:
#fff; height:400px; top:0; left:0; width:100%; z-index:6; display:none
}.gallery-AD { margin:0 auto; width:550px; position:absolute; left:38px;
_left:20px; top:0; z-index:11}.gallery-AD .l_qq_com { left:0
!important; top:0 !important}.galleryBottom { border-top:1px solid
#e0e0e0; border-bottom:1px solid #e0e0e0; position:relative; z-index:9
}.galleryList { height:68px; border-top:1px solid #fff;
border-bottom:1px solid #fff; background-color:#f2f2f2; padding:5px 0
}.galleryList ul { position:absolute; left:0; top:5px }.galleryList li {
width:80px; height:60px; overflow:hidden; float:left; margin:0 3px 0
1px; display:inline; text-align:center; border:3px solid #f2f2f2;
padding:1px; background:#f2f2f2 }.galleryList li.hover{ border:3px
solid #2d96e9; background:#fff }.galleryList li a { display:block;
width:80px;height:60px; overflow:hidden }.galleryList li img {
height:60px } .galleryList-btn { position:absolute; top:30px;
width:22px; z-index:3; height:22px; filter:Alpha(opacity = 60);
opacity:0.6; -moz-transition: opacity 0.5s ease; -webkit-transition:
opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity
0.5s ease }.galleryList-btn:hover { opacity:1; filter:Alpha(opacity =
100); color:#379BE9 }.galleryList-btn-l { left:5px;
background-position:0 -23px }.galleryList-btn-r { right:3px;
background-position:-30px -23px }.galleryTool { position:absolute;
top:10px; left:50%; z-index:2; margin-left:-84px; width:166px;
height:30px; border-width:1px 0; border-color:#c5b9b6;
border-style:solid; visibility:hidden }#Mask_Pic_wrap .galleryTool {
visibility : visible; top:15px }.galleryTool-wrap { border-width:0 1px;
border-color:#c5b9b6; border-style:solid; float:left;
position:relative; margin:0 -1px; width:100%;
overflow:visible;background:rgba(0, 0, 0, 0.2); height:30px; filter:
progid:DXImageTransform.Microsoft.gradient( GradientType = 0,
startColorstr = ‘#30000000’, endColorstr = ‘#30000000’)
/9}.galleryTool-num { float:left; width:60px; padding:0 5px;
text-align:right; color:#fff; line-height:30px }.galleryTool-num em {
margin:0 2px;color:#fff}.galleryTool-btn { float:left; width:80px;
padding:6px 0 0 10px }.galleryTool-btn .g-btn { margin-right:8px }.g-btn
{ filter:Alpha(opacity = 70); opacity:0.7 }.g-btn:hover {
filter:Alpha(opacity = 100); opacity:1 }.g-btn-left { width:10px;
height:20px; background-position:0 0 }.g-btn-right { width:10px;
height:20px; background-position:-16px 0 }.g-btn-play { width:20px;
height:20px;
background:url(//mat1.gtimg.com/news/dc/images/g_btn_play.png)
no-repeat; _background:url(//mat1.gtimg.com/news/dc/images/play1.png)
no-repeat 0 0 }.g-btn-pause { width:20px; height:20px;
background:url(//mat1.gtimg.com/news/dc/images/pause1.png) no-repeat 3px
1px }/* 模拟右键 */#cmenu { border:1px solid
#5EB4D8;background-color:#F6F9FD;padding:2px;}#cmenu ul,#cmenu li {
list-style:none; margin:0px; padding:0px; text-align:center;
font-size:12px; cursor:pointer }#cmenu .item { list-style:none;
margin:0px; padding:0px; height:23px; line-height:23px; display:block;
padding:0px }#cmenu .itemOver { background-color:#68B5EA; color:#fff;
cursor:default }/* 末页推荐――内容 */.endMain { width:564px; margin:0
auto; text-align: left; line-height: 18px }.endMain .title {
padding-bottom:8px; text-align: left; } .endMain h2 { font-size:14px;
line-height:26px; color:#44a2ea; font-family: “微软雅黑”, ‘Microsoft
YaHei’, ‘STHeiti’ }.endMain ul { width: 600px }.endMain li { float:left;
width:126px; height:126px; font-size:12px; margin-right: 15px }.endMain
li img { background:url(//mat1.gtimg.com/www/hd2013/images/shadowBg.png)
right top no-repeat; padding-right:6px; width:120px }.endMain li a {
color:#000 }.endMain li .lastImg { display:block;
height:75px;width:126px; overflow:hidden; margin-bottom:5px }/*
末页推荐――按钮 */.endBtn { border-top:1px dotted #dbdbdb; padding-top:
20px; text-align:center }.endBtn a { width:112px; height:34px; margin: 0
20px; font-family: “Microsoft YaHei”; line-height:34px; font-size:14px;
display:inline-block;
background:url(//mat1.gtimg.com/www/hd2013/images/hd_sprite_v1.0.png)
no-repeat 0 0 }.endBtn a:hover { text-decoration: none }.endBtn
.btnReplay { background-position:0 -254px; padding-left:40px;
width:82px; color:#575757; text-align: left;}.endBtn .btnReplay:hover {
background-position:0 -295px; color:#575757 }.endBtn .btnEnter {
background-position:-189px -304px; text-align:center; color:#fff
}.endBtn .btnEnter:hover { background-position:-189px -345px;
color:#fff }/* Floating layer */#MyMaskWrap { position: absolute;
width:100%; height:100%; z-index: 1000; top: 0; left: 0; background:
#000; overflow: hidden; font-size:14px }#MyMaskCon { position:
absolute; width:100%; height:100%; z-index: 1001; left: 0; top: 0;
overflow: hidden; font-family:”simSun” }#MyMaskCon a { outline:0
}/*.pop_iv_bg { position:absolute; right:-35px; top:0; width:32px;
height:32px; overflow:hidden; cursor:pointer;
background:url(//mat1.gtimg.com/joke/curls/Mask_close2_a.png);
line-height:99em; z-index:9;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_close2_a.png”,
sizingMethod=”scale”) }.pop_iv_bg:hover {
background:url(//mat1.gtimg.com/www/hd/mask/images/Mask_close2_h.png);_background-image:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_close2_h.png”,
sizingMethod=”scale”)}*/.pop_iv_bg { position:absolute; right:20px;
top:20px; width:54px; height:54px; overflow:hidden; cursor:pointer;
background-position:0 -294px; line-height:99em;
z-index:9;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_close2_a.png”,
sizingMethod=”scale”) }.pop_iv_bg:hover {
background:url(//mat1.gtimg.com/news/dc/images/close1.png) no-repeat 0
0}#Mask_Pic_wrap { margin:0 auto; position:absolute; z-index:3;
background:url(//mat1.gtimg.com/www/hd/mask/images/loading.gif) center
center no-repeat }#Mask_Picture { border:9px solid #fff;
overflow:hidden }#Mask_Pic_wrap a { overflow:hidden
}#Mask_Pic_wrap .mask_cur{ position:absolute; width:50%;
height:100%; margin-top:-39px; top:0; background:#fff;
filter:Alpha(opacity = 0); opacity:0 }#Mask_Pic_wrap .mask_cur_prev
{ left:0; cursor: url(“//mat1.gtimg.com/news/2009hd/arr_left.cur”),
auto }#Mask_Pic_wrap .mask_cur_next { right:0; cursor:
url(“//mat1.gtimg.com/news/2009hd/arr_right.cur”), auto
}#Mask_Pic_wrap .mask_zoom{ position:absolute; bottom:39px;
right:8px; width:31px; height:31px;
background:url(//mat1.gtimg.com/www/hd/mask/images/Mask_zoom_a.png);
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_zoom_a.png”,
sizingMethod=”scale”) }#Mask_Pic_wrap .mask_zoom:hover{
background:url(//mat1.gtimg.com/www/hd/mask/images/Mask_zoom_h.png);_background-image:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_zoom_h.png”,
sizingMethod=”scale”)}.Mask_Info { color:#fff; width:
800px;font-size:14px; position:absolute; left:50%; margin-left:-400px
}.Mask_Info p { text-indent:2em; line-height:25px; font-size:14px
}.txtC, .txtC p { text-align:center }.Mask_hd { height:37px;
line-height:37px}.Mask_hd h3 { font-size:18px; color:#484848;
float:left }.mask_btn { width:50%; height:100%; overflow:visible;
position:absolute; z-index:2; outline:none }.mask_btn:hover {
background:none }.mask_btn span{ height:93px; position:relative;
width:47px; position:absolute; top:50%; margin:-47px 0 0 0;
cursor:pointer }.mask_btn_prev { text-align:left; left:0}
.mask_btn_prev span{ left:5%; background-position:0 -98px;
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_b_l_a.png”,
sizingMethod=”scale”) }.mask_btn_prev:hover span{ _background-image:
none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_b_l_h.png”,
sizingMethod=”scale”) }.mask_btn_next { text-align:right; right:0
}.mask_btn_next span{ right:5%; background-position:0 -196px;
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_b_r_a.png”,
sizingMethod=”scale”) }#Mask_Loading { position: absolute; z-index: 1
}.mask_btn_next:hover span{ _background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Mask_b_r_h.png”,
sizingMethod=”scale”) }#Mask_Loading { position: absolute; z-index: 1
}#Mask_Error { position: absolute; z-index: 2 }#Mask_PerHint
{position: absolute; z-index: 3; width: 62px; height: 28px; text-align:
center; font: bold 13px/28px Tahoma; color: #fff;
background:url(//mat1.gtimg.com/www/hd/mask/images/perHint.gif); cursor:
default}#Mask_Hint {position: absolute; z-index: 3; height: 25px;
bottom:53px; width:100%; color: #fff; font: 12px/25px Tahoma, “simSun”;
text-align: center}#Mask_Bottom {position: absolute; z-index: 4;
width:100%; bottom:0; left:0; overflow:hidden; height:29px
}#Mask_Count { width:100%; text-align:center; z-index:3; height:27px;
border-bottom:2px solid #232323; color:#fff;
font-size:12px}#Mask_Count span { display:inline-block;
background:url(//mat1.gtimg.com/www/hd/mask/images/Mask_count.png)
no-repeat; width:82px; height:29px }#Mask_Count em { margin:0 5px;
font-family:Tahoma; text-shadow:1px 1px 1px #494949 }.num_Cur {
font-size:18px; color:#0a96d0 }#Mask_Items { height:77px;
background-color:#000; overflow:hidden; padding:11px 0 0;
position:relative }#Mask_List { overflow:hidden; margin:0 auto;
position:relative; height:77px }#Mask_List ul { position:absolute;
top:0; left:0 }#Mask_Items li {float: left; width: 80px; height:60px;
display:inline; margin:0 2px 0; cursor: pointer; border:3px solid #000;
padding:1px; background:#000; opacity:0.6 }#Mask_Items li.hover {
border:3px solid #0a96d0; padding:1px; background:#fff } #Mask_Items
li:hover { opacity:1 }#Mask_Items li a { display:block; width: 80px;
height:60px; overflow:hidden; text-align:center }#Mask_Items img {
height: 60px }.Mask_Items_btn { position:absolute; top:24px;
width:26px; height:41px }.Mask_Items_btnL { left:13px;
background:url(//mat1.gtimg.com/www/hd/mask/images/Item_b_l_a.png)
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Item_b_l_a.png”,
sizingMethod=”scale”) }.Mask_Items_btnL:hover { left:13px;
background:url(//mat1.gtimg.com/www/hd/mask/images/Item_b_l_h.png)
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Item_b_l_h.png”,
sizingMethod=”scale”) }.Mask_Items_btnR { right:13px;
background:url(//mat1.gtimg.com/www/hd/mask/images/Item_b_r_a.png)
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Item_b_r_a.png”,
sizingMethod=”scale”) }.Mask_Items_btnR:hover { right:13px;
background:url(//mat1.gtimg.com/www/hd/mask/images/Item_b_r_h.png)
no-repeat;_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”//mat1.gtimg.com/www/hd/mask/images/Item_b_r_h.png”,
sizingMethod=”scale”) }.mask-last-photo { width:530px; height:320px;
background:#fff; position:absolute; left:24px; top:14px; z-index:999
}.mask-last-photo .hd { border-bottom:1px solid #e6e6e6 }.m-picList {
padding-left:183px; position:relative; height:115px; text-align:center
}.m-picList-pic { position:absolute; left:0; top:0 }.m-picList-pic a {
width:155px; height:100px; display:block; text-align:center;
overflow:hidden }.m-picList-pic a img { height:100px }.m-picList-title {
font-size:14px; font-weight:bold; text-align:left }.m-picList-title a {
color:#093c8b }.m-picList-btn { margin-top:24px }.m-picList-btn a {
display:inline-block; line-height:28px; margin-right:6px;
padding-right:20px;
background:url(//mat1.gtimg.com/ent/hdTest/button.png) no-repeat right
top;}.m-picList-btn a span {
float:left;height:28px;padding-right:20px;background:url(//mat1.gtimg.com/ent/hdTest/button.png)
no-repeat left top;}.m-picList-btn a em { float:left;
height:28px;}.m-picList-btn .btn-replayPic em
{width:13px;background:url(//mat1.gtimg.com/ent/hdTest/button.png)
no-repeat -34px -32px;padding-right:5px;}.m-picList-btn .btn-MIcblog em
{width:16px;background:url(//mat1.gtimg.com/ent/hdTest/button.png)
no-repeat -211px -32px;padding-right:5px;}.mask-last-photo .bd h3 {
color:#093c8b; padding:4px 0 6px }.maskComend li { float:left;
width:142px; height:148px; border:1px solid #ececec; text-align:center;
background:#f3f6fd; padding:8px 9px 0; margin-right:10px }.maskComend
li .img { width:142px; height:92px; overflow:hidden; display:block;
margin-bottom:10px }.maskComend li img { height:92px }.Mask-share-box {
background:#fff; height:30px; text-align:right; padding:0 30px 0 9px;
position:relative }#t_weibo {
background:url(//mat1.gtimg.com/joke/temp/t_weibo.png) no-repeat 0 0;
width:14px; height:17px; position:absolute; right:10px; top:2px
}|xGv00|1fb0bb06362214bd8a4c73600db85f82
|xGv00|60a70311526586fe908876bac0652304|xGv00|fd586c288592bf707d9eb04d9e28f2a8|xGv00|7a4fb90d20e9b7823d382aa34e55d1ba0/0隐藏查看图注
大家都在看再看一次进入图片中心 查看原图
|xGv00|5ad71668a04be88106c7f3b6b0124a69|xGv00|cf2858dd3909bfac44d1789037df6d86|xGv00|fd3c56a359877121c096e8d4c2553827#sidebar{
float: right; width:359px; position: relative; height:558px;
border-left:1px solid #4b4b4b; background:#383838; }.nowPlay {
color:#fff; font-size:14px; display:none; padding:9px 16px 6px;
font-weight: bold; background:#2F2F2F; }#Cnt-Main-Article-QQ .nowPlay
p { margin-bottom: 0; color:#fff; margin:0;padding:0;}#video_box{
float: left; width: 640px; height:518px; overflow:hidden;} .video_list{
float: right; width: 342px;position:absolute; left: 0; top: 0;
}.video_list_con{ height:511px;overflow:hidden;
background:#383838;}.video_list ul { background:#383838; *zoom:1;
}.video_list li{ }.list_box{ padding: 10px 10px 18px 17px; height:
47px;}.list_box p{ color: #d3d3d3; font-size: 14px; margin-top:
4px;}.bt{ line-height: 24px;}.bt span{ float: left; color: #8a8a8a;}.bt
em{ float: right;font-family:simsun}.live{ display: block;float:
none;background: url(images/live.png) no-repeat right;padding-right:
37px;}.list_box_over{ padding: 15px 19px 15px 27px; }.v_img{ float:
left; position: relative; margin-right: 10px; display: inline; }.v_img
p{ position: absolute; bottom: 0px; left: 0px;background-color:
rgba;width: 98px;}.v_img p span{ background: url(images/v_Icon.png)
no-repeat 0px 2px; text-align: center; margin-left: 8px; padding-left:
15px; color: #cfb28c;}.v_intr span{ color:#fff; font-size:12px;
}#Cnt-Main-Article-QQ { z-index:10}#Cnt-Main-Article-QQ .v_intr p{
color: #666666; margin-top: 4px; line-height: 22px; font-size:12px;
margin-bottom:0;}#scr{ width: 8px; background-color:#4b4b4b; position:
absolute; height: 470px; right:0;top:0; }#scr span { display:block;
width:8px; height:40px; background:#818181;position: absolute;
}.listvideoNLayout { height:558px; overflow-x: hidden; overflow-y: auto;
scrollbar-arrow-color: #61605d; scrollbar-face-color:
#818181;scrollbar-darkshadow-color: #1e1d1b;scrollbar-highlight-color:
#818181;scrollbar-3dlight-color: #1e1d1b;scrollbar-shadow-color:
#818181;scrollbar-track-color: #4b4b4b;
}.listvideoNLayout::-webkit-scrollbar{width:8px}.listvideoNLayout::-webkit-scrollbar-button{display:none}.listvideoNLayout::-webkit-scrollbar-button:vertical:end:increment{display:block;height:8px;background-color:#383838}.listvideoNLayout::-webkit-scrollbar-track{height:200px;background-color:#383838;border-radius:3px}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:start{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:end{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-thumb:vertical{background:#818181;cursor:pointer}#video_btn
{ display:none }#video_btn:hover { background-color:#fb9004;
}.video_btn { position:absolute; left:641px; height:558px; width:15px;
border-right:1px solid #262626; background-color:#383838;
background-image:
url();
background-repeat:no-repeat; background-position:center; }.nowLive {
background:#1c1c1c; } .nowLive .v_intr span { color:#FF7900;
font-size:12px; }.video_btn:hover { background-image:
url();
background-repeat:no-repeat; }.video_btn_right {
background-image:url(
{ background-image:
url();
background-repeat:no-repeat;}.list_box_over_cur {
background:#272727; }#sidebar { position:absolute; left:640px;
}.relativeVideo { position:absolute; float: left;
margin-bottom:35px}#ch { height:106px; }.reltit { z-index:1}.reltit h3
{ font-family:”微软雅黑”; float:left; width:auto; padding-right: 20px;
}#v_colse { background:#000
url() no-repeat 0
2px; position:absolute; right:8px; top:10px; font-size:12px;
padding-left:17px; color:#fefefe; height:17px; line-height:17px;
text-decoration:none }#v_colse:hover { color:#ff7603;
background-position:0 -48px }#followVideo .v_close { top:45px }
#icon_v_close { position:static; float:left; margin-top: 9px;
*margin-top: 7px; width: 19px; } .relativeVideo, .relInfo, .relVideo {
z-index: 11; }#mod_player { float:left; position:static; }.convideo {
float:left; width:640px; }.tjvideo { float:left; width:630px;
height:39px; border-top:1px solid #303030;font-size: 12px;
padding-left:10px; }.tjvideo span { float:left; color:#FC8D00;
font-weight:bold; line-height:38px; }#invideocon .tjvideo ul {
float:right; width:360px; font-size:14px; line-height:38px;
margin-bottom:0; } #invideocon .tjvideo ul a,#invideocon .tjvideo ul
a:visited,#invideocon .tjvideo ul a:link,#invideocon .tjvideo ul
a:active { color:#fff; border:none; }#invideocon .tjvideo ul a:hover {
color:#FC8D00; }#showHotBox { float:left; width:439px; }.relVideo {
height:588px }.relVideoF { height:627px }.relVideoF .video_btn {
height:597px }.relVideoF #sidebar, .relVideoF .listvideoNLayout {
height:597px }.relVideoF .listvideoNLayout { height:553px }/* 关注
*/#followVideo{width:640px;height:78px; border-top:1px solid #303030;
margin:1px 0 0; background:#000;
position:relative;top:518px;}#followVideoCover{ width:93px;height:53px;
float:left; display:inline; margin:12px 13px
0;border:0}#Cnt-Main-Article-QQ .followVideoInfo{ position:absolute;
width:521px;height:53px; font:14px/27px simsun;color:#989898; top:14px;
left:120px;margin:0}#Cnt-Main-Article-QQ .followVideoInfo
em{display:block; color:#fff; font-weight:bold; font-size:16px;
font-style:normal; width:20em; overflow:hidden}#Cnt-Main-Article-QQ
.followVideoInfo em
a{color:#fff;text-decoration:none}#Cnt-Main-Article-QQ
.followVideoInfo em
a:hover{color:#fff;text-decoration:underline}#Cnt-Main-Article-QQ
.followVideoInfo span{ display:inline-block; float:left;margin:0 20px 0
0}#Cnt-Main-Article-QQ #followVideo a.followVideoBtn{ height:20px;
overflow:hidden; font:14px/20px 微软雅黑; color:#ed6f00; margin:3px 0
0;cursor:pointer;display:
inline-block;text-decoration:none;border:0}#Cnt-Main-Article-QQ
#followVideo
a.followVideoBtn:hover{color:#ff950c;text-decoration:none}#Cnt-Main-Article-QQ
.followVideoInfo .followVideoBtn
span{padding-left:24px;background:url()
0 -6px no-repeat; float:none}#Cnt-Main-Article-QQ .followVideoInfo
.followVideoBtn:hover span{ background-position:0
-36px}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn
span.followVideoBtnEd{ background-position:0 -66px}#Cnt-Main-Article-QQ
.followVideoInfo .followVideoBtn:hover span.followVideoBtnEd{
background-position:0 -96px}#Cnt-Main-Article-QQ .followVideoInfo span
a{color:#ff9003;text-decoration: underline;}#Cnt-Main-Article-QQ
.followVideoInfo span a:hover{color:#ff9003;text-decoration:
none;}#Cnt-Main-Article-QQ .video_openNew{
position:absolute;top:10px;right:30px;color:#666;font-size:12px;
width:100px; height:22px;}.video_openNew
label{cursor:pointer}.video_openNew
label:hover{color:#fff}.video_openNew input{float:right;
position:relative;margin-top:6px;*margin-top:3px}#Cnt-Main-Article-QQ
.video_openNew strong{ float:right; margin:0 0 0
2px;line-height:22px;+line-height:25px;height:22px}#Cnt-Main-Article-QQ
.followWrap .followVideoInfo a { border-bottom: none }#select_video {
background-image:url();
background-repeat:no-repeat; font-size:12px; padding:0 9px;
color:#fff;cursor:pointer;text-decoration:none; float:left;
margin-top:6px; width:78px; height:18px; line-height:18px; color:#fff;
position:relative; }.select_videoOn{ background-position:0 -200px
}.select_videoOn:hover{background-position:0 -250px}.select_videoOff {
background-position:0 -100px }.select_videoOff:hover {
background-position:0 -150px }.select_video_txt { display:none
}#video_list_title { font-family:”微软雅黑”; cursor:pointer;
background-image:url();
background-repeat:no-repeat; font-size:14px; position:absolute;
height:30px; line-height:30px; top:0; color:#526ca5;
}#video_list_title:hover { color:#369be9; }.video_list_title_left
{ left:560px; padding-right:18px;background-position:100% -292px
}.video_list_title_right { left:640px; padding-left:18px;
background-position:0 -342px}/* /关注 *//* 推荐关闭浮层
*/.videoTips{width:246px; height:20px;padding:8px 0px 11px
15px;background:
#f8f1db;border-radius:3px;position:absolute;right:17px;
top:35px;z-index:1;font-family:微软雅黑;color:#666 }.videoTips
.arrow{width:0px;height:0px; overflow:hidden;display:block;
position:absolute;right:27px;top:-10px;border-left:11px solid
transparent;border-right:11px solid transparent;border-bottom:11px solid
#f8f1db ;}.videoTips .txt{ line-height: 20px;font-size:14px;}.videoTips
.close{position: absolute;right: 10px; top:12px; cursor: pointer;
background:
url()
no-repeat; width:13px; height:13px ;}/*** 右下浮动播放小窗
*/.relativeVideo_float { overflow: visible !important; z-index: 100
!important; }.relativeVideo_float .relVideo { overflow: visible
!important; }.relativeVideo_float .relInfo,.relativeVideo_float
.relVideo .reltit .video_list_title_left,.relativeVideo_float
.relVideo .reltit .video_list_title_right,.relativeVideo_float
.relVideo .rel_sidebar,.relativeVideo_float .relVideo .convideo
.about_video_box { display: none !important;}.relativeVideo_float
.relVideo .reltit { width: 200px !important; position: fixed !important;
top: auto !important; right: auto !important; bottom: 186px !important;
left: 10px !important;}.relativeVideo_float .relVideo .reltit h3 a {
font-size: 14px !important; font-family: sans-serif
!important;}.relativeVideo .relVideo .reltit .relv_float_close {
display: none; }.relativeVideo_float .relVideo .reltit
.relv_float_close { display: block; position: absolute; top: 0; right:
0; width: 30px; height: 30px; line-height: 30px; text-align:
center;}.relativeVideo_float .relVideo .reltit
.relv_float_close:hover { text-decoration: none;
}.relativeVideo_float .relVideo .convideo .mod_player { position:
fixed !important; left: 10px !important; top: auto !important; right:
auto !important; bottom: 10px !important; width: 200px !important;
height: 176px !important;}.relativeVideo_float .relVideo .convideo
.mod_player embed,.relativeVideo_float .relVideo .convideo
.mod_player object { width: 200px !important; height: 176px
!important;}/* 覆盖 底部推荐区的文字层级 */.text-link-foot { z-index:
19 !important; }/* 右下角 开小窗随屏播 按钮 */.scrollBtn
.sB-floatvideo { display: none; height: 86px; }.scrollBtn .sB-floatvideo
a { background: #2D96E9
url(“”) 10px
8px no-repeat; padding-top: 50px; height: 36px; color: #FFF;
line-height: 14px;}/*临时广告bug处理*/#F_Rectangle_N .a_cover
{z-index: 0
!important;}|xGv00|070371e95f9ef2bd940687b0fc999b4f盘点靠整容从村姑变女神的十大女明星时长:5’22”播放:915835来源:腾讯视频盘点靠整容从村姑变女神的十大女明星关闭自动播放相关专辑推荐视频:收起视频
正在播放 |xGv00|a5409df5b320cfe42d97132d95fdcc27

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图