来谈谈：CSS3+HTML5网页制造实例:网页播放器

显示全部楼层 · 发表于 2015-1-15 22:57:56

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
破洛洛文章简介：CSS3绘制复杂的播放器按钮.
相干文章：HTML5和css3实例:制造HTML5网页视频播放器
比来入手下手进修html5+css3,实习下css3，绘制了几个播放器的按钮，有甚么更好的倡议，看人人指出……
<!DOCTYPE>

<html>

<head>

<metacharset="utf-8"/>

<style>

body{

background:#000;

}

header{

font-family:"MicroSoftYaHei";

font-size:30px;

color:#990000;

}

.circle{

width:120px;

height:120px;

-webkit-border-radius:60px;

-moz-border-radius:60px;

border-radius:60px;

border:2px#FFFsolid;

float:left;

margin:10px;

cursor:pointer;

}

.circle:hover,.circle1:hover{

-webkit-box-shadow:rgba(255,255,255,0.6)0015px;

-moz-box-shadow:rgba(255,255,255,0.6)0015px;

box-shadow:rgba(255,255,255,0.6)0015px;
}

.circle1{

width:140px;

height:140px;

-webkit-border-radius:70px;

-moz-border-radius:70px;

border-radius:70px;

border:2px#FFFsolid;

float:left;

cursor:pointer;

}

.triangleRight{

width:0;

height:0;

border-left:60pxsolid#FFF;

border-top:30pxsolidtransparent;

border-bottom:30pxsolidtransparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.next1{

margin:30px-10px020px;

float:left;

}

.next2{

margin:30px00-20px;

float:left;

}

.triangleleft{

width:0;

height:0;

border-Right:60pxsolid#FFF;

border-top:30pxsolidtransparent;

border-bottom:30pxsolidtransparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.pre1{

margin:30px-10px010px;

float:left;

}

.pre2{

margin:30px00-20px;

float:left;

}

.pause{

width:20px;

height:80px;

background:#FFF;

float:left;
}

.pause1{

margin:30px10px040px;

}

.pause2{

margin:30px10px010px;

}

</style>

</head>

<body>

<header>播放器按钮</header><section>

<divclass="circle">

<divclass="triangleLeftpre1"></div>

<divclass="triangleLeftpre2"></div>

</div>

<divclass="circle1">

<divclass="pausepause1"></div>

<divclass="pausepause2"></div>

</div>

<divclass="circle">

<divclass="triangleRightnext1"></div>

<divclass="triangleRightnext2"></div>

</div>

</section>

</body>

</html>
</p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：CSS3+HTML5网页制造实例:网页播放器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子